The internet now permeates the globe—and people use many different devices to access it. In days gone by, desktop computers were the primary way people used the internet—but now?Almost 60%of global web traffic will be accessed through mobile devices in 2022.
This means you need to optimize images correctly for mobile shoppers. If you don’t, they might see images that are smaller than is ideal—forcing them to scroll and zoom—or worse, no images at all.
The good news is that it doesn’t take much work to ensure your images are compatible with multiple devices. The main methods include using the right image sizes to begin with (pixels and memory size), and using online image-optimizer tools.
Follow our quick-step tutorial below tooptimize your imagesproperly for both mobile and desktop devices.
Best image size for websites
Pixel width:2500 pixels is perfect for stretching full-screen across a browser in most cases. Any image smaller than that might get cut off or appear blurry if it needs to fill the browser width.
Image size:The best overall (pixel) size of your images depends on your use case, e.g., background images need to be bigger than a blog post image.
File size:任何大于20 mb的大小可以dramatically impact your website speed. Smaller images (up to 2 megabytes in size) are better in most cases.
Image attribute:Image attributes (alt text or alt tag) are text-based and don’t really impact your website’s performance. However, they’re used for the visually impaired via screen-reader software, so keep the attribute text short and concise.
Why is image size important for websites?
For websites, image size is important for three main reasons: user experience, page speed, and ranking. Poor choices in your image sizing can impact all three of these metrics, normally at the same time.
This means using the best image sizes on your webpage for each use case can help improve them all simultaneously.
Creates better user experience
Having the correct image size for each use case helps improve the user experience by being easier on the eye—without the need to zoom in for details or scroll to see a whole image.
Here’s an example of what happens when you use a background image that’s too small to scale across a page (which results in “repeater” images used to fit the screen):
If the owner of this website had opted to try fitting the small image to screen, it would be too blurry to see. The repeat images are also unappealing, making for a bad user experience.
Improves website page speed
When you have large image sizes on your website, it takes longer for the server to load the page when a user arrives on it it. In image SEO terms, this is called “contentful paint.” Smaller image sizes (mainly image file size) tend to load more quickly across devices.
Here’s an example of bad page load speeds.
From here you can see the server has an overage load speed of 2.1 seconds to load the first image, and 4.1 seconds to load the largest image. Whenhalf of customersabandon shopping carts if pages take more than 6 seconds to load, it’s important to get your page speeds up to avoid a high bounce rate.
Improves website ranking
Website ranking can refer to the overall ranking of your website (e.g., domain rating), or how close to the first page (or top of the first page) of search results your webpage is when a user searches for specific terms.
Google uses a host of metrics within its algorithm to determine what goes on the front page of search results, and the quality of your images (and the user experience they generate) are part of thecurrent algorithm.
Website image size guidelines
In this section, we’ll look at size requirements for specific types of images for the web, as they’re not all the same. There are five main types of images you’ll see on a website: background images, hero images, banners, blog images, and logos.
Background image
The background image is the biggest image type you’ll see—as the name suggests it serves as the backdrop to your homepage (though you can also find them on main “pillar” pages).
Max image width:2500 pixels
Max image height:1406 pixels
Aspect ratio:16:9
File size:20 MB max
Here is a great example of a background image on an ecommerce website:
Bicycle retailerCowboylets its hero product take center stage with this image. It fills the screen, designed to stretch across no matter what device it’s viewed on.
Hero image
You might have mistaken ahero imagefor a background image before, but the key difference is they’re usually smaller in height—about half the size. This image type is a great option if you need to have more text on the screen right away without users having to scroll to see it.
Max image width:between 1280 pixels and 2500 pixels
Max image height:between 720 pixels and 900 pixels
Aspect ratio:16:9
File size:max of 10 MB, but ideally, smaller (without sacrificing quality)
Here’s an example of a hero image in action:
As you can see,BLK & Boldopted to go as wide as it can,with a shorter fixed-ratio image height.
Website banner
Banner images are a little trickier than other image types because they can be different sizes and shapes, depending on what you need to show the visitor. The most typical type of website banners, however, are ads.
Since Google Ads is one of the most popular services in this space, the folks atGoogle have a few recommendationsfor the best banner sizes:
As you can see, there are plenty of options. However, if you’re thinking about having a banner that’snotan ad, the rectangular options (e.g. 300 by 200 pixels or 970 by 90 pixels) are generally better. Keeping the file size small helps improve your webpage speed, so a max of 5 megabytes would be ideal.
Blog image
Blog images can also vary in type and size. However, it’s worth noting that if we’re talking about the main “header” image (the one that gets displayed at the top, “above the fold”) they should all be uniform in size across your blog.
Max image width:2240 pixels
Max image height:1260 pixels
Aspect ratio:16:9
File size:max of 3 MB, but ideally, smaller (without sacrificing quality)
You could look at the top of this page for an example of a blog image, but here’s another:
This post comes fromKulala, and while the intrinsic size of this image is 1200 by 620 pixels, the rendered size is much smaller (894 by 462 pixels), making the file size just 95.1 kilobytes.
Logo
Your logo will likely be one of the smallest images on your website (unless you count the favicon in the tab bar). And depending on the type of logo, you should go one of two routes: rectangular or square.
Most logos lend themselves to a square 1:1 ratio, which you can see in the bottom left corner of the Kulala example, above. But a more rectangular logo could use a 2:3 image ratio for analmostsquare look, or even a 4:1 ratio.
Max image width:250 pixels
Max image height:250 pixels
Aspect ratio:1:1, 2:3, 4:1
File size:max of 1 MB, but ideally, smaller (without sacrificing quality)
Shopify’s own website logo uses the longer 4:1 ratio:
This image size is good for logos of longer brand names or where the logo is only words and not a graphic.
Mobile size image recommendations
1. Choose the right image dimensions
It’s vital to strike a balance between large images, so users can zoom in, and those that are an optimum size, so they don’t take up too much space and slow down your page load times.
On Shopify, you canupload imagesof up to 4472 by 4472 pixels, with a file size of up to 20 megabytes. But thewebsite buildertypically recommends using 2048 by 2048 pixels for square product photos.
These high-resolution images give your store a professional and well-rounded look, with great zoom capabilities. Remember that for zoom functionality to work, your images must be more than 800 by 800 pixels.
Keep the width and height aspect ratio of all your feature images to maintain a uniform look along your product line and on your collection pages. For example, you might make them all square.
Your feature image is the first image of a product that will appear across your store—on your homepage, cart page, checkout page, and a variety of collection pages. Keep all your thumbnails the same size and shape, too, to convey a polished store look.
Keep in mind, many of your customers will be browsing on mobile as well, and square images are easier to reposition for smaller screens. Additionally, square and vertical images take up more of the mobile phone screen, allowing customers to see even more of your photo.
2. Keep file size in mind
Images with larger file sizes can greatly impact your site’s speed, especially when visitors try to access it from their smartphone. And if your site is too slow, this increases the chances that someone will leave your site and head to another option in their Google search instead.
This is why you want to compress large images, so their file size isn’t so massive, specially since many sites have a maximum file size that they allow you to upload. Shopify, for example, has a maximum file size of 20 megabytes.
There are online tools available to help, likeTinyPNGorCompress JPEG. With these tools, you can easily drag your large image files into the upload area, compress them so they’re smaller (while still retaining image quality), and redownload the new file.
For the most part, you’ll want all of your header or background images to be no larger than 1 megabyte and yourproduct photosto be around 300 kilobytes.
3. Resize photos for mobile screen
Shopify automatically resizes your images to fit smaller screens, but certain images can sometimes require manual editing. Keep in mind that desktop and mobile screens are not only different sizes but have opposite orientations.
And while Shopify tries to accommodate that with gentle cropping, it will be best if your images are square and your product is vertically and horizontally centered.
Also, images with overly large resolutions, such as those saved at Shopify’s maximum 4000 by 4000 pixels, can come out blurry when resized for mobile. So reducing your image to a more manageable size and shape that keeps mobile in mind can help your store look better across all devices.
Remember that large files also slow down your site’s loading time. And in ecommerce, especially in mobile, every second matters, so optimizing your images should be a priority.
While lossless compression can give you the highest quality image, it often creates large files that take forever to upload (especially in bulk), and can slow down your page loading times, causing visitors to abandon your store. This is especially true on mobile, where internet speeds can be slower, and waiting for an image to finally appear frustrates shoppers.
While Shopify’s responsive designs and algorithms are good at resizing and displaying your images across devices, giving them a hand with thoughtful file sizes can mean an even smoother shopping experience.
Best image formats for the web
Let’s look at the file formats most widely used in product photography and what each brings to the table. They are listed here by how commonly they’re used in product photography.
JPG
JPG is the most common digital image file format. It is widely supported and boasts a small file size with a good color range. Its compression allows you to balance file size and image quality.
PNG
PNG was created to improve the GIF format by removing its 256-color limitation. It’s widely accepted, lossless (reduces file size without reducing quality), and supports transparency (say, for transparent backgrounds). The downsides are that PNG file sizes can be large because of the lossless compression and the format is not as universally compatible as JPG.
HEIC
HEIC files are a space-saving file format that take up about half the space as an equivalent JPEG file using advanced compressive technology. It’s most commonly used to store photos on iOS devices, as it’s Apple’s standard file format.
WebP
WebP is a modern image format that provides superior compression for images on the web, with an average saving of over 30% in file size over traditional file formats like PNG and JPEG.
GIF
GIF offers small file size by compressing and reducing images to 256 colors. Although it has been widely replaced by PNG, it is still used for animation, as it’s the only format that both supports it and is universally recognized by browsers.
TIFF
TIFF is a lossless compression format that is widely supported by a range of editing and web applications. It offers high-quality image resolution, and multiple images and pages can be conveniently saved in a single file. However, the file size tends to be large.
Recap:
- JPG is the most convenient for combining smaller size with decent quality.
- PNG提供了更高质量的无损压缩,it does so at the heavy cost of a larger file size.
- GIF is useful if you are offering 360-degree shots and want lightweight files.
- 相比之下,TIFF可以提供很好的质量,但是file sizes are usually rather heavy and impractical.
How to find out image sizes on your website
The fastest way to find out the image size on any given web page (without downloading the image and looking at its specs) is to use the browser developer/inspect tools.
This method works whether you’re using a Mac, Windows, or Linux operating system, since it’s browser dependent—which also comes with a caveat. It works using Safari, Chrome-based browsers, and Firefox.
All you need to do is go to the webpage and hover over the image you want information about, then either right-click with your mouse or use Control/CTRL + click to bring up the options.
From there, look for the Inspect option:
Clicking on Inspect will bring up all the code information about the webpage (it can look intimidating, but don’t worry).
In the inspection panel, the information about the image you clicked on should be highlighted, and you’ll notice when hovering over to the highlighted text, the image will get a blueish overlay to show you what part of the code you’re looking at:
In this case, you can see the browser (Brave) tells you above the image how many pixels the image is using. But that figure will change if you resize the webpage. However, if you hover over to the image storage link, it’ll bring up the fixed properties of the image:
And that’s it. You don’t need to download the image or a specific tool—it’s all right there in the browser. To exit the inspector panel, just hit the red X on the top right or left corner.
Tools for image optimization
The best approach is to use an optimizer tool to help resize images. Here are two great tools to help you do that within your Shopify Admin.
Image optimizer by Squirai
TheImage Optimizer tool by Squiraiis speed tested and makes sure your images are SEO-ready and automatically optimizes all the images on your website—including new ones you add later on.
Plus, you can also customize and apply a watermark to protect yourproduct photographywithout needing to know any code.
LoyaltyHarbour Image Optimizer
The LoyaltyHarbour Image Optimizerplug-in works similarly to the tool by Squirai, compressing your images across your website for you.
However, it doesn’t have the same watermarking feature. Instead, the in-depth dashboard allows you to automatically set alt- text for your images and convert them to the best image file type for better page speed.
Alternatively, if you have the ability, you can also use Photoshop to help reduce the file size, but this can be a more complicated process than the above tools.
Use the best website images for your brand
Having images on your website for different screen sizes is essential for making pages look interesting and ranking your site on search engine results pages. But the size of your images matter—too big and you risk your website loading too slowly; too small and you risk a poor user experience.
然而,有不同的对我的建议mage sizes depending on what type of image you want. Instead of trying to remember them all, you can bookmark this guide to refer back to when you need to upload images.
But if you use Shopify and one of the recommended optimizer tools together, you don’t need to worry about the file size giving you a slow website.