Secrets of Image Optimization for Web

One of the essential features we ought to consider when uploading content on our website, is the quality of the images we’re going to use. Not optimizing images in a proper way ends up in an extremely slow load time for the website, whereas simply reducing the size of our images may not turn out to be the best answer for solving this issue.

Through this guide we’re going to learn the essential tips and tricks we must follow in order to ensure the quality of the images published at our website.


Different formats – Different purposes

There is no secret in that the internet provides a broad nest for any kind of media files. From videos to photographs, banners, icons, etc. you may find yourself wondering how a website can support such amounts of data while loading in a 2-3 second basis.

Although it proves to be completely useless to compare the quality, or even format, of a photograph with an icon, some key points for image optimization are shared between those two.

Secrets of Image Optimization for Web

You can’t just use a high quality photograph as it comes out from your camera or post-production software. First you need to reduce its resolution and size, either by using software like Adobe Photoshop or other image resizers that you may come across through the internet, or by adding to your workflow, an internet image resizer for such task.

Buttons, banners, icons and images all have different formats, but you should respect the image ratio for each one. This only translates into having two sets of images – one for full size and another one for preview – at most cases. That way you won’t compromise the end quality of the image you want your audience to look at, but also feature a sample preview of what the images look like without opening any link in the process.


Most common image formats for web

  • I would like to emphasize the expression “for web” in this point. Not every format we commonly use for graphic design or photography is supported by websites – so first let’s explain them in detail

  • JPEG: Jpeg is a classic – Used both in photography and graphic design, it has come to be the native format for most images around the web. The main downside of JPEG images is that they are known to be a quality-loss format, which means that in order to keep the file size a smaller one, you will lose image quality in the process. Small image sizes work well for websites, although your image won’t look as you expected in most cases.

  • GIF: Gif images are commonly used in animations – as they can keep more than one frame, and this format is also known as ‘bitmap’. Bitmap images are made of grids that contain tiny pixel squares, so the entire data can be saved as it is capable of storing up to 256 colors and even transparency.

  • PNG: Png format is widely known in the graphic design industry, given its capacity of keeping the image quality intact while supporting transparency.


But, despite having several options to work with, not every site will support .png images – it is just a minority of them.


How to save images for the web

Let’s imagine, I want to use this image shown below on my website

Secrets of Image Optimization for Web

Since I want to have a quality product without too large of a size, I’ll open this image in Photoshop and save it for the web. Go to File menu – Export – Save For Web

In the new dialogue window displayed, you are going to find several options for exporting the image as you feel comfortable with.


Secrets of Image Optimization for Web

First, choose the image format (either JPEG/GIF or PNG) – In my case, I’m going to work with a JPEG as I want to use this image as a photo.

You can work with Progressive or Optimized mode; the difference between these two modes, is how the image is going to load up:

  • Progressive images first show up as blurry, but then become clear as the page loads completely.
  • Optimized images load line by line.

Go with High Quality if you want to display your image as a photo, Medium if it is meant for a header, and Low if you want to use it as a background image.

Here are some standard references for image sizes depending on their usage:

  • Background images: 2 or 3KB
  • Header: 40 to 150 KB
  • Photo: 70 KB minimum – 350 KB top, depending on the image dimensions

Notice that if your image contains a text layer, Photoshop can only save it as a GIF file if you want to preserve its quality.


File naming

SEO can make things a bit more complicated when naming files than what it used to be a couple of years ago, if your aim is for your website to rank high on search engines. Avoid using your camera’s default file name or even common names such as ‘photo-1’ or ‘image1’ as your images will go unnoticed by most search engines.

Secrets of Image Optimization for Web

A good habit is to use keywords when naming images, that way when users search for specific items through the internet, your images will show up if they match that keyword criteria.


Some final thoughts on image optimization

Despite using Photoshop for this guide, you can always process your images for the web by using online image editors such as Pixlr, or open source solutions as GIMP (if you happen to work with Linux you don’t have too many other options either).

Never use GIF for large image size projects – GIF doesn’t handle compression as well as both JPEG and PNG do. It is an old format that is mostly meant for thumbnails or short animations.

Add watermarks when possible to your images as a way to protect your work – not only are you avoiding image theft, but also you’re boosting your personal brand in the same process.

Think of Alt Tags for your images as ways of boosting your SEO performance – they will be your best shot for associating keywords with the images. Stick to these tips, and get your images out there for the world to see!