Dealing with images on your website or blog can be a frustrating experience. Many make the mistake of uploading images without reducing the file size or dimensions which can cause big problems in the long run – particularly with load time, user experience, and SEO implications.
So what is the best method for saving images for your website or blog?
- What are the right dimensions? Does that work for a 27″ iMac with 5K display?
- What is the best image size? Does the 70 KB rule still apply?
A great article by inSquare titled “The Right Image Sizes for Websites” talks about dimensions and page load time. It’s a GREAT article. Take a quick look.
The other side of the coin, image size, isn’t really addressed there, so I needed to look elsewhere. I’ve read several places that talk about 70KB as a good target to shoot for when it comes to image size, but when I look at sites like apple.com, their images are 352 KB (for a 774 × 1104 image), 127 KB (for a 990 × 610 image), and a swath of image sizes in between. So does the 70 KB limit really apply?
I’m not so sure it does. Well, maybe, but there sure are a lot of opinions on this around the web. Shopify recommends you try to keep images around the 70KB mark, but for another opinion: How should I resize & save my images? By ProPhoto you can read this:
“So, when editing your images, you’ll want to try get that file size as small as you can, without losing too much of the quality of your original image. … While there isn’t a hard-and-fast rule for image file size, we recommend trying to keep your images in the 300-400kb range, or less. If some of your images end up over this, it’s not the end of the world. Just try and keep as many of your images as trim and tight as possible.”
So it sounds like recommendations fall between 70KB and 400KB (generally) and which one you choose to follow will depend on you.”
Just going from 100% down to 95% on the quality slider in Photoshop “save for web” can reduce the image size significantly without really sacrificing much visual quality, so it seems worth it.
Google has prepared a great resource about image management, and here are two great portions from that article:
“So, what is the “optimal” configuration of lossy and lossless optimization? The answer depends on the image contents and your own criteria such as the tradeoff between filesize and artifacts introduced by lossy compression: in some cases you may want to skip lossy optimization to communicate intricate detail in its full fidelity, and in others you may be able to apply aggressive lossy optimization to reduce the filesize of the image asset. This is where your own judgment and context need to come into play – there is no one universal setting.
“… For best results, experiment with various quality settings for your images, and don’t be afraid to dial down the quality – the visual results are often very good and the filesize savings can be quite large.”
(view it in context here)
“There are three universally supported image formats: GIF, PNG, and JPEG. In addition to these formats, some browsers also support newer formats such as WebP and JPEG XR, which offer better overall compression and more features. So, which format should you use?”
(view it in context here)
But what about retina displays? How should I handle image size and dimensions when thinking about the visitor who is using a 13″ laptop AND the visitor who is using a big retina display?
I would love to hear your advice on this, and on anything else I missed out on in this post. And do you have any good resources to refer to?
Here are some good resources I came across, including those mentioned in this article:
- Guide for image optimization – Google developers
- 10 must know image optimization tips – Shopify
- JPEG 101: A crash course guide on JPEG – Six Revisions
- Everything you need to know about image compression – Noupe
Great article, as a wedding photographer I struggle with this issue often as my website has many photographs. I have been experimenting with limiting the file size to 100mb when I export them through Light Room and it seems to work pretty well.
I use photoshop and split all images into small pieces with one click save, or I imbed them into the web page back ground, and split the whole thing except the floating links, clicks, etc.