Your Web Image is Unnecessarily Bloated
Images make up a majority of web content.But a lot of websites and applications that we browse aren’t always delivering the most optimal image format, size, quality and dimension. As a developer, it seems inefficient to serve a 2,000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality. We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:
- Optimized formats
- Third-party Libraries
- Third-party APIs
Optimized FormatsIt is natural to use image formats such as PNG, JPEG and GIF. These three have been around for several years, but they each have characteristics that would make you choose one over another in certain cases. Additional formats have been introduced and some are being standardized in order to provide a better way to serve images in their best optimization level.
Third-Party LibrariesYou can also use third-party libraries to compress images. These libraries provide an exposed API method to which you can pass your image file, specify some compression argument, and have a compressed image returned for your configuration.
Third-Party APIsThere are public and premium third-party APIs that could be used to process a bloated image, which is then returned to you as an HTTP response. This so far is the most easier to use because it just requires basic knowledge of HTTP to get your images compressed. It's not language or platform dependent which makes it a little more flexible than the others.
A Better Choice That Offers CDNWhile the platforms discussed above are commonly used for compressing images, not one offers a comprehensive, intelligent solution for compression and optimization. Image delivery and upload may even become more complex when you need to serve your images via a content delivery network (CDN). This adds another layer of complexity to the problem. But, what if there was a single tool that could:
- Upload, store and deliver images via CDN
- Transform images (dimension, color adjustment, etc)
- Compress images losslessly
Image Quality TransformationThe following image of a woman was delivered using Cloudinary (the upload mechanism is not covered but you can read about that here): It's delivered with this URL:
http://res.cloudinary.com/demo/image/upload/woman.jpgThis image weighs about 569kb. This is not a bad quality, but we can do better. Let's see how much we can adjust this image without losing visual quality:
qtransformation property takes a variety of values, one of which is a range of 1 to 100 that indicates the quality in percentages. This is what we have applied above and the image was trimmed down to 123kb. We just eliminated 446kb, which is a great example of what we mean by the title of this article: "Your Web Image is Unnecessarily Bloated." Let's go hard on this image and see what's the worst that can happen:
http://res.cloudinary.com/demo/image/upload/q_40/woman.jpgI just took the quality down to 40 and trimmed down the size to 38kb, yet the visual quality of the image is partially degraded. By now you could imagine the bandwidth you’d be wasting because of the lack of compression. Let's try 10 percent.
http://res.cloudinary.com/demo/image/upload/q_10/woman.jpgNow the image is visually poor. This doesn't mean we can tell for sure that 40 percent is the perfect point. It could be 30, it could be 20, but we don’t know exactly To find a perfect quality, we can use the
autoquality value rather than a rigid value:
http://res.cloudinary.com/demo/image/upload/q_auto/woman.jpgThe auto value produces an image that weighs 45kb. This is easier and quicker than using a rigid value and guessing the perfect compression rate.
Auto FormatsIn addition to quality transformations, you also can define automatic transcoding for your images. This enables Cloudinary to choose a suitable, and optimal, image format for the browser rendering the image:
http://res.cloudinary.com/demo/image/upload/f_auto/womanBrowsers, such as Chrome, support specific formats, like WebP, to improve performance . Cloudinary always knows when and how best to do this without losing the visual quality of the image.
Generally you cant get away for artefacts in images if you are going to compress them. But some images will compress far better than others. If you are going to serve images for large screens then landscapes are always going to work better than images with loads of details. With HTML5 you can serve images depending on the browser sizes which does help but if you go this route its worth remembering anyone not using a modern browser wont get the proper image served to them. WordPress now uses this method by default.