The biggest bottle neck on your website is most likely the images. We're adding more and more images to our sites and they are getting larger and larger in file size. If you are interested in fast loading websites (and you should be) then you should also be interested in how to best optimize those images. I'll give you some top tips on how to do that in this post.
My top tip is to ensure your image scaled to the required size for every device — don't use an 1800x1800 pixel image if it's only being displayed at 400x400 pixels. You're making your visitor download a larger than necessary image. Make sure you size and crop your images to the required dimensions before adding it to your site.
You should also be creating correctly sized images for each device or breakpoint you're targeting. By this I mean that if your header image is 1800 pixels wide on a desktop but only 620 pixels wide on mobile, you should create correctly sized versions of the image for each device.
Also keep in mind that you'll want to serve retina images, this means you'll need an image at least 2x the size that it's going to be displayed at. Depending on your audience, you might also need to serve non-retina (or 1x) versions of your images — not every one has retina quality displays, unfortunately.
And yes, this does mean that you'll be creating multiple versions of each image (keep reading as there's more info on how to do this below) — it's up to you to decide if it's worth it for your site and images. It will depend on the devices your target audience use and the specifics of each individual image.
Save for Web
Hopefully the software you're using to create your images has a "Save for web" option (Photoshop and Sketch have this feature) — make sure you're using this as it strips out some hidden data that's not required, and reduce the file size.
This is a simple tip, but it's one I find a lot of people don't follow.
Reduce The Quality
Another tip is to experiment with the quality setting when saving your images. Reducing this setting can dramatically reduce the file size, but be careful as reducing it too much can make your image look blurry and unprofessional.
You want to hit a balance between the image looking good and the smallest possible file size. As I say, have a play with the quality setting and bring it down as low as possible before you notice any blurring or artifacts.
Image Optimization Apps
The next thing you'll want to do is use an image compression app. The reason for this is because the app will take your image and do some magic compression that will reduce the file size even further, without any reduction in quality!
This one is a no-brainer — even if you haven't done anything else with the image, the minimum you should do is run it through an image compression app.
We make a rather lovely Mac app called Squash, which you should definitely check out. Squash accepts any type of image and dramatically reduce the file size without any reduction in quality — it's truly magical. You can watch a preview of how Squash works or download a free demo.
CDN and Caching (Advanced)
If you've done everything mentioned above, well done! You've already reduce your page load time and decreased the amount of data your visitors download.
The next thing you can do is look at using a CDN (content delivery network). A CDN distributes your images to multiple servers around the world. It then serves your images from the server located closest to each individual visitor. This reduces the amount of time it takes to request and download your images — have a search for “CDN” if you are unsure about what they are or how they work.
Setting up your own CDN is out of the question. My suggestion would be to use something like Cloudinary. They have a free account which allows storage of up to 75,000 images and 5 GB of monthly bandwidth — more than ample for the average personal blog or small business website.
With Cloudinary you can also generate on-the-fly “transformations” via the URL. For example; let's say you want to resize that header image we talked about earlier. On the desktop it'll be displayed at it's full size of 1800x600 pixels, but on an iPhone you only want to display it at 600x300. Rather than having to manually create and manage both versions, you can dynamically create the resized image via a URL like this:
w_600 is the width and
h_300 is the height. Cloudinary will automatically generate that image for you! How cool is that?
This will save you a lot of time if you are following my tips for serving appropriately sized images. I would highly recommend reading the Cloudinary documentation on image transformations for more detailed information (they have other cool features like face detection, applying filters, overlaying text, cropping, and much more).
Finally, Cloudinary also caches your images (and transformations) giving you even better load speeds. If you know that you are going to stay within the bandwidth limits of the free Cloudinary account, you've got nothing to lose.
There are plenty more ways to reduce image sizes and other advanced techniques for improving image load times. The suggestions here are just a few of the basics to get you started.
If you found this article helpful, think I missed something, or have a question, please let me know!