{"id":886,"date":"2020-11-20T11:30:30","date_gmt":"2020-11-20T17:30:30","guid":{"rendered":"https:\/\/wowfall2020.londietmartin.com\/?p=886"},"modified":"2020-11-20T11:30:30","modified_gmt":"2020-11-20T17:30:30","slug":"what-you-need-to-know-about-image-optimization","status":"publish","type":"post","link":"https:\/\/wowfall2020.londietmartin.com\/?p=886","title":{"rendered":"What you Need to Know About Image Optimization"},"content":{"rendered":"\n

By Abby Buck<\/h2>\n\n\n\n

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%.<\/p>\n\n\n\n

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).<\/p>\n\n\n\n

\"image<\/figure>\n\n\n\n

Raster or Vector-Based?<\/h2>\n\n\n\n
\"raster<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Image Compression<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Lossy<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"lossy<\/figure>\n\n\n\n

Lossless<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Conclusion <\/h2>\n\n\n\n

Understanding what image optimization is and how to use it is a key factor in being a web designer\/developer. <\/p>\n\n\n\n

Works Cited<\/h2>\n\n\n\n