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.
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.
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.
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:
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).
* 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.
Get The Wix Blog
Get the latest and freshest content on creating
& marketing your Wix website.