25 ways to optimize images for better performance

Images are usually the slowest thing to load as their file size can be quite heavy in disguise and the quality may not be that great. For optimum performance, we have to make the images small in file size, load them when needed and style for minimal layout shift. Here are 25 ways to help you with that.

1. Optimize the images using photoshop save for web

If you are optimizing manually, photoshop is the best choice as it provides highest level of control of file size and quality. It provides lot more options to chose the best compromise.

2. If your image contains less colors, strokes, prefer GIF format

GIF images are getting outdated these days, but its still one of the best choice for less colors, simple strokes where you can bargain with color values.

3. Compress SVG images further

SVG image that are generated from illustrator or very similar software contain extra informations which may not be always necessary. Along with that, they are actually created out of code, which can be further compressed. For details about SVg compression refer: https://www.w3.org/TR/SVG11/minimize.html. There are other online tools or npm packages available to compress svg.

4. Try to serve webp formate image by making use of CDN

Webp is slowly gaining popularity and getting adopted by browsers. We have seen nearly 20-25% improvement compared to a regular jpg image( Note: Compression differes from image to image based on color depth, contrast, artwork complexity). While some browsers still don’t support it, you can make it available for the browsers that support it. You may make two versions of the same image and based on the request accept header support for webp.

5. Serve correctly sized image, do not use a large dimension for a smaller device

Often in responsive implementation we tend to put a generic image to manage a view port segment. As an example, to address view port segment that starts with 320 to 540 screen width, we take an image that can look good at 540px for optimum quality. Where this works good, but on lower segment of view port, the image is still larger than required. It does not even make sense to create images for every viewport size. If you don’t worry about much about server side processing and if you have caching implementation, the correct image size can be requested from the browser and server would resize the image for very first request and cached there after. You may need these system setup and caching strategy enabled on your cloud solution.

6. If image contains transparency, use PNG 24 Bit. 

PNG works out to be the best for small transparent images. Choosing 24 bit option works better than 8 bit. But mind that sometimes transparency can result in high file size.

7. If image contains lots colours, gradients – use jpg format for compression

JPG format uses a lossy compression algorithm to downsize images file size. It works best when there is gradient colors which it can optimize easily.

8. Prefer to choose an image with less sharpness and gradient colors in unfocused areas for better compression

Image needs to keep more details about the edges when there is more sharpness. Over sharpening a photo can dramatically increase file size compared to reasonably sharped image. If a photo has defocused area, this means there are less sharp edges and more gradients, which ultimately makes easy loss of data and can be represented with less file size.

9. If transparency can be managed via background color, choose jpg compression

Sometimes we need small area of an image to be transparent. In this case if it has to blend into background with a solid color value, then make use of jpg format with same background color than a png transparent image. PNG images can prove to be up to 10 times heavier in such scenarios.

10. For logos, icons, prefer SVG image format.

SVG is scalable, meaning it a drawing at runtime with help of geometrical algorithms. If the artwork is complex, which contain lot of gradients, small small shapes, lots of curves, So, ground rule isDo not use SVG for complex images, icons, thumbnails.

11. Choose css sprite images effectively.

CSS sprites was one of the best solution to minimize number of network requests. Not these days with HTTP2 in action. However this is still one of the good ways for combining small images in to one and use them as backgrounds.

12. Avoid base64 encoding for complex and images larger than 50×50 dimension.

Base 64 encoded images are great to avoid extra network requests. But as the image dimension grows, the encoded string also gets bigger and bigger. Though there is no standard or limit, how ever I ways recommend not encode any image thats more than 50×50 pixels.

13. Lazy load images for below the fold content.

Lazy loading images is one of the best possible solution to make your page load faster. There are different javascript libraries that can help in achieving lazy loading of images. The most easiest approach is to define loading attribute which is now supported by major browsers ( safari – being the exception). Browsers automatically takes care of the loading based on bandwidth, scroll position.

14. If image size is fixed, apply width and height property

If you are aware of the image size and specially for lazy loaded images using browser inbuilt image attribute, it’s always suggested to mention width and height attributes in the <img> tag. This makes browser reserve space and does not suffer reflow after the image is fully loaded.

