With people browsing across every sort of mobile and desktop device, it's key to format and size your images to give users the best possible experience. If your images are too big or too small, visitors might end up scrolling and zooming more than they'd like to, causing them to churn.
The good news is that it's easy to optimize your images. In this article, you’ll learn how to adjust your images to keep your site running smoothly for mobile and desktop.
Optimal image dimensions for desktop and mobile devices
Here's a guide to recommended image dimensions for both mobile and desktop websites:
|
Image type |
Mobile dimensions (W x H) |
Desktop dimensions (W x H) |
Aspect ratio |
|
Hero image |
360 x 200 pixels |
1280 x 720 pixels |
16:9 |
|
Square logo |
60 x 60 pixels |
100 x 100 pixels |
1:1 |
|
Thumbnail image |
90 x 90 pixels |
300 x 300 pixels |
1:1 |
|
Background image |
360 x 640 pixels |
2560 x 1400 pixels |
16:9 |
|
Social media icons |
48 x 48 pixels |
32 x 32 pixels |
1:1 |
|
Favicon |
16 x 16 pixels |
16 x 16 pixels |
1:1 |
|
Rectangle logo |
160 x 40 pixels |
400 x 100 pixels |
4:1 |
|
Website banner |
360 x 120 pixels |
1200 x 400 pixels |
3:1 |
|
Lightbox images (full screen) |
360 x 640 pixels |
1920 x 1080 pixels |
16:9 |
|
Blog post image |
360 x 240 pixels |
1200 x 800 pixels |
3:2 |
These dimensions are guidelines and might need adjustments based on your site's responsive design.
It's usually best to have the render size of your images smaller than their original upload size.
Best image size for websites
Image size: The ideal pixel size for your images varies by purpose. For example, background images should be larger than images for blog posts.
Pixel width: A width of 2500 pixels works well for full-screen displays in most situations. Images smaller than this might be cropped or look blurry when stretched to fit the screen.
File size: Images larger than 20 megabytes can slow down your site. Aim for smaller files to maintain faster load times, ideally between 500 kilobytes and two megabytes.
Image attribute: Alt text or alt tags don't affect your site's speed but are important for accessibility. They help readers interpret images and can moderately boost your site ranking. Keep in mind that alt texts should be fewer than 100 characters.
Why is image size important for websites?
Setting the right image sizes can improve your site’s user experience, speed, and search ranking. Let’s break down how this works.
Improving user experience
Using properly sized images makes for a better user experience. Visitors will be able to view visual elements on your site clearly without needing to scroll or resize images.
Low-quality or pixelated images can hurt the overall impression of your content. On an ecommerce site, improperly sized images can make customers doubt your product or service’s quality.
On the other hand, sharp, correctly sized images boost the perceived value of what you’re offering and provide more visual details to potential buyers.
Improving site speed
Uploading large images to your site can increase loading times and potentially the rate at which visitors leave for another site. Smaller images (both in file and size dimensions) usually load faster on all devices.
Image load time is sometimes called "contentful paint." You can measure this and other speed factors with Google's PageSpeed Insights.
For instance, if a server needs 2.1 seconds to load one image and 4.1 seconds for a larger one, the page load is slow.
With many users abandoning carts that take more than three seconds to load, it's crucial to optimize image sizes to keep bounce rates low.
Boosting website ranking
How often have you checked your website ranking? It’s possible that your site needs a bit of a boost there, and having the right image formats and sizes helps with that.
Website ranking is your site’s position on the results page of a search page (your SERP placement) based on a keyword or query. Google, other search engines, and now generative engines like ChatGPT evaluate many factors like how relevant your content is, its user experience, and whether there are authoritative backlinks, among others, and you can raise your ranking using better SEO or GEO practices.
The quality of your images likely affects your website's position in search results along with these other factors. While having a solid SEO strategy will improve your discoverability, formatting and sizing your images correctly will give users a better experience and signal to search engines that your site should shoot to the top.
Size guidelines for website images
Websites typically use five types of images:
- Background images
- Banner images
- Hero images
- Blog images
- Logos
Each type has specific size needs for desktop and mobile use. Let's review the typical dimensions for each.
Background images
Background images are typically the largest visuals on a website. They act as a backdrop for a homepage or other key pages. The image is meant to span the entire screen of any device.
Recommended specifications:
- Image height: 1400 pixels
- Aspect ratio: 16:9
- Image width: 2560 pixels
- File size: 20 MB
Banner images
Website banner images vary in size and shape based on their location and purpose. The most common type is a banner ad.
Google Ads is a popular service for banner ad promotion. It offers sizing guidelines for submitted images:
For non-ad banner images, rectangular sizes like 300 x 200 pixels or 970 x 90 pixels often work well.
Recommended specifications:
- Image height: Check with the platform
- Image width: Check with the platform
- Aspect ratio: Varies by platform
- File size: 150 KB
Hero images
Hero images are similar to background images but are round half the height. They help show more text on the screen without needing users to scroll.
Recommended specifications:
- Image height: Between 720 and 900 pixels
- Image width: Between 1280 and 2500 pixels
- Aspect ratio: 16:9
- File size: 10 MB
Blog images
Blog images can vary in type and dimensions. For example, the featured image may be 1200 by 620 pixels when uploaded, but will appear smaller on the page (894 x 462 pixels).
Setting a specific render size for your blog helps streamline your design and keeps file sizes manageable (the Kulala image is 95.1 kilobytes).
Main header images at the top of your blog posts should be consistently sized throughout your blog.
Recommended specifications:
- Image height: 800 pixels
- Image width: 1200 pixels
- Aspect ratio: 3:2
- File size: 3 MB
Logo
Your logo is usually one of the smallest images on your site (except for the favicon in the browser tab).
Most logos are best in a square format with a 1:1 ratio, but if your logo has a longer name or is text-based, a rectangular shape works better. For instance, Shopify's logo has a 4:1 ratio.
Recommended specifications:
- Image height: 100 pixels
- Image width: 100 pixels
- Aspect ratio: 4:1, 2:3, 1:1
- File size: 1 MB
Mobile image size recommendations
Choose the right image dimensions
Mobile users often value the ability to zoom in on images. So, it's important to balance image dimensions with file size.
High-resolution images lend your site a clean, professional appearance with effective zoom capabilities. To keep your design consistent, maintain the same aspect ratio across similar images.
For example, you might choose to add square images to your ecommerce store. The square format is easier to adjust on smaller screens. Additionally, square and vertical images work well on mobile devices, allowing visitors to see more of your content without excessive scrolling.
If you're using Shopify, you can upload images up to 5000 by 5000 pixels, with a file size limit of 20 MBs.
For square product images, it's recommended to use a size of 2048 pixels by 2048 pixels.
Keep in mind that for zoom functionality, your images need to be at least 800 by 800 pixels.
Evaluate file size
Large image files can affect site speed, especially on mobile devices. Many website builders also have limits on the file size you can upload. For instance, Shopify limits file sizes to 20 megabytes.
If you need to compress images to reduce file size, there are online resizing tools available. These tools allow you to modify images or convert them to different file formats.
In general, aim to keep header background images under 10 megabytes, while product photos should be much smaller, around 300 kilobytes.
Resize photos for mobile screens
Desktop and mobile screens have different orientations, so remember to resize images for the optimal shopping experience across devices. .
Shopify’s algorithm and responsive design resizes your images automatically for smaller screens. But on other platforms, you might need to edit images manually to make them mobile-friendly.
Large files can slow down your site's loading time. Lossless compression gives you the best image quality, but it often results in large files that may take too long to load. Instead, use the smallest file sizes that still offer good resolution.
What is the best image file type for websites?
Selecting the appropriate image file type helps maintain quality and keeps file sizes manageable. Here's a breakdown of the most common image formats and their ideal uses:
JPEG
JPEG (or JPG) is widely recognized as one of the most popular digital image formats due to its balance between file size and visual quality. It works well for displaying photos and detailed images with various colors.
However, JPEG employs lossy compression, which means some visual quality is sacrificed during the compression process.
SVG
SVG (scalable vector graphic) is an XML-based format that uses mathematical formulas to describe two-dimensional images. SVG files are usually smaller than other formats, which helps speed up loading times. Typically, you can scale SVG images to any size without losing quality.
SVG is most suitable for icons, logos, and other graphics that a business needs to use in multiple locations.
PNG
PNG uses lossless compression to reduce file size while retaining image quality and preserving detail. It’s often an ideal choice for images that require a transparent background.
Although PNG files are often larger than JPEGs, its focus on transparency makes it ideal for detailed logos and images.
GIF
GIF is a bitmap format that handles basic animations well. It compresses without losing quality and limits images to 256 colors, which keeps file sizes down.
Though the PNG format is preferred for still images, GIFs are still the better choice for short animations and work on all browsers.
HEIC
HEIC (High Efficiency Image Codec) is what Apple devices use to store images. Using advanced compression technology, it creates high-quality images with much smaller file sizes than JPEGs.
However, the format isn’t supported on non-Apple gadgets universally.
WebP
WebP is an image format that Google developed to improve web performance. With WebP, you can have images that are more than 30% smaller than JPEGs or PNGs
WebP uses lossless compression to help sites load faster. However, not all browsers fully support WebP yet.
TIFF
TIFF (Tagged Image File Format) is a lossless, high-quality format that's widely supported by image-editing software. You can use it for storing images intended for professional printing, thanks to its high resolution and rich color depth.
TIFF lets you save multiple images or pages in one file. But keep in mind, file sizes tend to be large.
How to find image sizes on a website
You don’t need to download an image to figure out its dimensions. You can use your browser’s inspection feature instead, and it works across major browsers like Chrome, Safari, and Firefox. Here’s how:
- Position your cursor over the image you want to examine. Right-click to display the context menu and locate the Inspect option.
- Selecting Inspect will reveal the page's HTML code structure (don't worry if it looks complex).
- Within the inspection panel, the image’s details should appear highlighted. When you hover over the relevant code section, the corresponding image will also become highlighted on the page.
- The browser will display the image’s pixel count. When you adjust the page size, this number will update accordingly.
- To view the original upload properties of the image, hover over the image storage link within the code.
- To close the inspector panel, click the X button in the upper-right corner.
Image optimization tools
Web-based image optimization utilities provide a simple, quick, and typically free method to adjust your website's image sizes. Here are three well-regarded image optimization solutions:
Image Resizer
Shopify's complimentary online image resizing utility offers a practical way to modify your images for various marketing platforms and social media channels.
You can select from numerous official dimensions for Instagram posts and stories, YouTube thumbnails, and other social content types.
Image Optimizer by Squirai
Squirai's image optimization solution is performance-tested to ensure your images meet SEO standards. It automatically enhances all images across your website—including new ones you upload later.
Additionally, you can customize and apply watermarks to protect your product photography without requiring coding knowledge.
LoyaltyHarbour Image Optimizer
LoyaltyHarbour Image Optimizer functions similarly to Squirai's tool, automatically compressing images throughout your website.
The dashboard also enables you to automatically configure image alt text and convert files to the optimal image format for improved page speed.
Alternatively, you can use Adobe Photoshop to reduce an image’s file size, though this is a more complex process and requires a pricier software license and a bit of practice.
Troubleshooting: image display problems
While managing your site, you’ll inevitably face image challenges, from your visuals having the wrong dimensions to missing images altogether.
Here's how to solve several typical image-related issues.
Image size problems
Problem: Images are too big or small, throwing off the page layout and impacting the overall experience.
Solution: If you're using a template or theme, check the suggested image dimensions. Use your site editor to specify render sizes to ensure images aren't shown at their entire, unaltered size.
Slow image loading
Problem: Images take too long to load or don't load at all.
Solution: An improper file format can cause oversized files that delay loading times. Fortunately, you can use an image converter or editor to modify the format. SVG is ideal for logos or graphics that need to scale. For other pictures, consider switching to WebP to shrink file sizes.
Blurry or pixelated images
Problem: Images appear unclear or pixelated.
Solution: Upload images with a higher resolution. Resolution indicates how much detail an image holds, typically measured in pixels per inch (PPI). Higher resolution results in a sharper image, no matter the size. If compression is affecting quality, modify the settings or opt for a lossless format like PNG.
Images not displaying
Problem: Images are missing, leaving broken links or empty spaces.
Solution: Check the image URL. It should point to the file's location. Make sure the image name in the link matches the actual file name exactly, including the extension (.png, .svg, .jpg).
Maximize the impact of your website images
When it comes to image formatting for desktop and mobile sites, these technical pointers will improve each image’s visual aesthetics and the overall user experience of your site.
Make sure you strike the right balance between file size and quality. With the proper image dimensions and format, your site can deliver the visual appeal users expect without sacrificing speed, leading to a better user experience overall.
This will keep visitors more engaged, encourage them to explore your site more, and help you reach peak performance.
Best image size for websites FAQ
What is the best image format for a website?
WebP is a great choice for improving website performance. Compared to JPEG and PNG, it can reduce file sizes by up to 30% using lossless compression. However, not all browsers currently support WebP.
What is the difference between image size and resolution?
Image size is the measurement of an image's dimensions (i.e., its width and height in pixels). Image resolution is the level of detail an image contains. It's typically measured in pixels per inch (PPI). A higher resolution results in a sharper and more detailed image, regardless of the size.
What can I do to improve my website's loading speed?
If your web pages are loading slowly, it might be due to large file sizes, such as the images on your site. Compressing images before uploading can help reduce load times and improve your overall performance.
How can I ensure my images look clear on all devices?
To maintain clarity across devices, it's essential to upload high quality images that match the recommended dimensions for your website. High-resolution images will appear sharp and detailed, whether viewed on a desktop, tablet, or smartphone.
How do I optimize my background image for faster loading times?
To optimize your background image for faster loading, reduce the file size by compressing it without losing quality. Smaller file sizes ensure that your background image loads quickly.
How does image size affect website load time?
When image files become larger, they require more time to download and appear on a user's screen. This can cause webpage loading delays, which may harm user experience and search engine performance. Balancing image quality with file size optimization is essential.
How can I reduce the file size of images without losing quality?
You can shrink image file sizes while maintaining quality through lossless compression, which eliminates unnecessary data from image files without affecting visual appearance. Applications like Adobe Photoshop or web-based image optimization tools provide lossless compression options.