Some of our most common client questions and our most frequent recommendations are about how to properly size images.
No matter what content management system or ecommerce platform you use — from WordPress and WooCommerce to Shopify or BigCommerce — how you size images impacts your site’s speed and performance.
To help answer these common concerns, we’ve put together this guide on how to serve images in NextGen format.
- what a NextGen format is
- our recommended format
- how you can use it across WordPress, BigCommerce, and Shopify.
What are NextGen Formats?
You’re likely familiar with the most common image formats on the web — GIF, JPEG, and PNG.
NextGen image formats offer superior compression and quality. In other words, the images are crisper while having a smaller file size.
NextGen formats include:
- JPEG 2000
Which NextGen Format Should I Use?
We recommend WebP as the best NextGen image format. Google developed WebP as an open-source image format, with the goal of WebP becoming the accepted standard.
Why we like WebP:
- Easy Conversion. You can convert PNGs, GIFs, and JPEGs into one convenient format without sacrificing image quality.
- Excellent Compression. A typical WebP file will be 30-50% smaller than the same image as a PNG or JPEG.
- Transparency and Animation Support. WebP combines our favorite features of GIFs and PNGs by offering support for animation and transparency.
- Most Browser Support. The biggest drawback to WebP was that Safari didn’t support it. But, with the release of iOS 14 and macOS Big Sur, Safari 14 now includes support for WebP. All major mobile and desktop browsers support WebP, making it the obvious choice for serving images in NextGen format.
Why Should You Use WebP for Images?
The most significant advantage of using a NextGen format like WebP is its superior compression. This compression means that the file sizes are smaller and load faster. Faster loading images improve your overall site speed and performance. This speed also improves search engine optimization. Search engines like Google analyze your site loading speed as a factor when deciding where to rank sites. Faster loading sites are more likely to end up on the first page of results.
Faster loading speeds also improve your customer experience and conversion rates, especially on mobile. If you’re running an ecommerce site, how quickly the product images load could make or break your business. Shoppers won’t wait forever for images to load fully.
WebP is a good solution for sizing images because it reduces file sizes without compromising quality. WebP employs lossy and lossless compression. With lossless compression, as the file size decreases, the original picture quality remains. In other words, the data is still there for you to decompress back to its original quality. Lossless compression is like using one of those vacuum storage bags. All the stuff is still in the bag; you’ve just compressed it into a small package by sucking out the air.
With lossy compression, you can reduce your file size even more. Lossy compression keeps only the data you need to display the file at its reduced size. When using lossy compression, you can’t scale an image back to its original size.
Lossless compression is suitable for images that you need to display at multiple sizes, such as a background image that needs to scale from a small mobile screen to a giant desktop.
Lossy compression is best for images where you know their fixed dimensions. For example, if you know your store template only displays product images at a max width of 600 pixels, you could use WebP lossy compression to optimize for that size.
How to Serve Images in NextGen Formats in WordPress
With WordPress 5.8, the popular content management system now includes native support for WebP files. So if you’re using WordPress or WooCommerce, how can you serve images in WebP?
Options for Serving Images in WebP:
- Convert and Upload the Images. An online converter like Cloudconvert makes conversion simple. Just upload the file, select your options, and the converter gives you a WebP file to upload to WordPress.
- Use an Image Optimizer. If you’re already using an image optimization plugin, odds are it supports WebP. Check the plugin’s settings to be sure.
- Use a WebP-Specific Plugin. You can also install a dedicated WebP plugin, like WebP Converter for Media, that converts all your images to WebP.
How to Properly Size Images in Shopify or BigCommerce
If you’re using another ecommerce platform, like Shopify or BigCommerce, you’re most likely already using WebP images and didn’t realize it.
BigCommerce utilizes Akamai Image Manager, which automatically compresses images and serves them in the best NextGen format for each browser.
Similarly, Shopify started automatically serving images in WebP formats in July 2019
Get Help with Serving Images in NextGen Formats
BigCommerce and Shopify make taking advantage of WebP’s superior quality and compression pretty simple. But serving NextGen images on a WordPress site requires a few more customizations. If you’re looking for help optimizing your site speed and performance, the Mindsize team can help.
We’ll start with a custom site performance audit to identify any issues slowing down your site. We’ll provide you with a list of recommended solutions to solve each problem. We complete site audits in two weeks. Book your intro call today to discuss starting your site audit.