Preparing and Optimizing Images
When adding an image to your site, keep in mind that Wix instantaneously optimizes your image so that you don't have to!
While optimizing your images (as your site loads), our built in image optimization system takes both site loading time and image quality into consideration.
This means that as long as your images are under 15MB in size, there is no need to compress or resize the image files prior to uploading them to your Wix site.
Read the guide below for information on 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.
Click here for a list of several online image editing programs you can use as an alternative to Photoshop.
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.
When deciding which format to use when uploading images to your Wix site, there are a few things to take into consideration, including:
- Site loading time
- Image quality
In general, as JPEG files are compressed, they are preferable and will help improve your site's loading time. JPEG files have sufficient image quality for most sites on the web.
If you have special image requirements, for example, you wish to upload high quality images or images with a transparent background, PNG is the best format. This file format should be used sparingly, as a large number of high quality images could increase your site's loading time.
GIF files are recommended for images with flat blocks of color such as logos or simple illustrations.
You can convert between file formats using RIOT.
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.
JPG or JPEG
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.
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 high quality images to your site. Some browsers also display JPEGs differently. If you are using JPEG format, please save it using 85-90 quality.