Images are one of the largest contributors to website in term of the byte size and so the load time, making it a crucial focus for optimization. Slow-loading websites can negatively impact user experience and, lower ranking on SEO and conversion rates. So, there is general consensus that we should always optimize images of our website. We will explore practical strategies to ensure your website loads quickly and still look crisp. Purpose article will give food for thought to newbies in website optimization. There are always two ways, ‘do it yourself’ (your website source) or ‘let someone else do it’ (CDN/automation services). We will explore the services that do the work for you, but will explore what they actually do so you can have greater control of the toolset that you use.
Image CDN Services
These services act as Content Delivery Networks (CDNs) that specialize in delivering and optmizing images on-the-fly. They provide features such as:
- Automatic Resizing
- Do it Yourself: With the introduction of varying pixel densities, you need images of different resolutions for the same physical ‘pixel’ size specified in HTML/CSS. For example, a 100×100 pixel element on a high-density display (2x) like an iPad actually requires a 200×200 pixel image to appear sharp and crisp. This is why you may often see image file names postfixed with 1x, 2x, or 3x (e.g.,
logo@2x.jpeg
) to indicate their resolution variants. You may configure this in HTML or CSS to load different image. You can user software like Mass Image Compressor (MIC) to resize your 3x images into 2x and 1x. - CDN Services: The Automatic Resizing features of such CDN frees you from hassle of create images of multiple sizes. However you should always remember to provide highest resolution image (ideally 3x image) i.e. provide 300×300 image to CDN for the HTML/CSS pixel specification of 100×100 image.
- Do it Yourself: With the introduction of varying pixel densities, you need images of different resolutions for the same physical ‘pixel’ size specified in HTML/CSS. For example, a 100×100 pixel element on a high-density display (2x) like an iPad actually requires a 200×200 pixel image to appear sharp and crisp. This is why you may often see image file names postfixed with 1x, 2x, or 3x (e.g.,
- Format Conversion
- Background: There are multiple image formats available, including JPEG, PNG, GIF, WebP, and the newer AVIF. Each format has its own strengths and weaknesses, but WebP and AVIF are considered modern as they are efficient at reducing the file size. Among these, WebP is often seen as the sweet spot because it supports features of JPEG, PNG, and GIF while delivering significantly smaller file sizes, making it an excellent choice for most use cases.
- Do it Yourself: Software like MIC offers the option to convert images to WebP, and the Mac version even supports handling animated images. However, in my experience, converting GIFs to WebP doesn’t always result in optimized files. It’s often better to create animated WebP (or animated PNG which MIC on Mac can handle very well and convert to animated WebP) from the start to ensure better quality at smaller size.
- CDN Services: CDNs often deliver the image in the most modern format that the requesting browser supports. AVIF being the best one out there, if the browser supports that format, your CDN will deliver AVIF image to it. But story of GIF is still same, have WebP (or animated PNG). Due to wide spread support of WebP format, I would actually provide WebP images to CDN and let it downgrade to JPEG/PNG/GIF and disable AVIF conversion as it is not required if your images are already compressed with offline software like MIC. In future, when AVIF has widespread support, you can upload AVIF images to CDN.
- Optmization
- Background: Images generated from software like Photoshop, Krita can still be optimized further with MIC without significant quality degradation. Files form the artists may sometime be larger than required as they may provide unnecessarily high quality images out of caution or lack of awareness. Sometimes, artist may not know the correct dimension that webpage needs, so they give larger size to avoid any quality degradation.
- Do it Yourself: It is always best to work with artist to right size and optimize images, or utilize software like MIC which provides image optimization.
- CDN Services: CDNs offer image optimization services that can be helpful, but I don’t fully trust them. Automated optimization often results in noticeable quality loss or files larger than necessary due to generic processing. It’s always best to optimize images manually to maintain control over quality and file size. CDN optimization services are only worthwhile if you haven’t already performed basic optimization on your images yourself (such user or untrained staff uploaded images).
More Services
Integration with WordPress/Shopify
Some plug-in tightly integrate with your framework and provide support to integrate with CDN. While integration with CDN is an excellent feature, always keep an eye on optimization part of such plug-in as they mostly do average job. Any basic plug-in that can resize the image to required dimension and integration with CDN is more than sufficient. You may not want the optimization or conversion feature of such plug-in.
Optimization-as-a-Service
Some web based services does image resizing and optmization – you just need upload all your images to their website and expect them to return you optimized images (again they do average job). Some provide API based integration with your CI/CD. Mass Image Compressor does decent job if you don’t want to spend a bomb on such services.
Conclusion
Now that you’re aware of the options, it’s crucial to evaluate and utilize them based on your specific use cases. There is no silver bullet – you’ll often need to manually optimize images while also relying on CDN services and, at times, framework plugins. The key is understanding what each tool does to your images and tailoring them to your needs, all while minimizing costs by avoiding unnecessary or redundant services as multiple processing on the same image will result in quality degradation without significant file size reduction.
Leave a Reply