Brandon Pretelt
Published in

Brandon Pretelt

Compressing Images for the Web

Image compression is pretty important for the web because being able to serve quickly loading web apps and websites is a necessity for many companies so that their users are able to get their information as efficiently and as quickly as possible to get through their day without a lot of disruption or headaches.

Image Compression

Loading huge images can also have an affect on page’s loading speed. One way to get around this is to compress the image to a smaller size using Photoshop or some other image editing program. The image compression algorithm will take a look at the image and find pixels of the same color and sort of mix them together. This takes out some information (or pixels in this case) and sort of blends them into more of a group of similar colors (or a block of similar colored pixels) in order to bring down the overall size. While this does result in a lower file size, it does, however, reduce the quality of the image itself. The combat this, you need to find a balance between size and the quality of the image. This will output an image that is both small and still good enough quality to be rendered on website. The best of both worlds, so to speak. Using this, you can have a quick loading site that still manages to look decent.

Size and Quality

The balancing act between size and quality can be a difficult one because there are a couple of factors that we need to consider to find the right balance between the two. We have file type (think like png, jpg, gif) and the type of compression that needs to be used.

The most common file type on the web is JPG. It works well for most people’s needs and it’s also a lossy file type, meaning it can really help lower the size but, the caveat to that, is that it can also affect quality. With JPG, that balancing act can be done by using Photoshop’s quality slider. By choosing medium quality (around the 50–60 range), it preserves both size and quality. Some further tweaking may be necessary but, for the most part, it can really go a long way.

PNG is also pretty common. PNG file types support transparency so, if you need transparency, PNG is the way to go. However, one of the big cons of PNGs is the fact that it is a lossless file type meaning that it serves high quality images without the, well, compression. While this can be beneficial at times, it’s best to use these for things such as logos.

Lazy Loading

Now for something that is a little more specific to the web: lazy loading. While this isn’t necessarily compression, it can, in fact, help with reducing load times when used properly with image compression and optimization.

Lazy loading is when the browser requests an image only when needed. It loads the images as you’re scrolling so it can reduce the strain on the server and therefore produces a faster loading site. This can be applied so that the browser only loads the essential images the first time and then, as mentioned before, the browser makes subsequent requests to pull down anything that isn’t as important as you’re going through the site’s content.

Conclusion

Compress images for the web is one of the best ways to improve the user experience and serve fast loading sites.

Brandon Pretelt is a student in the Digital Media Program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (Compression) in the (DGM 2341 Course) and representative of the skills learned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store