Image Optimization

What is Image Optimization?
Images are probably the largest assets that are displayed on a website. Images range from just a few kB to well over a MB or three. I’ve seen cases where even a 5MB image was displayed as a header image on page and it seems to take forever to download and display on the screen.

Why?
Its important to understand why we want to optimize images. The process for a web server to serve up a 1MB file can mean more processing time. More processing time means more page load time. The whole point of image optimization is reducing the file size of the image without affecting and reducing the images quality. If you optimize an image and it blurs the image or if the image looks near the same then you have just over optimized. Over optimizing is just as bad as not optimizing at all. If the images are large enough, they will even slow your site down.

Examples of Image Optimization
Image optimization comes in a couple of different forms.

Lossless compression – reduces digital footprint
Lossy compression – most popular and probably the most effective at reducing image size.

Scaling

You can scale an image by reformatting the image to have a different width and height dimensions. If you change the canvas size then scale the image to fit inside the new canvas, essentially you are transforming the pixelation of the image. If an image is has too large of dimensions lets say, 6000px wide, and is a fairly large file such as 3MB, we can scale the image down to what we are using it as. If it only needs to be 1500px wide, we could take it down to 3000px. I used 3000px here because we may need to compensate for retina screens and 2x displays.

Smart Cropping

While cropping is technically not a way to optimize images, it is effective at making an image look centered and that will help with user experience. This can be important when optimizing for mobile. Mobile images should be similar to portrait mode instead of a landscape mode.

Image Choice and Format
An important aspect of image optimization is being able to choose the correct image. This means the image is sized correctly. If the body on your website is designed to have a max-width of 800px don’t use images that are 3500px wide. This just results in the file being overkill in size. It may not mean to only select images at 800px either.

Note: On high resolution retina screens may suffer from pixelation if the resolution is too low, so please keep this in mind. Take advantage of using the srcset property in the <img> tag or use <picture> to select the image. The browser will select which image to download and avoid unnecessary image downloads that can be expensive.

Using less color – You can use less color to reduce the size of an image by using an indexed color format. When creating a new file or edit an old one, check the file. The amount of colors, type of dithering, interlace option all play a role in the image size due to the combination of options altering each pixel.

Compression
At the heart of image optimization is compression. There are two types of compression that we deal with, lossy and lossless.

Lossy compression uses a transform called discrete cosine transform or DCT ( for JPEG images ) to reduce image size. DCT represents an image as the sum of sinusoids that have different wavelengths and magnitudes.

Lossless compression is based on differential pulse code modulation (DPCM). DPCM is a predictive model gathers neighboring samples and estimates a new sample or section of an image based off its neighbors.

Remove exif data
Exif is a file format and a small piece of data that is stored in digital photos. JEIDA made the specification and the documentation is very limited. Exif inserts data into the image itself. Each JPEG image has markers. These markers identify specific parts of the image. Exif has a specific data structure.
Exif contains data specific to the image. The following information is available via Exif:

shutter speed
flash mode
camera information
focal length
max aperture
exposure time
metering mode

Tools To Use
If you use Adobe photoshop then I suggest you take a hard look at the File→Save for Web menu option. Furthermore, there are web tools that use libraries that reduce image size and apply filters to give the perception of the image being optimized. For instance, the Gaussian blur, smoothes an images hard edges by taking a sampling of colors on each side of the edge then blends them together.

GIMP is another desktop based tool that will help reduce the digital footprint of an image.

Conclusion
The main point of image optimization is to provide the best quality image at the minimal amount of size. You can achieve this by refactoring an image with tools like Adobe Photoshop or the open source tool, GIMP. Remember to always think about reducing image size and keeping the quality of an image high enough to be viewable on a higher resolution screen.