I don’t know about you, but I used to have a lot of problems with image files that were waaay too big and slowed my website down considerably. After all, images can be pretty heavy if you don’t pay attention!
So I decided to give you my best tips to make sure your images don’t slow down your website
Tip #1: Always use JPG images, unless your image is transparent or animated
This type of file compresses the best and will give you the quality you need with a smaller file size. This is perfect for stock images or your profile picture. If you have icons with a transparent background, though, you’ll need a PNG file (which supports transparency). If you’re using an animated picture, then GIF is what you want to save it in!
Tip #2: Compress your images as much as possible
Because you start compressing images, though, sit down for a minute and assess your needs. Is your website your portfolio for your photography? You’ll want a much better resolution! But if you’re a health consultant or a dentist, you might not need such a high resolution. Images that are slightly (and I mean “can’t-see-much-of-a-difference” slightly) blurry are not going to turn away potential customers while making your website load a whole lot faster!
I don’t have a perfect compression ratio to give you, you’ll need to test and try it yourself. But compression within 75-90% should make a good difference in the file size!
If you have a WordPress website, I would recommend installing WP Smush to help you with that!
Tip #3: Resize your image to the max width they’ll ever take
This is a little bit more tricky, as you might not always know what the max width of an image is going to be before you add it to your website.
If have a slider or a full-width image that takes the whole width of your monitor, I would recommend saving this image as 1980px wide. This is as big as your images should get, otherwise, they’ll just be too heavy for the users.
For all other images, you can use the Chrome Developer Tools to figure out what the width should be. Check out the GIF below to help you do that!
As you can see, this picture on my about page should be 800px by 533px. That’s as wide as it’ll ever get, so why have more pixels than you need?
Tip #4: Serve different image sizes depending on the screen size
Someone who’s visiting your website from their phone doesn’t need to download a 1980px wide image to be able to see it!
500px would do the trick too!
So how can you send a different size picture to those on mobile? Well, if you have a WordPress website, it’s actually a core feature! So you don’t have to worry about it too much.
If it’s not something included in your platform, though, you might want to try using the srcset property to set it up! This website has some pretty good tutorials to get you started: https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
The thing you have to remember here is that it’s not because you tell an image to be 300px width that the image itself is going to be smaller. Instead, you’ll just load a massive image in a tiny window. Try to avoid that as much as possible by resizing the image itself instead of the space it will take.
And hey, if you were able to speed up your website by doing this, let me know in the comments how it went! I’d love to know! 😍