15. For dynamic lazy loading, make use of a similar aspect ratio base 64 encoded image

If your application has a lazy loaded image which will be loaded after as we scroll, we usually fill the src with a 1×1 transparent png image many a times. That results in a page shift when loading as the browser reserves height that exactly equal to the width. The best idea here is to use an image that has the same aspect ratio of the original image and convert into a base 64 encoded string, so that there is no additional network request. This can be pretty fast and the layout does not shift.

16. Explore AVIF

AVIF is next generation image format that claims to reduce nearly 50% file size compared to JPG. Refer the link for further details: https://www.lambdatest.com/blog/avif-image-format/

17. Make use of automation to scale down too many images

If you have too many images or you need to migrate from one design to another design where image size, aspect ratio do change, you probably need to make use of some kind of automation to save time. I personally use mac automator service to scale my photographs creating different presets. You may choose a node, photoshop batch processing scripts or a digital asset management tool to do this task. This is not an optimization technique but a time saving one. The automation tools can resize, crop based on your need.

18. Use AI based image quality and subject recognition

This is again a time saving technique if you have too many images/photographs and you need different aspect ratio and different scale down/up sizes for a single image. Adobe sensei, cloudinary imagga smart cropping are some of the solution that I know can help you to achieve this.

19. Use css height in percentage for dynamic images

Most of the time we end up giving an image 100% width and auto height and let the image scale based on container as you resize the browser. But this make the layout adjust its height as the image load in the browser. The best way to handle such case is to contain the image in an aspect ratio box. For details you can visit here: https://css-tricks.com/aspect-ratio-boxes/

20. Load a small scale image for faster preview in case gallery views

This is an old school way of creating a faster preview experience for users for large preview of too many items in the gallery. This technique is seen in flickr. You would scale up the thumb image to the large dimension and then load the correct image once its loaded when the user stop by to see it. You may choose to preload images for next three or four items when browsing the gallery to make the experience more smoother.

21. Do remember to style the alt text for negative cases

Things go wrong, even though we take great care of them. And images when not loaded because of some reason, alt text is visible. We some time skip styling alt text and they inherit parent containers font size. Which some time can break layout based on how big or small the font size and length of the alt text. So, make sure you style them correctly so that there is minimal layout shift in the absence of the image.

22. Make balance between pixel density and image size

To achieve high level of clarity, devices are including higher pixel density in their display unit. Which can be detected by javascript using window.devicePixelRatio value. For older, low cost screens, the value is set to 1, but for recent phone screens, high resolution monitors, mac books, surface tablets its value is greater than 2. If an image is set to it’s original width and height in these devices, it would look blurred. So, we usually put. an image with higher dimension that tend to be the original dimension multiplied by pixel density. Ex: for an image with 100×50 pixels, we may end up using a 200×100 pixel image for a device that has device pixel ratio as 2. But as we increase the dimension, the file size also grows exponentially. The suggestion in. this case is to find a sweet spot of quality and file size. Even if your phone support pixel density as 4, it does not necessarily mean to have a 4 times larger image to look crisp. You can manage with twice original dimension in most cases. So, choose image dimensions using your judgement.

23. Remove unwanted metadata from the images

Whenever a photograph is being taken via camera or edited with post processing softwares, it carries all details. We often call it exif data. Sometimes this data is comparatively more than we expect. So, for smaller size images, we can remove these data while saving for the web using photoshop can help reducing some extra bites.

24. Compress animated GIFs where ever possible.

Animated GIF are image sequences and the file size can be very high for a small animation of few seconds. You may choose to compress using some online tools or photoshop before publish it outside.

25. Try facebooks preview image technique

Facebooks solution for low band width case for handling image experience is really worth the effort to improve perceived performance. Refer the facebook article here: https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/

And of course you need to make the basic network optimization techniques such as images are gzipped, have proper caching headers, are fetched from CDN.

This list is not the final one. I may be missing some more points. Do help me to add them by commenting below. Do visit this page for updated content time to time 🙂