Does your website need to embrace a New Year’s weight loss resolution?>
Our waistlines aren’t the only things that expand over time: as your e-commerce store matures and makes room for new product lines, new site features, and beautiful high-def photography, so does your site gain excess weight, so to speak.
Which, like us humans, is not a good thing.
Google recently made an announcement that mobile site speed will become a ranking factor for mobile searches beginning in July 2018. Nicknamed “The Speed Update,” Google is easing us into their new mandate by targeting the worst performers (i.e., the slowest pages returned from a search query). While this doesn’t sound particularly aggressive on Google’s part, consider it a generous heads-up: these casual-sounding announcements are almost always followed by a full-bore implementation within a year. Likely, Google will spend some time collecting and analyzing speed data, and then will establish minimum benchmarks and tweak their algorithms to reward/punish sites accordingly.
So, now’s the time to get your site in good speed order, and the easiest starting point is with your images.
Article at a glance:
Google is giving greater importance to the speed of a site; you should do everything you can to keep your site light and speedy. Resize original images to fit the space they will occupy. In general, a web image should weigh no more than 150KB. This is an upper limit; always aim for less. Product grid images should be compressed as tightly as possible, as they sit on image-heavy pages (10KB each with an upper limit of 30KB). Use the proper image format for the image type.
Why you should care about page speed
In Google’s eyes, user experience is everything, and if a user perceives that a page is taking too long to load, they will abandon the site and seek another source. This is behavior that Google can — and does — capture, and if your site is frequently at the receiving end of such page load abandonments, you could eventually find your site sinking in SEO rankings.
Why you should care about image sizes
While there are many factors that impact the speed of a website, nothing bogs down a page more critically — and unnecessarily — than heavy images. It’s imperative for the health of your site that all of your images — product images, homepage hero images, slideshow images, category header images, background images, etc. — are properly sized and compressed, so that your site enjoys both the speed and visual richness that your customers (and Google!) expect.
The good news is that photographs are the easiest type of images to make lightweight, while retaining good quality. This document will provide guidelines and tips for creating lightweight images for your site.
Most photo editing software can handle the details discussed here, although some will do some tasks better than others. If you’re a cataloger, you probably already have Adobe Creative Cloud products in your tool set, and Photoshop is the champ at creating images that are web-ready and Google-friendly.
If you’d like to explore your image processing options, we have tools available on the CV3 platform, such as PIO — reach out to Support and let us help you get your images on the right track!
Image dimensions vs. image weight
First, let’s clarify the difference between dimensions and weight.
An image that is large in dimensions (width and height measured by pixels, em, or inches) is not necessarily a problem for the web. For example, if you have a background image that sits behind your website’s design, that image is likely very large in terms of width and height. Page speed does not have to be negatively impacted by a large image as long as its weight (measured in bytes, KB, or MB) is low.
A product photograph that’s taken straight out of the camera is large in both dimensions and weight, because of the photo’s millions of colors and a hefty pixel depth that provides sharpness, detail, and subject clarity. These images must be resized (by reducing dimensions) and compressed (by reducing weight) in order to function properly on the web and meet Google’s standards. (Note that in the real world, you will hear the term image size interchangeably to mean dimensions or weight. To avoid confusion, this article will specifically use the terms image dimensions and image weight.)
What is compression?
Compression is the process of reducing image weight by removing a combination of colors and pixels in such a way that image quality is preserved as much as possible. Compression technology (such as what’s found in PIO and Photoshop) has improved significantly over the years, and today it’s possible to produce an image that’s not only lightweight, but also beautiful on even the highest definition displays.
Optimal image dimensions for web images
Image compression is impacted by a number of factors, including the width and height of the image. Before you save and compress your images, make sure they are properly sized to fit the space where they will live on your site. An image taken directly out of your camera (or downloaded from your photographer) is likely far too large to create a lightweight image for the web. (E.g., an original photo might measure over 4,000 pixels wide, whereas the space it will occupy on your homepage is only 900 pixels. That extra 3,100 pixel-width just adds unnecessary weight — and load time — to your site.)
Most photo editing software has the ability to resize your images, whether product photography or a promotional image you’ve created from scratch. If you’re unsure how to determine the width and height you should use for the images in the various spaces on your site, CV3 can help with that — just ask!
Optimal image weight for web images
The goal for the web is always to compress your images as tightly as possible, while retaining image sharpness and clarity.
As a beginning guideline, the upper limit for a single image’s weight is 150 KB. It’s important to note, however, that this is the upper limit, and that the vast majority of your images can and should be compressed much smaller. Images in the various product grids around your site (say, featured products on the homepage, and all category pages), should be no more than 30 KB each, with a reasonable goal being 20 KB each or less (Google will love you more if you can get those grid images under 10 KB).
Image formats: JPG vs. PNG vs. GIF
For web images, format is everything, and you’ll be working primarily with the JPG and PNG formats.
JPG: All of your product display photos should be saved in JPG format. JPG compression excels at reducing the image weight of photographs, while retaining sufficient clarity of the image’s details. JPG is also excellent for images with gradient backgrounds or other large areas of colors that blend into each other.
PNG: PNG compression is suited for images with large blocks of solid colors (other than a white background behind a product photo). If your hero image has a solid blue background with a white text overlay, for example, the PNG format will produce the lightest, cleanest image (the JPG format will also produce a small image, but its compression process leaves behind “artifacts” in the image — noticeable speckles that blur the color block and make solid areas look splotchy). The PNG format is also necessary for images that require transparent backgrounds. Note that PNG is not a good compression format for photographs posted on the web: While PNG compression produces beautifully sharp images, they’re not nearly lightweight enough to pass Google’s standards.
GIF: The GIF compression format is no longer widely recommended, although it’s the only format that supports animated images (a.k.a., the animated GIF).
In sum: use JPG compression for product photographs, and PNG compression for images with mostly solid color sections and backgrounds. For images such as heroes and slides that use a combination of photographs and solid backgrounds, you should try both formats, and then pick the version that produces the lightest image that still looks good.
Compression examples
Let’s take a quick look at some image examples, processed in Photoshop.
JPG Tomatoes Photograph: 600px x 400px – JPG Quality 10 (Photoshop) Result: Image is clean, sharp with rich colors, even at this very low compression quality. Image weight is 24 KB.
PNG Tomatoes Photograph: 600px x 400px – PNG 256 colors (Photoshop) Result: Also beautiful and crisp, but image weighs in at 158 KB.
JPG Promo Solid background with text overlay: 600px x 400px – JPG Quality 10 (Photoshop) Result: Notice the smudgy artifacts that halo the white text. Image weight: 16 KB
PNG Promo Solid background with text overlay: 600px x 400px – PNG 256 colors (Photoshop) Result: Text has sharp edges, and the red background is perfectly clean. Image weight is half that of the JPG version at 8 KB.
JPG Combo Combo photograph and solid colors 600px x 400px – JPG Quality 10 (Photoshop) Result: Image weight is a very trim 20 KB, but there is considerable color distortion on the red background.
PNG Combo Combo photograph and solid colors 600px x 400px – PNG 256 colors (Photoshop) Result: Both halves of the image are beautiful and sharp. However, the image weighs 92 KB.
JPG Combo Combo photograph and solid colors 600px x 400px – JPG Quality 40 (Photoshop) Result: By upping the Quality to 40, we were able to reduce the artifacts around the text. Image weight is 35 KB, far below the PNG version.Image weight is a very trim 20 KB, but there is considerable color distortion on the red background.
Finally, don’t forget to craft a web image/photo editing process for all of your future images, and make sure your team knows the specs (including agencies and freelancers).