Preparing and Optimizing Images
When adding an image to your site, Wix instantaneously optimizes your image so that you don't have to! When optimizing images, our built in image optimization system takes both, site loading time and image quality into consideration.
Review below our guide to selecting the right image format for your needs as well as guidelines for preparing your images in Photoshop. Keep in mind that you may use these guidelines in any image editing software to achieve similar results.
Selecting the right image format
With the different types of file formats used for images on the web it can be confusing trying to figure out which file type you should use.
This guide outlines the differences between the file types and also uses a couple of examples to show you how the file size varies depending on which file type you use.
Graphics Interchange Format (GIF) is one of the file formats used to display indexed-color graphics and images in HTML documents on the web.
Indexed color means that it will only display a maximum of 256 colors.
For this reason, GIF is NOT a good format for saving photographic type images with many colors. GIF is good for saving images with flat blocks of color such as logos or simple illustrations.
Another very important feature of GIF images is that is allows you to preserve transparency. It uses an LZW-compressed format designed to minimize file size.
Joint Photographic Experts Group (JPEG) format is used to display photographs and other continuous-tone images on the web.
JPEG format supports CMYK, RGB (millions of colors), and Grayscale color modes. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied.
In most image editing programs you can specify how much compression/loss of quality you want.
JPG does not preserve transparency.
Portable Network Graphics (PNG) is a little bit like the best of both worlds. It was developed based on GIF, for lossless compression and for display of images on the web. Unlike GIF, PNG supports 24 bit images and produces background transparency without jagged edges.
PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images. PNG also preserves transparency in grayscale and RGB images.
For more general information about adding images to your Wix site, click here.
Preparing Your Image
Step 1: Setting Your Image Settings to RGB Color
RGB is the standard color model used for digital images and web colors.
To set your image settings to RGB Color:
1. Open your image in Photoshop.
2. From the Image menu, go to Mode, and then click RGB Color.
Step 2: Saving Your Image for the Web
To save your image in the best format for the web:
1. Open your image in Photoshop.
2. From the File menu, click Save for Web & Devices.
3. On the right, open the second drop-down menu to choose an image format. Choose PNG 8, PNG 24, or JPEG. For details on the advantages and disadvantages of each, click here.
4. Click Save and save your image to your computer.
Saving as PNG 8: This option suits images with a smaller range of colors – it is best to choose PNG 8 first and compare it to the PNG 24 option. If the images are similar then saving as PNG 8 will help reducing the loading time of your site.
Saving as PNG 24: This option suits images with a wide range of colors – it is best to save as PNG 24 if there are a lot of colors in the Color Table and you wish to keep image quality. Note that this might affect the loading time of your site.
Saving as JPEG: The JPEG file size will typically be smaller than PNG 24 for high quality images. However, PNG is a format that was created for the web and is a more stable, color accurate format to use when uploading images to your site. Some browsers also display JPEGs differently. If you would still like to use JPEG, then please save it using 85-90 quality.