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.
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
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 🙂