Image Optimization

Flow Chart asking if you need animation for an image. Also what format is needed

Formats

Pixel differences

Zoomed in Vector and Rastor Images

Zoomed in Vector and Rastor Images

Get Rid of Or Replace Images

1.     The very first thing that we need to do is make sure that we need the image at all. Images are heavy data copared to JavaScript, CSS, and HTML.

2.     Make sure that any special animations are done through CSS vs adding layer after layer to an image causing it to bloat and become heavy.

3.     Make sure that when using text that it does not go in the image unless absolutely necessary. Text is very hard to stretch and compress. Always overlay the image with text so that it is selectable, searchable, zoomable, and friendly for high DPI devices (Dots Per Inch, essentially devices that have very high resolutions).

a.     Always use a web friendly font as well.

Vector vs Raster Images

For the majority of all websites Vector images are ideal. Raster Images are used for complex scenes such as a forest with lots of activity going on. While Vector images are simply images that use geometric shapes. See Example Below:

Vector formats are again used for simple images with easily definable geometric shapes. Icons, Logos, etc.

Raster Images are great for more complex images such as photos. They look great at a birds eve view but when you zoom in you will see more and more pixilation.

High Resolution Screens

There are different kinds of pixels that we need to know about when it comes to images. One is CSS pixels and another is Device pixels. A single CSS pixel can contain multiple device pixels. Example: A CSS pixel may correspond directly to an individual device pixel or several device pixels. The more device pixels connected to a CSS pixel the finer the resolution can be shown on the screen of the device.

As you can see the higher the device/physical pixels the more refined an image can be. This can cause the image to become heavy, but IF we use a vector image we should have no issues. In the case that we have to use a Raster Image there could be a problem.

Screen Resolution

1x is 10,000 pixels and 40,000 bytes at 4 bytes per pixel

2x is 40,000 pixels and 160,000 bytes at 4 bytes per pixel

3x is 90,000 pixels and 360,000 bytes at 4 bytes per pixel.

As you can see the more you zoom the data load increases by a factor of 4.

Vector Image Optimization

All modern browsers now support SVG images (Scalable Vector Graphics), SVG is an XML based image for 2d images.

What you need to know:

1.     SVG in an XML Based image formatting

2.     SVG files need to be minified

3.     SVG files need to be cached as well.

Optimizing Raster Images

A Raster image is much more complex than a vector imgage, but that has an advantage as noted above. Each pixel encodes the color and how transparent it needs to be (causing the image to be heavier but more finely resolved)

This is compressible but only up to a certain degree. You will need to find out what that, usually percentage, is and then compress to the point it breaks into pixilation.

Lossless Vs Lossy Compression of Images

Our eyes work in a unique way that makes them more sensitive to one color over another. Knowing that we can “lose” parts of a picture without our eyes perceiving it. Because of this we can optimize two different types of images.

1.     Images using “lossy” eliminates excess pixel data

2.     Images using “Lossless” compresses excess pixel data

So what should you do? Lossy or lossless? That depends on the image whether it’s a vector or a raster image, and how big of a trade off you are willing to do. You can even lossy an image then lossless it! When getting rid of pixels in the lossy format you can reduce the width and height of the image. If you have access to Adobe Photoshop you can use the quality slider provided by the “Save For Web” function.

Figure out what works best for you and through experience its always best to start at 100, jump to 20 and continue to cut your search grid in half until you find the rough range of what you are looking for then fine tune it.  Remember that different types of images will have a different look of quality even on the same “quality” scale in Photoshop. A general guide will never work across all images.

Select The Right Format

There are several different types of images and they all do or do not do two things. Transparency and Animation.

Making sure you find the right one will help in making sure your image is not only properly formatted but optimized.

You will use GIF PNG and JPEG 99% of the time.

Below is a waterfall guide on how to choose the right format.

Scaling Your Images

Ever tried to stick an elephant through a garden hose? Me either but its probably pretty hard. The same goes for trying to push beautiful high res images into a 200×200 container on one of your pages.

We have optimized the image itself by following the above guide. Now we need to make sure that optimized image fits properly. If this is not done we are essentially shipping an elephant to someone’s front door so they can take a picture of it, when we could have just sent a picture!

Image Optimization Checklist

1.     Use Vector images when you can.

2.     Minfigy and compress SVG (Vector images).

3.     Only use raster images when needed: For pictures and photos that are complex

4.     Experiment with the quality of the image in an editor: You want to trim the fat but keep the quality of the picture intact.

5.     Compress and remove excess data.

6.     Server Scaled Images! Don’t ship the elephant when you can send the picture instead.