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
JPEG
PNG
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.
what programs are used to optimize images ??
Hey there,
If you have a license for one of the larger photo editing software like Photoshop then you should use those. Otherwise you can find free online photo editors with a large variety of features that will be helpful as well. Best search for free online editor through a search engine and choose the one that you feel most comfortable with.
I’ve been shrinking the pixels and overall size of my images down to what I thought was a reasonable size, around 350-450kb. To be used on the pages and galleries within my site: http://www.therapidwrench.com. It does load slow… how do you compress them without losing image quality? Seems like I do lose quality by shrinking the image..
Hi Mike! Thanks for getting in touch, and congratulations on building a beautiful site (it looks great!) If you’re experiencing higher than normal loading time, the situation may be the result of a number of different factors. If you contact our friends at the Wix Help Center, they’ll be able to look into your site and get to the bottom of any issues. You can reach them by submitting a ticket here: http://bit.ly/1tNav88 or by emailing: support@wix.com . Thanks!