# The Developers Guide to Optimizing Images for the Web, Part. 1.


### Introduction.

You’ve been told to “optimize your images for the web.” Cool. But what does that actually mean, and how do you do it without nuking quality? This (opinionated) guide covers the what, why, and how. A couple of notes before we dig in:

***Why do you call this article opinionated?*** [Ilya Grigorik](https://web.dev/articles/compress-images) has this to say about image optimization,

> Image optimization is both an art and a science: an art because **there is no one definitive answer for how best to compress an individual image**, and a science because there are many well-developed techniques and algorithms that can significantly reduce the size of an image.

***Emphasis mine.*** That is the primary purpose of this article ; to share with you a bit of image optimization knowledge I have acquired over the years as a designer and front-end engineer. Not everyone will use the same approach as me, and your own approach will evolve as new tools, formats, and methods become available.

OK, enough introduction. What is image optimization?

### The What?!?

Image optimization can be defined as:

> A process applied to digital image files that results in a non-trivial reduction in file size while maintaining a level of visual quality that is acceptable for its intended purpose.

***What is a process?*** The process is the methodology that you apply and the tools you use to achieve the desired result. In this case, the production of an image file that loads faster on a viewport, without any detrimental loss of visual quality on a client device.

***What do you mean by non-trivial?*** Non-trivial in this context means that applying the process will result in a significant reduction in file size, and that this file size reduction provides an advantage to your resources and, more importantly, the user experience.

Simply put, image optimization is about removing unnecessary data from image files and the various methods of doing so.

### Why optimize?

There is a wealth of compelling reasons to optimize your images before publishing to the web. What follows are just a few of them ,  the reasons that I feel are most important.

***Site load time reduction = improved experience.*** A great example of this is represented in both Google and Bing image search. When you search for an image, seconds later you are returned a grid of hundreds of images. However, if you click through one of those images to load the high-quality version, that single image may take longer to load than the hundreds of thumbnails.

The search result images have been optimized for speed over quality. They are dimensionally smaller than the original and are of discernibly lower quality. Image optimization is ultimately about providing the best user experience, and that is not in all situations dependent on high-quality, high-resolution imagery.

![](https://cdn.hashnode.com/uploads/posts/6abc4024e6870e09f3d32cde/44387320-96cd-44f5-94ef-0fd9252a9c91.jpg align="center")

***Shedding the digital calories.*** Here’s the thing about digital images. They are bloated and contain far more visual information than our displays can accurately represent in [pixel density](https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922), and more importantly, than our eyes can discern at the [typical sitting distance to a display](https://www.octaneseating.com/science-measuring-seating-screen-distance).

If you want to test this for yourself, print out a full-resolution digital image you took on one of those photo printing booths. Open that same photo in your favorite photo editor (I use Photoshop CS) and save a copy of the image in 100 dpi. Open it full screen and compare the printed image to the digital version at normal viewing distance. Test how much visual difference you can discern.

***What considerations should I factor into my optimization choices?***

1\. Which is more important to the user? Fast results, or high-quality images?  *I highly encourage user testing your product concepts. Otherwise, how do you know?*

2\. What level of quality loss can we accept before the image becomes less useful to the viewer? *Another push for user testing*.

3\. What limitations does our hardware and software place on delivery results?

4\. What level of loss can we accept before the quality of the results reflects negatively on the expectation people have for our brand?

5\. What does the internet service look like in the areas where our target demographic lives?

***Reduction in load on resources.*** Storing huge image files on a server eats up your available storage space, space that you are paying for based on a tier. I don’t like spending more money than I need to, and I am sure you don’t either. Additionally, serving up large files bogs down a network. You may be able to serve up high-resolution images to one or two people at a time without an issue, but what about hundreds of visitors trying to load a page with multiple high-resolution images at the same time? At some point, the load increases to a point where the hardware cannot keep up, and your users experience pays the price.

This brings us to bandwidth.

![](https://cdn.hashnode.com/uploads/posts/6abc4024e6870e09f3d32cde/bb296562-bc28-4b4a-b502-4c5b1cf916b7.png align="center")

***Broadband is expensive, and still in short supply.*** If you are lucky enough to live in an industrialized nation, with widely available and affordable high-speed internet, congratulations! You are in the minority.

In the US and Europe, only about 50% of the population have a broadband subscription. Things are far worse in Asia, Africa, and the Middle East, where the [percentages drop into the teens and single digits](https://en.wikipedia.org/wiki/List_of_countries_by_number_of_broadband_Internet_subscriptions). In developed nations where the majority of internet use has gone mobile, subscribers experience data caps that are costly to exceed, and equally expensive to upgrade.

You are building a product for these users. Don’t punish their bandwidth for visiting your website. Reward their choice to visit your site with a fast-loading and optimized experience. If you don’t, you are definitely going to drive up those [bounce rates](https://support.google.com/analytics/answer/1009409?hl=en) and annoy the people you are trying to solicit.

### [Continue to Pt. 2 →](https://gemlarin.github.io/blog/the-junior-developers-guide-to-optimizing-images-for-the-web-part-2)