What you Need to Know About Image Optimization
By Abby Buck
Optimizing images for the web is very important. If images are not optimized, it will increase their load times. Fewer users will interact with a website if they have to sit around and wait for images to load. Different techniques can be used to decrease downloaded bytes on a web page, this is where image optimization comes into play. Optimizing images works by removing all the unnecessary data that is saved within the image to reduce the file size of the image based on where it is being used in your website. Optimizing images for the web can reduce your total page load size by up to 80%.
JPEGs are usually more SEO-friendly than PNGs, especially if you do not need transparent backgrounds, as they offer better compression levels. What matters most is the actual file size (in Kb) of the images themselves: always strive to save them under 100Kb or less whenever possible. If a larger file size must be used above the fold (for hero or banner images for instance), it can help to save images as progressive JPGs where images can start progressively displaying as they are being loaded (a blurry version of the full image first appears and gradually sharpens as more bytes are downloaded).
Raster or Vector-Based?
You should consider if an image is really required on your site. If it is, should it be raster or vector-based? Raster images should typically be used for complex scenes and irregular shapes because they are represented in pixel form. To maximize the quality of a raster image, you must keep in mind that the raster format is resolution-specific meaning that raster images are defined and displayed at one specific resolution. Resolution in raster graphics is measured in dpi, or dots per inch. The higher the dpi, the better the resolution.
Vector images are best for geometric shapes and are zoom and resolution-independent. Further, unlike raster graphics, vector images are not resolution-dependent. Vector images have no fixed intrinsic resolution, rather they display at the resolution capability of whatever output device (monitor, printer) is rendering them. Also, because vector graphics need not memorize the contents of millions of tiny pixels, these files tend to be considerably smaller than their raster counterparts.
Image Compression
Image compression is the process of encoding or converting an image file in such a way that it consumes less space than the original file and is typically performed through an image/data compression algorithm or codec. Typically such codecs/algorithms apply different techniques to reduce the image size. There are two types of image compression: lossy and lossless.
Lossy
Lossy compression will eliminate some pixel data, images work well with this type of compression because our eyes have different sensitivity to different colors. We can lose some information about each pixel to reduce the size and our images will still look great. In Lossy compression, A file does not restore or rebuilt in its original form therefor is termed an irreversible compression.
Lossless
Lossless compresses the pixel data without eliminating it. File formats also contribute to the size of an image and they support different features such as transparency and animation. Lossless Compression does not eliminate the data which is not noticeable and can be restored to its original form.
Conclusion
Understanding what image optimization is and how to use it is a key factor in being a web designer/developer.
Works Cited
- https://www.sciencedirect.com/topics/computer-science/lossless-compression
- https://www.geeksforgeeks.org/difference-between-lossy-compression-and-lossless-compression/#:~:text=In%20Lossy%20compression%2C%20A%20file,restored%20in%20its%20original%20form.&text=Lossy%20compression%20reduces%20the%20size,reduce%20the%20size%20of%20data.
- https://gtmetrix.com/optimize-images.html
Great post. I feel like I have a better understanding of image optimization. I’ve heard about the importance image optimization in web design, but I didn’t understand it. Your picture example was helpful. It seams the only difference is the background.
What kind of program do you use to compress the pictures?
I loved the examples you used to illustrate your points. Your post was very informative and fun to read because I didn’t understand the why and how behind image optimization. I also never heard of the term “lossy” and thought you did a great job explaining it.
This was a very informative article. I really learned a lot. I had some knowledge of vectors, but this was the first time I had every heard the term, “lossy.” You did a great job of introducing this subject matter to the novice. You also provide a very direct and succinct conclusion, as well. I honestly can say, “I learned something new today.” Thank you.
I’m pretty much a novice when it comes to designing in an online capacity, but you did an excellent job at making this relatable to any skill level. You also defined all you terms, which I am extremely grateful for. The pictures you added really helped me understand the differences between rastor and vector, and when to use each correctly. Thank for the very informative read!
Great images! Your illustrations help readers to better understand the concepts.
Thank you so much for this very informative article. The use of image optimization is very useful when working with mobile-friendly sites. If an image can’t load quickly and be fluid with different resolution sizes you’ll lose viewers and or customers if the sites use for E-commerce sites.
I remember learning about image compression in high school. So, this definitely refreshed my memory. I always wondered why when I click on a site the image takes time to load. I usually will just refresh the page to make the image appear clear. I will try to remember this!