When product swatch images are uploaded, they are automatically resized (reduced to 120X120 and varies by skin implementation) and converted to an embedded image format.
Image File Size
Keep the swatch image file size under 200KB whenever possible to optimize product page loading speed. You may use online free image optimizers/compressors (TinyPNG, Optimizilla, Imagify, or Smush). Uploading images as large as 1MB may result in:
- Upload progress stuck
- Swatch image not loaded
- Slow page loading speed
- Difficulty replacing the current swatch image with another
Image Dimensions
Keep swatch images square and in the same sizes whenever possible to create a uniform-sized set of swatches.
Image Formats
It is recommended to use the following standard formats for swatch images. You may change the image format by using online image converters (TinyPNG, CloudConvert, Convertio, or FreeConvert).
- .jpg - For the smallest size. Although considered the same file format, uploading files with the .jpeg extension may result in a broken or invalid image.
- .png - For the highest quality and transparent background
Swatch Image Rendering
Some browser extensions like adblockers may prevent embedded-type images like swatches from rendering properly on a web page. Turn off these extensions or try loading the product page on another browser to see if the same issue occurs.
