Intro

Today our web browsing experience is largely populated by images and photos. While this is beneficial and visually stimulating, having large amounts of unoptimized images can steer viewers away from a website. Images being too large, image files taking too long to load, or images not loading properly are all issues that can negatively effect your website user's experience. Here is a tutorial that will help you create the most efficient images for your website:

For this tutorial we will be using GIMP to prepare and optimize our images. The guidelines aren’t restricted to but will be shaped around GIMP. There are a number of other software titles that can achieve similar results. The general idea and procedures are the same across each software title. Continue to the bottom for a list of software suggestions.

Images are too large

One of the biggest issues with images on websites is that many website administrators do not resize their images before uploading. Images that are too large can take up too much real estate, add unnecessary download time, and make your website difficult to view.

Follow these instructions to resize your images:

1. With your image open, go to Image > Scale Image from the main menu.

GIMP Scale Image


2. In the dialogue box that appears resize your image accordingly by changing the Image Size width and height.

QUICK TIP:

You might be asking “what size should I save this as?"
To be honest, there’s no simple answer.

What size you use all depends on each individual image and how that image should appear on your website. Ideally images are resized to conform with the overall design of your website. If you do not know the exact size needed consider resizing to an approximate size. Next you want to resize accordingly until satisfied.Here are some useful sizes as reference.

If you are still lost consider contacting the web professionals at Design Brooklyn for help.

GIMP Scale Image Size


3. In the same dialogue box you want to make sure the X & Y resolution is set to 72 pixels per inch (higher resolutions will contain more pixel data than can be displayed on most screens).

GIMP Scale Image Resolution


4. When scaling an image, pixels are either added (enlarged) or removed (reduction), the drop-down of Interpolation are the methods used by GIMP for processing this which also determines the quality of a scaled image.
Note: The default method, Cubic, is recommended if you don't know which method to choose.

None: "No interpolation is used. Pixels are simply enlarged or removed, as they are when zooming. This method is low quality, but very fast."

Linear: "This method is relatively fast, but still provides fairly good results."

Cubic: "The method that produces the best results, but also the slowest method."

Sinc (Lanczos 3): "New with GIMP-2.4, this method gives less blur in important resizings."

Read more: http://docs.gimp.org/en/gimp-image-scale.html

GIMP Scale Image Quality


4. Click Scale after you've set all your preferences.

Your image is now successfully resized for website use.

BUT — before you upload, be sure to save your image for the web.

Save for the Web

Now that your image is at the proper size and resolution, you’ll want to optimize the image and rename the file to conform with web standards. Image optimization helps to reduce your image’s file size which can dramatically decrease image load time and keep your website visitors happy.

1. After properly resizing your image, go to File > Export.

GIMP Export


2. A dialogue box will appear, you'll first want to pick a location to save the image, then enter an appropriate filename to save the image as.

GIMP Export Dialogue Box


3. In the same dialogue box you also want to specify the file type (extension) so that you save the image in the most suitable format.

GIMP File Type

Choosing the right file format will greatly affect how your images look on your website. For some images choosing the wrong file format will render it to not load properly. For example if you used .jpg for an animated image or if your image has more colors than the file format can handle.

Here are details for a few formats we recommend using:

Loading GIF .gif
GIF is great for simple graphics like logos, shapes, patterns and solid colors. It allows for transparency but only supports 8-bit or up to 256 colors so it isn’t recommended for realistic photos or images that have a high range of colors. GIF also supports animated images but be aware that long animations will result in larger file sizes.
JPG Ruby .jpg
JPG or JPEG are ideal for photorealistic images, it supports 24-bit or up to 16.7 million colors but doesn’t support transparency.
Dog Paw PNG .png
PNG is very similar to GIF in it’s functions except for animation. While PNG-8 offers the same amount of color support as GIF (8-bit/256 colors), PNG-24 offers up to 24-bit or 16.7 million colors. PNG-24 also offers alpha transparency unlike other formats which allows for variable opacity to achieve more realistic effects such as transparency around shapes and curves as well as shadow and glow effects.
WBMP Logo .wbmp
WBMP or wireless bitmap format is used for mobile phones, it only supports 1-bit or 2 colors (grayscale). This format is generally not recommended.


4. After selecting a suitable format for your image go ahead and click Export.




5. Depending on the format you've chosen, the dialogue box that appears next will be different. There are different settings that you should keep in mind before exporting for each format.
Note: In general the default settings are a good starting point if you don't know which settings to change.

Settings to keep in mind


If choosing GIF:

Interlace: Allows the image to progressively display when loading. (Used for slower internet connections)

As animation: Saves any animations that were created.

GIMP Gif Format


If choosing JPG:

Quality: Allows you to sacrifice image quality for better compression (file size).

GIMP Jpeg File Format


If choosing PNG:

Save background color: If the image you've created has multiple levels of transparencies some browser that only recognizes two levels will use the background color of your GIMP toolbox if this setting is selected.

Gamma: Gamma correction is a feature that is used to correct differences in how different computers interpret colors values. By selecting Gamma, gamma information is stored in the PNG and used to ensure images are not too dark or too bright on different computers.

Compression Level: The higher the number the smaller the filesize.

GIMP PNG File Format


4. Click Export after setting all the appropriate settings.

Now your image is properly optimized to upload to your website. As an added bonus, your resized images should upload much more quickly!

Software suggestions:

Adobe Photoshop or Photoshop Elements (cross platform)
GIMP (cross platform)
Corel PaintShop Pro (Windows)
Paint.NET (Windows)
Seashore (Mac)

Back to Blog