Image optimisation is about making images that are suitable for the web. That means reaching a balance between file size and quality, to ensure an image looks good and downloads fast.
There are a few mistakes that beginners often make.
Mistake 1: Unnecessarily big images
A classic mistake is to use a big, high resolution image without shrinking it properly. A big image has lots of pixels and each one adds to its file size, making it download slower.
The incorrect way to shrink an image is to write HTML code like this:
1 | <img src="my-really-big-image.jpg" width="200" height="150" /> |
The code above tells the web browser to display “my-really-big-image.jpg” at a size of 200 x 150 pixels. If the image is 3000 x 2000 pixels then all that’s doing is displaying it at a smaller size. The image itself is still 3000 x 2000 pixels and that means it’s still going to download slowly.
Below is a simulation of what happens when a big image is displayed at a small size on a web page:
The image downloads slowly because there’s lots of pixels. It takes so long that you can see it loading. It also looks awful because there are jagged edges. Web browsers are bad at resizing images.
The correct way to shrink a big image is to use a graphics program to resize it. You end up with something like this:
Notice how the quality is much better. The street light on the right is far less jagged and you can make out more detail. It also loads way faster. The original photo had a file size of 1.7mb but the small version is just 9kb. Or to it put another way, it’s 188 times smaller.
Real examples of images that are too big
Using bigger images than needed is a common mistake. It’s easy to find examples with the help of Google:
Google image search: “the team”
The above google search looks for large images on pages containing the phrase “the team”. This tends to find pages where organisations are introducing their staff members and haven’t resized the team photo properly.
Mistake 2: Wrong image format
Image data can be stored in different formats. There are lots of formats and each has its own strengths and weaknesses, so choosing the right one is important.
Most people are probably familiar with the JPG format because it’s great for photos. That doesn’t mean it’s good for everything though. JPG is bad for images that have lots of solid colour and crisp lines. It’s much better to use the PNG format for those kind of images. Take a look at this zoomed in comparison:
The PNG on the left is perfect. The JPG on the right has compression artifacts.
JPG is a lossy image format. That means it compresses the image data by discarding parts the human eye won’t notice. It works well for photos but the clean, crisp lines of an illustration can suffer from noticeable compression artifacts.
PNG on the other hand is lossless, so it can preserve images perfectly. It works best for images with clean, crisp lines such as vector art work, logos, certain comics and so on.
This comic showing PNG vs JPEG makes the point well (with a tiny bit of exaggeration).
Mistake 3: Squashing people (aspect ratio abuse)
I recently came across a website where the client had created a banner graphic from a photo but completely ignored the aspect ratio, so it looked like this:
It looks squashed because the aspect ratio is wrong
The image above is 400 pixels wide and 50 pixels tall but you can see that it’s been squashed vertically, making the people look short and fat. That’s what happens when you get the aspect ratio wrong.
The aspect ratio is found by dividing the image’s width by its height, so in this case we do 400 / 50 = 8. That gives an aspect ratio of 8:1, meaning that for every 8 pixels of width there’s 1 pixel of height. To create an image that isn’t squashed, the original photo will have to be cropped to the correct aspect ratio.
Photoshop has a Rectangular Marquee tool that can be set to a fixed aspect ratio:
Once you’ve set the desired ratio you can draw a selection and it’ll always be the right aspect ratio. It’s then just a case of cropping to your selection and saving.
The people aren't squashed now the aspect ratio's correct
That looks better. Notice how you don’t see as much of their bodies as before – that’s because those parts had to be cropped out. The first image looked squashed because it was cramming an image that was too tall into the same space.
The end
If you’re not making any of the basic mistakes that have been discussed here then you’re probably doing okay.