Browse by Topic

Optimizing Your Images

Large image sizes can slow down a store's site speed which can be damaging to your ranking on search engine results and conversion rates.  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 suggestions to optimize 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.

Modern web browsers also include developer tools that can help you gauge your site speed, among many other things. Check out Chrome DevTools and Firefox Developer Tools to learn more.

 
 

Optimizing Image Properties

Physical Image Size

Make sure the physical size (height and width) of your images is appropriate. Generally, your product photos should be under 1,000 pixels on the longest side. If you take a 5-megapixel photo with your camera, that means it’s 5,000 pixels on the longest side - which is much higher resolution than is optimal for web content.

Resized Image

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 the raw camera images or product photos.

Image File Size

Your images’ file size is just as important. File size refers to how much data a file contains or how much storage it will consume. Sites like TinyPNG and JPEG-Optimizer 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.

User-added imageUser-added image
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.

 
 

Akamai Image Manager

BigCommerce stores with Stencil themes come with Akamai Image Manager. This will automatically optimize each online image for the best combination of size, quality, and file format suited for each image and device and offloads the artistic transformation of derivative assets to the cloud. This means when an image is uploaded, it is optimized for the best page load performance without sacrificing how it looks. Even if you upload a very large image from a digital camera, it will be reformatted to be more manageable for online viewing. It will also retroactively optimize images you have uploaded in the past that have not previously been optimized. Akamai Image Manager may save images as .webp instead of jpeg. 
To have images bypass Akamai Image Manager, see our instructions in 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 displayed. This can be helpful for several reasons:
  • User is blind and is using software to browse and translate the web
  • User has a less than reliable internet connection
  • 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.

Was this article helpful?