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 recommendations on optimizing images on your store.
Speed Testing Tools
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, your product photos should be under 1,000 pixels on the longest side. If you take a 5-megapixel picture with your camera, that means it's 5,000 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.
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.
File size: 182 kb (kilobytes)
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.
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 developer documentation.
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:
- 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.