was successfully added to your cart.

Preparing Images for the Web

By June 18, 2014BOOKLAB
how to resize images for the web

This guide is designed to help authors and web editors understand how to resize and save images before uploading them to the web

When it comes to creating an engaging website, images and photos are extremely important. Estimates are that we only read about 20% of the world’s online text which leaves 80% of visual and multimedia that we navigate daily.

To catch the attention of your website visitors (and potential book buyers) use good quality images and prepare them properly for the web. You will need to make sure your image is the right file type (eg. Gif, jpeg, png) and the right size (eg. 100kb, 200kb etc).

Important note: You must have permission to use images. If you have not taken them yourself, make sure the copyright holder (usually the photographer) has given you written permission by email or otherwise.

Free image editing software

Once you have selected your image, you may need to convert it using image-editing software in order to make sure it is the right size and file format for the web. Most computers come with built-in editing software nowadays (if you use a Mac, iPhoto is a simple and easy option).

Resizing image for the web

iPhoto for Mac interface

Other free image-editing software packages include:

  • Photoscape
  • GIMP for Windows
  • Paint.NET
  • Serif PhotoPlus
  • Pixia

Choosing the right image file type

There are three types of image files that are most commonly used on the web: JPEG, GIF or PNG.

JPEG (pronounced Jay-Peg) or JPG compresses the information in an image file, making it smaller and easier to download. Most of the photographs you see on the web are in JPEG format.

GIF stands for Graphic Interchange Format. It has been the most commonly used graphic file type on the Web. It limits the number of colors in an image so the file can download faster. It’s particularly good for text, art, cartoons, and line drawings.

PNG is a newer, open-source alternative to GIF. PNG offers better quality for photographs and is also good for saving images that will have a transparent background.

As a general rule, use JPEG for photos and GIF for text, art, cartoons and logos.

File sizes and dimensions

Image size might refer to two things: the dimensions (height/width) of the image on the screen and the size of the file (usually expressed in kilobytes/kb or megabytes/mb).

Dimensions

This is the width and height of an image and is generally measured in pixels. Web images should be no wider than 500 pixels and no higher than 300 pixels. Your site will look far better if you use a consistent image height and width, so experiment with image sizes and decide what size you like. You can use the DPI equation below to help work out the size you want.

DPI Equation:
(Width of image in inches x DPI) x (Height of image in inches x DPI) = Image size on screen.
Example: (2 inches x 72 dpi) x (1.5 inches x 72 dpi) = 144 x 108 pixels

A few words on image resolution

Images are made up of dots called pixels that combine to create the shapes and colors of an image, not unlike mosaic tiles. Resolution means the number of these dots, or pixels, appearing one next to another in the space of one inch. The lower the resolution, the grainier an image will appear. However, higher resolution means a larger file size (and slower loading time for your page), so you will need to make a balanced decision about the resolution you choose. Images for the web are normally set at 72 DPI (dots per inch), or 72 pixels per inch, as this is all that is needed for clear screen display. This is why the above DPI equation uses 72 as a multiplier. You can change the image resolution size in your image-editing programme (usually in Image > Size or Image > Information).

The size of the file

This means the amount of memory the image takes up on your computer in kilobytes (kb). Your aim is to prepare your image so that it retains as much clarity as possible but ‘weighs’ as few kilobytes as possible. The heavier your images, the longer your webpage will take to load, and no one likes to wait around.

Note: If you only want to use part of the image, you can crop it before resizing it. You can do this with your image editing software.

Helpful Resources

Beginner’s Guide to Web Image Formats Infographic

Simple guide to editing and cropping images with iPhoto (Mac)

Editing an image using GIMP (Free image editing software)

Curved House Editor

Author Curved House Editor

More posts by Curved House Editor