Optimizing Images for the Web

We’ve all run into them; websites which take far too long to download. I noticed how many people don’t take the time to optimize their images for their Wix site, which can result in slow loading times. Highly visual sites like photography websites, online portfolios, etc. are even more prone to danger. So before you get all itchy, make sure your images are properly optimized for the web. True, a small sacrifice in quality will have to be made, but if done correctly the average eye won’t notice it and you’ll have a clean gain of a far more accessible website.

Original Image: 223kb

This image would take about 25 seconds (!!!) to load on a 56kbps connection.

Facts about Image Formats
There are many image formats available, but only a few work on the web. In order to compress you images, you first need to know that there are two kinds of image compression: lossy and lossless.
Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. A significant perk is that these images use a small amount of memory are sufficiently similar to the original image.

Formats
JPEG
This image type is lossy, and you can control the compression level in image editors. It is good for saving images with millions of colors, like photographs, drawings with many shades, images containing gradients etc.
GIF
This format is a bitmap, which basically means it’s a grid made of tiny pixel squares. Data about every pixel is saved (so it’s lossless), and you can save up to 256 colors. Pixels may also be transparent. GIF may contain more than one frame, so it can be animated. It is a good format for saving images with less colors, like charts, small graphics (bullets, website buttons), images containing text and other important details, flat-color drawings and animated images.
PNG
Has greater color-depth than GIF, it can store transparency, and can give greater compression. It’s best to save images in this format when you’d like to keep their alpha channel- transparency.

A PNG Format, (gray squares are transparent)

Saving For The Web
Before choosing the format keep this chart in mind:
GIF

• If animation is required.
• Line drawings and simple graphics.

JPEG

• Photos, especially without high contrast.
• Screenshots, especially of movies, games, or similar content.

PNG

• Line art, illustrations.
• Photos with high contrast.
• Transparency, alpha channel transparency.
• Application screenshots or other detailed diagrams.

How to Compress Images
Saving images for web Option for exporting images for web is found under File > Save for web and device ( Ctrl+Shift+Alt+S).

1. Choose File > Save for web…
2. Choose JPEG, PNG or GIF.
3. First choose quality level, High if the image will be visible, Medium or Low if you want to use it as background*.
4. To have more control over the quality, use the slider or enter number in the field Quality.
5. Look at the file size and the estimated loading time displayed on the lower-left corner while adjusting settings. At the same time, look at the image to decide what quality looks good enough.
6. Once you found the perfect balance between quality and compression, click the Save button.

* If it’s a background, make sure file size is under 5KB. If the image is a layout header, up to 40KB. If it’s an image to be displayed on the page, 20-30KB.

Compressed Image. 25KB. 12% of original image size!

This image would load in about 5 seconds on a 56kbps connection.