Large image sizes can slow down a store's site speed, which can negatively affect customer experience and conversion rates. It can also be damaging to your ranking on search engine results. Website photos should be optimized to achieve the best balance of sharpness and low file size to ensure quick load times.
Below are tools to measure site speed and recommendations on optimizing images on your store.
Speed Testing Tools
Site speed or page speed is an important ranking factor for search engine results.
Tools like Google’s PageSpeed Tools and Pingdom’s Website Speed Test determine which images, if any, have a higher than necessary file size, resulting in a slow page load time. To learn more on how to improve your site speed, see our Guide to Site Speed.
Optimizing Image Properties
Physical Image Size
Make sure the physical size (height and width) of your images is appropriate. Generally, the optimal size for your product photos is 1280 x 1280 pixels. Your theme's documentation may suggest a different recommended size. If you take a 5-megapixel picture with a 3:2 aspect ratio, that means it will come out to roughly 2740 pixels on the longest side, which is much higher than the optimal resolution for web content.
Pro Tip! When downloading photos from your camera, you should name your image files in a way that is easy for search engines to find. For example, an image directly from your camera might have a file name of DSC00101.JPG. Change it to something like red-longsleeve-kashmir-sweater.jpg.
You can use graphics software on your computer, or free web services like Pixlr to trim down raw camera images or product photos. For GIFs, we recommend minimizing the number of frames to reduce file size and improve download speed. Fewer than 100 frames works well. Keep the total number of frames under 150 to avoid animation from potentially being clipped.
Image File Size
File size is just as important as dimensions. File size refers to how much data a file contains or how much storage it will consume. Sites like TinyPNG can compress your images to lower your page load overhead. Some graphics software programs like Adobe Photoshop also feature a “Save for Web” command, which does the same thing.
| Uncompressed JPG File size: 182 kb (kilobytes) | Compressed JPG File size: 34 kb |
Note there is no discernable quality difference between the two images above, but the compressed version on the right will load 5x faster.
Format
An image's format refers to how the information is encoded for a computer to interpret. Images can be encoded in a variety of different formats. For most situations on your BigCommerce store, using a JPEG or JPG format for your product photos offers the best balance between looking good and loading fast. PNG files are typically used for web graphics, like icons or patterns.
Content Delivery Network
A content delivery network (CDN) allows you to serve your store’s web files faster around the world by caching common data in global network nodes. For example, if someone in Japan visits your site, that data is served from a local server in Asia, which is faster than if it had to travel from North America. If you have a custom designed theme, you can use the BigCommerce Content Delivery Network to serve the images in your theme faster.
The BigCommerce CDN will compress images using the lossless setting. This occurs automatically and provides compression while not impairing image quality. This setting cannot be configured separately per store.
The CDN may also convert image file formats. Done rarely with the lossless setting, this will only occur if the conversion does not adversely affect image quality or increase file size.
Responsive Images
BigCommerce stores with Stencil themes based on Cornerstone 4.0 or newer use the srcset attribute to handle responsive images. This will automatically optimize each online image for the best combination of size and quality suited for each image and device.
This means when an image is uploaded, it has a defined set of image sizes from which the viewer's browser will automatically select for ideal size and resolution on the device being used. Even if you upload a very large image from a digital camera, it will be reformatted to be more manageable for online viewing.
To learn more about responsive images through srcset, see our developer documentation.
Additional Optimization
While not directly related to site speed, your product photos should have descriptive alt tags (called image descriptions in BigCommerce), which is alternative text displayed in a browser when the image cannot be viewed. This can be helpful for several reasons:
- The user is vision disabled and is using software to browse and translate the web.
- The user has a less than reliable internet connection.
- The user has turned off images in their browser for a speedier experience.
Search engines use alt tags to learn more about the nature of the site, and use it as a ranking factor on results pages. They can even help your images themselves rank higher when searchers conduct an image query.
In BigCommerce, you can add image descriptions as you manually add product images through the control panel, or import them.
