Without optimized images, website visitors might see images that are too small and blurry or too big, increasing load times and forcing unnecessary scrolling and zooming.
That’s especially important on mobile. Data from Statcounter reports that more people browse the internet on mobile devices than on desktop computers. Businesses building their websites need to use the right image size to work with a variety of screen sizes, so all visitors have a good user experience, or UX.
Website images sizes appropriate for the device and format support good UX strategy and healthy core web vitals, and they reduce customer friction.
Choose the right image dimensions, keep file sizes minimal, and use a responsive website design to provide a top-notch browsing experience. Follow the tutorial below to optimize your images for mobile and desktop devices.
Best image sizes for websites
Image size can refer to two different measurements: pixel dimensions and file size.
- Pixel dimensions affect how large and clear an image appears.
- File size affects how much data the browser must download.
A wide banner or hero image, for example, can stay clear and load quickly when it has suitable dimensions and effective compression.
Factors to consider when preparing images for a website
Pixel dimensions
Choose dimensions based on the image’s display area. General starting points include 1,920 pixels wide for banners, 1,200 pixels wide for main content images, and 300 to 800 pixels wide for thumbnails.
Image placement
The ideal dimensions depend on where the image appears. A full-width background image usually needs more pixels than an image placed within a blog post.
File size
Keep image files as small as possible while preserving visual quality. Aim for about 500 kilobytes when practical and keep most images below 2 megabytes. Files approaching 20 megabytes can slow website speed considerably. Formats such as WebP can reduce file size while maintaining visual quality.
Image attributes
Image attributes such as alt text are text-based and have little effect on page performance. Screen readers use alt text to describe images, making it an important part of web accessibility. Images without alt text will default to their file names. Keep descriptions fewer than 100 characters, including spaces.
Best image dimensions for desktop and mobile devices
When you make a website to sell products, correctly sized images keep product details clear and reduce page weight.
Recommended image dimensions vary by placement and screen size. The table below lists common starting points for desktop and mobile websites.
Aspect ratio describes the proportional relationship between an image’s width and height. For example, a 16:9 image is 16 units wide for every nine units high. Consistent aspect ratios align images across a page and reduce unexpected cropping.
Statcounter data shows that 1920 by 1080 pixels, or Full HD, was the most common desktop screen resolution worldwide in 2025. A 1,920-pixel-wide image with a 16:9 aspect ratio is the baseline for full-screen backgrounds and lightbox images.
| Website image type | Desktop image dimensions (W x H) | Mobile image dimensions (W x H) | Recommended aspect ratio |
|---|---|---|---|
| Background image | 2560 x 1440 px | 360 x 640 px | 16:9 desktop; 9:16 mobile |
| Hero image | 1280 x 720 px | 360 x 200 px | 16:9 |
| Website banner | 1200 x 400 px | 360 x 120 px | 3:1 |
| Blog image | 1200 x 800 px | 360 x 240 px | 3:2 |
| Rectangle logo | 400 x 100 px | 160 x 40 px | 4:1 |
| Square logo | 100 x 100 px | 60 x 60 px | 1:1 |
| Favicon | 48 x 48 px | 48 x 48 px | 1:1 |
| Social media icon | 32 x 32 px | 48 x 48 px | 1:1 |
| Lightbox image | 1920 x 1080 px | 360 x 640 px | 16:9 desktop; 9:16 mobile |
| Thumbnail image | 300 x 300 px | 90 x 90 px | 1:1 |
| Product thumbnail | 150–300 x 150–300 px | 150–300 x 150–300 px | 1:1 |
Adjust dimensions based on how a responsive website design displays images across different screen sizes. In most cases, an image’s rendered dimensions will be smaller than its uploaded dimensions.
Website image size guidelines
The five image types covered below are:
Refer to the table above for recommended desktop and mobile dimensions. The sections below explain how each image type works and provide real examples.
Background image sizes
Background images are generally the largest images on a website. They create a backdrop for a homepage or another landing page.
Beauty brand Glossier uses full-screen campaign imagery on their homepage. Product copy and a call to action appear over the image, allowing the photography to fill the available display area.
For a 16:9 background, use dimensions of 2,560 by 1,440 pixels. Compress the file to reduce page loading time while preserving image quality.
Hero image sizes
Hero images occupy a prominent area near the top of a page but are usually shorter than full-screen background images. Their reduced height leaves more room for text and other content before visitors scroll.
Banner image sizes
Banner image dimensions vary based on placement and purpose. Banner ads must meet the requirements of the platform displaying them.
Google Ads provides image sizing guidelines for display ads across desktop and mobile devices. For website banners that aren’t ads, a wide rectangular image usually fits headers and promotional sections.
Blog image sizes
Blog images can include featured images, in-article graphics, and screenshots. The example above comes from marketing intelligence platform Whatagraph. Its featured image has uploaded dimensions of 1,880 by 1,058 pixels and rendered dimensions of 589 by 331 pixels.
Social platforms often use Open Graph metadata to select the preview image when someone shares a product page or blog post. Meta recommends an Open Graph image of at least 1,200 by 630 pixels for high-resolution link previews. The dimensions create an aspect ratio of about 1.91:1.
Logo sizes
A logo will usually be one of the smallest images on a website, apart from the favicon in the browser tab. The best aspect ratio depends on the logo design.
A square 1:1 ratio works well for compact marks. Rectangular ratios fit longer brand names and wordmarks.
Mobile image size recommendations
Choose the right image dimensions
On smaller mobile screens, many users appreciate being able to zoom in on an image. So, try to strike a balance between image size and file size.
High-resolution images give your website a professional and well-rounded look, with great zoom capabilities. Keep the aspect ratio of similar images the same to maintain a uniform design across page types.
For example, you might make all product images in an ecommerce store square. Square images are easier to reposition on smaller screens. Square and vertical images fit well on mobile screens, allowing visitors to see more of your images without needing to scroll.
On Shopify, upload product images of up to 5,000 by 5,000 pixels or 25 megapixels. Each file must be smaller than 20 megabytes. Collection images follow the same dimensional limit as product images: up to 5,000 by 5,000 pixels.
Square product images should be 2,048 by 2,048 pixels. Remember that for zoom functionality to work, your images must be more than 800 by 800 pixels.
Keep file size in mind
Images with larger file sizes impact your site’s speed, especially when visitors use a smartphone. The best website builders provide responsive themes and image tools for resizing and compression.
If you need to compress your images to reduce their size, there are online image resizing tools that can help. Use these tools to reformat large image files into new dimensions or file types.
For the most part, you’ll want header background images below 10 megabytes, while product photos should be much smaller—around 300 kilobytes.
Resize photos for mobile screen dimensions
Shopify automatically resizes your images to fit smaller screens. But on other platforms, images may require manual editing to make them mobile-ready. Keep in mind that desktop and mobile screens have opposite orientations.
Remember, large files slow down your site’s loading time. While lossless compression can give you the highest quality image, it often creates large files that may take forever for your website to load.
Website load time statistics indicate websites should load in less than three seconds on desktop and less than five second on mobile. So consider using the smallest images files with the best resolution.
While Shopify’s responsive designs and algorithms are good at resizing and displaying your images across devices, assisting with thoughtful file sizing contributes to a smoother shopping experience.
Why is image size important for websites?
There are three main reasons image size is relevant and impacts websites. Appropriately-sized images:
Create a better user experience
Having correctly sized images for every use case on your website helps improve the ecommerce UX. Visitors can access an appropriate level of detail, and won’t need to scroll to see the entire image.
When images are low-quality, pixelated, or too small, they can impact the perceived quality of your content. For an ecommerce website, poor perceptions of website credibility could lead to customers questioning the quality of your business or products. This makes it harder to build trust and new business with customers.
Conversely, high-quality, correctly sized images enhance the perceived value of your products and deliver more visual information to potential customers. Good user experience design blends intuitive and engaging interactions, helping websites smoothly move visitors through the customer journey map.
Improve website page speed
Large image files require browsers to download more data before a page can finish rendering. Images with smaller dimensions and compressed file sizes tend to load more quickly across devices.
The median home page in 2025 loaded about 1 megabyte of images. Images accounted for more bytes than any other resource type on both desktop and mobile.
Largest Contentful Paint (LCP) measures how long it takes the largest image, text block, or video in the visible area to render. Google classifies an LCP of 2.5 seconds or less as good, measured at the 75th percentile of page loads across mobile and desktop devices.
Check your page’s LCP and other page-speed metrics using Google’s PageSpeed Insights.
In the example below, PageSpeed Insights reports a First Contentful Paint of 1.8 seconds and an LCP of 1.9 seconds.
Help website ranking
Website ranking refers to the position of your website in search engine result pages (SERPs). Websites optimized for search increase their potential to rank highly on SERPs for relevant user search queries (known as keywords).
Google uses a host of metrics to determine which webpages rank at the top of their search results. The quality of images (or, more accurately, the improved user experience they generate) is a likely factor in Google’s algorithm.
What is the best image file type to use?
WebP is the best default for most website images because it combines small file sizes with good visual quality. SVG is best for logos and icons, and other formats have more specific uses.
| File type | Compression | Best use | Main consideration |
|---|---|---|---|
| WebP | Lossy or lossless | Photos, transparent graphics, and animations | Google reports that lossless WebP images are 26% smaller than PNGs. Lossy WebP images are 25% to 34% smaller than comparable JPEGs at equivalent quality. |
| JPEG | Lossy | Photographs and images with many colors | Repeated compression reduces image quality. |
| PNG | Lossless | Detailed graphics, screenshots, and transparent images | PNG files are often larger than JPEG or WebP files. |
| SVG | Vector | Logos, icons, and simple illustrations | SVG files scale to any size while remaining clear. They work best for vector artwork rather than photographs. |
| AVIF | Lossy or lossless | High-quality photos that require small files | AVIF provides efficient compression. Older browsers may require a fallback format. |
| GIF | Lossless | Short, simple animations | GIF files are limited to 256 colors and can be larger than animated WebP files. |
For Shopify stores, the built-in image content delivery network automatically resizes and compresses images. It also selects an appropriate file format for the browser, often serving images as WebP.
How to find out image sizes on a website
The fastest way to look up the size of an image on any webpage (without downloading the image) is to use your browser’s Inspect tool.
A content management system, or CMS, can list original image dimensions in its media library. The browser’s Inspect tool shows the image’s rendered dimensions on the live page.
The browser inspection method works on Mac and Windows, with Safari, Chrome, or Firefox browsers.
Go to the webpage and hover over the image you want information about. Right-click with your mouse to bring up the option menu and look for Inspect:
Clicking on Inspect will bring up the page’s HTML code (it can look intimidating, but don’t worry).
The inspection panel highlights information about the image you clicked on. When you hover over the relevant code, it also highlights the image:
In this case, the browser tells you how many pixels the image uses. If you resize the web page, that figure will change accordingly.
If you’re looking for the original upload properties of the image, hover over the image storage link:
To exit the inspector panel, just click the X in the top-right corner.
Image optimization tools
Online image optimizer tools are a simple, fast (and usually free) way to resize your website’s images. Here are three popular image optimization tools:
Image Resizer
Shopify’s free online image resizing tool is a convenient way to adjust your images for use across marketing channels and social media.
Choose from a variety of officially correct Instagram posts and story sizes, YouTube thumbnail sizes, and other social content dimensions.
Image Optimizer by Squirai
Squirai’s image optimizer tool is speed-tested to ensure your images are SEO-ready. It automatically optimizes all the images on your website—including new ones you add later.
Customize and apply a watermark to protect your product photography without needing to know any code.
LoyaltyHarbour Image Optimizer
LoyaltyHarbour Image Optimizer works similarly to the tool by Squirai, automatically compressing images across your website.
The dashboard allows you to automatically set image alt text and convert to the best image file type for better page speed.
Alternatively, use Photoshop to help reduce file sizes. Keep in mind that this is a more complicated process than using the above tools.
Troubleshooting: image formatting issues
As you manage your website, you’ll probably encounter image formatting issues at some point. Issues with images can range from incorrect sizing to broken links.
Take a look at solutions to some common problems with website images.
Incorrect image size
Issue: Images appear too large or small and may break the layout of a webpage, resulting in a compromised user experience.
Fix: If you are using a website theme or template, look for resources on the correct image dimensions for your design. In your website builder, be sure to select render sizes for each image so images don’t display in their full, original size.
Slow loading times
Issue: Images load more slowly than the rest of a webpage—or not at all.
Fix: The wrong file format can lead to unnecessarily large file sizes that affect loading times. Use an image editing or conversion tool to change the file format of your images. For graphics or logos, consider using SVG for scalability without loss of quality. For other images, consider converting to WebP to compress large files.
Poor image quality
Issue: Images appear pixelated or blurry.
Fix: If your images appear pixelated or blurry, try sourcing a higher-resolution version. Remember, image resolution differs from image size. Resolution refers to the amount of detail an image holds, often measured in pixels per inch (PPI). A higher resolution means a sharper image, regardless of size.
If compressing an image reduces its quality, adjust the compression settings or switch to a lossless compression format like PNG.
Images are not displaying at all
Issue: Broken image links result in no image.
Fix: Verify the source URL of your images. This URL should lead directly to the location of your image file. Compare the image file name in the URL with the actual name of your image file. They should match exactly, including the file extension (.jpg, .png, .svg).
Read more
- What is Shopify and How Does it Work?
- The 13 Best Dropshipping Suppliers in 2024
- The Ultimate Guide To Dropshipping (2024)
- How To Source Products To Sell Online
- How to Sell Pre-Orders on Shopify
- How to Sell Art Online- The Ultimate Guide
- 10 Ways How to Optimize Images for the Web for SEO
- How to Create Your Shipping Policy (With a Template and Examples)
- How to Take Pictures of Shoes- Step Up Your Footwear Photography Game
- Clothing Photography- How to Take Beautiful Apparel Photos
Website image size FAQ
How big is a KB, and how many KB should a website image be?
A kilobyte (KB) equals about 1,000 bytes of data. Aim for 500 kilobytes or less for most website images. Small thumbnails can be lighter, while full-width images may require larger files to preserve quality.
What size should an image be for a website?
The best dimensions depend on placement. A main content image can be about 1,200 pixels wide, while full-width backgrounds often use 1,920 pixels or more. Responsive image settings adapt the displayed file to each screen size.
Is 1920 x 1080 a 16:9 ratio?
Yes. A 1,920 by 1,080-pixel image has a 16:9 aspect ratio and is commonly called Full HD. Dividing both dimensions by 120 gives 16 by 9.
What is the difference between image size and resolution?
Image size can refer to an image’s dimensions or its file size in kilobytes or megabytes. Resolution describes the amount of detail an image contains, often measured in pixels or pixels per inch. For websites, pixel dimensions and file size have a greater effect on display quality and loading speed than pixels per inch.
What is an Open Graph image size for social sharing?
An Open Graph image is the preview image displayed when a product or article link is shared on social media. Meta recommends 1,200 by 630 pixels for high-resolution previews, which is an aspect ratio of about 1.91:1.
