E-Learning: Image optimization

Why do we need to optimize images?

Optimizing your website’s images improves performance. Think about the needs of your site and how you might design your image files to be as small as possible while achieving optimal performance and maintaining the visual style you want.

What format to use

Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it's lossless, compression artefacts don't blur important details or alter colours. It's a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artefacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs.

Use the 8-bit colour palette for PNG graphics that don’t require full 24-bit colour. Using an 8-bit colour palette reduces file size without reducing image quality. This palette is not appropriate for photos.

Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.

In general, avoid transparency. Images with transparency include an alpha channel, which increases file size. If an image will always be composited on the same, solid background colour, it's more efficient to include the background in the image. However, transparency is necessary in complication images, menu icons, and other glyphs that serve as template images and are tinted programmatically.

Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let page readers audibly describe what's onscreen, making navigation easier for people with visual impairments.

In a nutshell

	Category	Palette	Use for
JPG	Lossy	Millions of colors	Still Images Photography
GIF	Lossless	Maximum 256 colors	Simple animations Graphics with flat colors Graphics without gradients
PNG-8	Lossless	Maximum 256 colors	Similar to GIF Better transparency but no animation Great for icons
PNG-24	Lossless	Unlimited colors	Similar to PNG-8 Handles still images and transparency
SVG	Vector/lossless	Unlimited colors	Graphics/logos for web Retina/high-dpi screens

How to prepare images for ILO.ORG

File types

Save images in .jpg, .gif, or .png format only.
.pdf, .psd, .tff, and .doc files aren't web-compatible.

Image dimensions

Image dimensions for the ILO website should be 767x431 pixels; except for the slender thin one that covers across the middle of the page which the height should not be more than 80 pixels.

File name

Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behaviour in galleries.

File size

We recommend using image files of less than 80 KB for best results, though the limit for an individual image upload is 300 MB. When it comes to image size, bigger isn't always better, as uploading larger images can affect site performance.

Color mode

Save images in RGB color mode. Print mode (CMYK) won't render in most browsers.

Color profile

Save images in the sRGB color profile. If images don't look right on mobile devices, it's probably because they don't have an sRGB color profile.

Third-party image editors

To edit images for your site, you'll need to use third-party software, if Adobe Photoshop is not available to you. A Google search will turn up a variety of programs. Here are a few applications you can use:

Software available at ILO

The following image editors are available at ILO for free in the ILO Applications folder.

• GIMP
• IrfanView

Software (desktop editors)

• Acorn (free & paid version) - Mac
• Adobe Illustrator (paid) - Mac and Windows
• Adobe Lightroom (paid) - Mac and Windows
• Adobe Photoshop (family of options from free to paid versions) - Mac and Windows
• Corel PaintShop Photo Pro (paid) - Windows
• PAINT.net (free) - Windows
• PhotoScape (free) - Windows
• Pixelmator (paid) – Mac

Web (online editors)

• Pixlr (free and supports some mobile editing options)
• PicMonkey (free and offers many options)
• Aviary (free and wide range of options)
• PhotoshopExpress (free but registration required)

Web (image optimizers)

• Tinypng (image optimizer)
• Webresizer (image resizer & optimizer)