Tips & Links

preparing images for the web

Visual content is part of most websites and contributes greatly to a more engaging and dynamic website. Before adding photographs or illustrations to your website however – make sure to optimise your files for the web. Apart from video and audio, image files contribute a lot of weight to your page, slowing down the loading process. Slow loading times are detrimental to both user experience and search ranking.

It is the nature of the medium that will cause images to be heavy content elements. But there are a few things you can do to bring down their file size and improve performance. We cover tools and general info for those of you new to working with images. This tutorial focuses on image resizing, cropping and web-safe formats. For more advanced editing – check out our ‘optimising your images further’ post.

image editors

There are many image editors out there – most will likely offer some functions to optimise for the web. If you already use an image editing application, check for options like ‘save for web’ / ‘save for devices’.

If you’re new to image editing entirely – you can also use one of the many web applications¹. These vary in available functions, some are basic while others offer tools and settings for extensive image editing; and some will require the Flash Player. Some offer free options, others work via subscription. Have a little play and find one you like ;)

For the following – we’re using Pixlr.

file size, dimensions & aspect ratio

Most of the time, especially when using photographs, you will find that the file itself is quite large and heavy due to its high quality. For example, a typical photograph, taken at medium to high resolution, could be about 3456px × 5184 px in size (and much larger) and weigh anything between 10MB to well over 100MB. This size is ideal for photo editing and print.

Images on the web, however, form only part of a webpage and should be sized as large the maximum dimensions required only, and be optimised for a lighter weight. Preparing images for the web is a compromise between quality and size – a juggling game in which you will try to keep the maximum quality while compressing the file to achieve as low a file size as possible.

image view & actual size

Not all images are too large for the web. If the image comes from the web already – it might even be too small to be used as planned. Check on the image size itself to confirm that it will work for your purpose.

When you first open your image in the editor – the file will be shown at a certain zoom factor to allow you to view the full image. A large image will be shown zoomed out by quite a lot, a small image might be zoomed in and appear blurry. Usually you will find the details of this within the application. In Pixlr, you will see the zoom factor and pixel dimensions of the image in the bottom left corner of the open file’s window.

To get a sense of the real size of the image as displayed on screen at full size – set the zoom factor to 100%. If only a part of the image is visible, the dimensions are too large. If the image is presented at a very small size – it is likely to already sized and optimised for the web; and could possibly be used as is.

resizing the image

To resize your image at its original aspect ratio – you can use the ‘image size’ dialog box. This will allow you to set a new size and scale down your image. If the existing aspect ratio fits your content and plans for presentation, this option will be sufficient.

To get an idea what size you will need – consider your layout on the final webpage. If you are showing the image a small preview of the original on the page – and plan to offer the large view via the popular lightbox overlay, for example – the largest view in the overlay will determine the new size of your image.

Consider your target audience and their typical setup to decide on the large view of your images. Screensizes² vary and keep the maximum size required in mind. Remember that you are aiming for a low file size and only set the image as large as you will need it, not any larger for the sake of ‘just in case’. Focus needs to be the optimisation for the web, light file size for fast loading pages.

aspect ratio / image crops

To edit your image to specific sizes, such as the typical aspect ratios 16:9 / 4:3 or other custom sizes, you can use the crop tool. Crop tools often offer the most popular sizes as presets, or allow you to enter your own details, – making this a breeze.

design considerations

When you edit an image’s size and aspect ratio – the impact and expression of the image will be altered to some extent. If you are free to work with any dimensions and are looking to crop your image – do consider not only the page layout but also the context. Your crop will allow you to increase the impact of your image, to enhance its meaning and expression and integrate it into the context of the webpage. This could be very even sizes photos for a gallery, for example, or large images as headline feature for a written article.

One popular principle used in photography is the rule of thirds³. This divides the image into nine equal sections and uses the lines and intersections as guide for the placement of the subject/s of the image.

The precise size needed for your purposes specifically will depend on the setup and design of your website. Check with your designer, and have a look at any documentation for your theme/template for details.

Quick checklist

• is the file large enough for its final purpose?
  check theme/template settings or ask designer
• does the final presentation on the website require a set size?
  check theme/template settings or ask designer
• what is the largest size needed?
  i.e. the largest the image will be presented on the webpage

file formats

There are a few options when saving your image for the web. Remember that the best format for your image is always the one that keeps the highest quality at the lowest file size.

• JPG
  use for photographs and graphics with shaded areas and soft transitions of colour/brightness
  NOTE: often the best format for quality and file size; bear in mind once downsized and saved as JPG, you will not be able to scale it back up again.
• PNG/PNG24
  includes full transparency
  NOTE: use only when needed; can result in high/heavy file size (best optimised again before use on site) 
• GIF/PNG8
  includes transparency but needs matte colour set
  NOTE: use only for transparency on solid colour backgrounds
  
• SVG
  for vector graphics, like logos and icons
  NOTE: this format is still new and will require additional settings on most CMSs

Always choose the ‘save for web’ option if your image editor offers it. This is also called ‘save for web and devices’ or ‘export for web’, usually found under the ‘File’ menu. Some editors will then show a preview to compare the original file with the optimised version. This will allow you to tweak the compression level (for JPG) and quality settings while viewing the final output for image quality and file size.

If you do not have a specific option to save for the web, save your file at varying settings and compare the final results for the best quality image at lowest file size. It will be worth using some of the optimisation tools available to optimise the file further.

Step-by-step recap:

Step 1  check properties of the original

View your image file in a finder window/window explorer and find out the original file format, size/weight and dimensions. Our sample photos here is a JPG which can be presented on the web, but its file weight is too heavy and the dimensions too large.

Step 2  crop/resize to final display size

To optimise the image, open it in your chosen editor. Edit the image’s size to fit your plans in any way you prefer: use the crop tool alone with specific dimensions / crop first – then resize further / use resize alone.

At this point, you might want to test the file size, saving a copy as sample. If fitting context and purpose – you can now edit the image further. You could use a number of techniques to edit the image for effect or to reduce the file size further, see our‘optimising your images further’ post for more.

Step 3  save for web

Once your file is ready, perfectly sized and edited – proceed to ‘save for the web’ / save in a web-safe format. This process will vary slightly between editors, some but not all offering previews. In any case, make sure to check the final file for quality.

This final step is a compromise between quality and file weight. Your aim is to keep the highest possible quality while optimising the file for the lowest possible file size.

And you’re done ;)

Finally, compare your newly saved images, checking on both quality (at 100% view) and file size.

Your image is now ready to be uploaded.

final thoughts

While this may seem like extra work (and of course—it is), you are doing this for good reasons. Your optimised images will ensure that your page loads smoothly – creating a pleasurable viewing experience as well as benefitting search engine ranking.

1. available online: Pixlr / Aviary / Photo Editor (befunky) / free online photo editor
2. see Screen Resolution Statistics, by Rapid Tables
3. read Composition: Rule of Thirds, on Cambridge in colour for a quick overview