In webpages, Most of the bandwidth is taken by images and it affects webpage performance drastically. So, Image optimization becomes important for the best performance. I will not turn the wheel again. I will add the most important information here only.
Lazy/Preload loading for image optimization
Concept: You can take a look at it here.
Solution: You can use a free extension from mageplaza here.
Documentation: Documentation of extension can be found here
Layout shift for image optimization
Concept: You can take a look at it here.
Solution: The solution is itself in the above link. You can add height and width for images.
Image compression/Image format/Image size
Concept: Always use images with good compression and the size of images should be as per requirement.
Solution: Optimizer, Converter
Sprite Images for image optimization
Concept: This concept is used when there is a no of small images. we combine them in one image to reduce no of requests on the server.
Solution: you can find a good tool to create CSS sprite images here
Responsive images for image optimization
Concept: You can take look at it here
Solution: The solution is itself in the above link. You can add height and width for images.
You can find more information for speed optimization here
For custom requests, you can contact me here
[…] Image optimization and lazy loading […]