Website image size guidelines: The best image sizes for your website
When was the last time you scrolled through a web page with blurry images or pictures that didn’t load?
You probably don’t remember, as you clicked away immediately and looked for a better website instead.
Newsflash: Your visitors will do the same!
Whenever we see a page that loads so slowly with blurry or even broken images, we might just click away.
There are so many websites in the search results that it would be easy to look for another that loads faster and shows you the content you need immediately.
This is why it’s so important to optimize your website’s images.
Images on your website can take a lot of bandwidth and take a while to load, especially if you are using the wrong file format or haven’t compressed the photos down to a smaller file size.
But you also can’t get rid of images from your website just to make it load faster.
People need images and visuals in order to engage with a website better.
Imagine talking about a product or your brand story without images of the product or even a photo of your brand’s logo.
What would the Deer Designer website even look like if we just kept talking about our design expertise but didn’t show you our design skills?
Keep reading, and I’ll show you the right image sizes to use for your website and give you some tips on how to make sure your stunning website loads fast, not only for desktops but also for mobile devices.
Why choosing the right image sizes for your website matters
First, let’s get into the other reasons why you’d want to take the time to make sure that you are using the right image sizes for your website.
Using the recommended image sizes helps improve user experience
Optimized images help create a seamless user experience.
Not only is your site loading quickly, but the images also appear crisp and clear no matter what device the users are on.
Using the right image sizes also makes sure that users are getting enough details on your images without having to zoom in or scroll down just to see the entire image or read your text.
It’s not something that people often consider, but if you visit a site and the text on their image is too big or too small for you to read, it will give the impression that the site was made by an amateur.
You might not even bother to zoom in or out on the page. You would just leave.
Having the right image sizes enhances the overall browsing experience, encouraging visitors to stay longer and engage more with your content.
Appropriate image file sizes help your site load faster
Your website speed matters big time!
Several site metrics are affected by your site’s loading speed, like:
Bounce rate
This is the number of people who leave your site without taking any action.
They usually leave your site within 10 seconds after deciding that your site has nothing of value for them or is not engaging them enough to stay.
Don’t confuse this with the exit rate, which is the percentage of sessions that end on a particular page on your site.
These users usually interact a bit with your site before leaving.
If your site doesn’t load fast enough, people might just bounce instead of waiting.
Search engine rankings
Yes, your loading speed affects how search engines rank your content. This not only frustrates users but also negatively impacts your site’s search engine ranking.
It’s one of the many factors they consider before recommending your site to people searching for related products and services.
Slow websites create unengaged users and poor user experiences, so search engines often avoid ranking these sites higher.
Improve website performance through website images that use less bandwidth
Optimized images keep the file size smaller and use less bandwidth.
This is great for your audiences on mobile or with limited data plans.
By reducing the file size of your images, you make your website more accessible to users with slower internet connections or data limitations.
But also, this use of optimized images helps you as the site owner.
You can reduce the cost of web hosting, especially if your plan charges based on the amount of data transferred.
Best practices to optimize image sizes for websites
Here are some ways you can optimize your images for websites:
Use the right image format for your site.
Selecting the appropriate image file format when you render or upload images can make a big difference in file size and quality.
Here are some of the different image file types used for website images:
GIF
GIFs are often used as they are a lossless file format.
This means that it preserves all the file’s original data, unlike a lossy format that throws away some data for the files to be as small as possible.
It has animation abilities, which makes it ideal for short explanatory videos.
As it constantly retains the information in the file, it’s limited to 256 colors.
This format creates heavy-size images and is only good for logos, flat-color graphics, and illustrations without much gradient.
It’s best to only use a GIF if it’s an animation/motion graphic.
Otherwise, keep reading…
PNG
Similar to the GIF format, this format is also lossless and can support up to 256 colors. However, it doesn’t have the GIF’s animation abilities.
This format produces higher-quality images but with larger file sizes.
Now, if used correctly (mostly for vectors, not pictures), the file size can be significantly smaller than a JPG.
And if you have any kind of transparency in your illustrations, this is definitely the file type you need.
JPEG or JPG
This format offers a striking balance between image quality and file size.
Unlike the first two large file sizes, it’s a lossy format, so it compresses images to the smallest file size.
It’s also able to produce better colors, depending on how compressed it is.
This format is best for photographs and images with many colors.
Compress your images for web
When we say compression for images, it means reducing the file size.
The goal is to compress the image without significantly affecting its quality.
If you compress an image too much (high compression rate), it might lose too much data and become low quality.
The goal is a medium compression rate, so you have a good balance of quality and image size.
However, if you want files to still be crisp, you might go for a low compression rate.
Use responsive image displays
Responsive images adjust to different screen sizes, ensuring that the right image size is loaded based on the user’s device.
This can be achieved using CSS.
It might cost you a bit more bandwidth than the other methods, but it helps make sure that no matter if your users are on a desktop or using their phones, they will be given the best possible version of the images.
The best image size guidelines when designing for desktop sites
When you’re designing for a desktop site, you will need the following images in their recommended sizes:
| Types of images | Recommended dimensions (w x h) | Recommended aspect ratio | Recommended file size |
|---|---|---|---|
| Logo | 100 x 100 (100 x 250 for rectangular) pixels | 1:1 | 1MB |
| Background images | 1920 x 1080 pixels | 16:9 | 20 MB |
| Hero images | 1280 – 2500 x 720 – 900 pixels | 16:9 | 10 MB |
| Website banner images (square) | 250 x 250 pixels | 1:1 | 150 KB |
| Website banner images (vertical) | 160 x 600 pixels (may vary on the ad platform) | varies depending on the ad platform | 150 KB |
| Blog images | 1200 x 800 pixels | 3:2 | 3 MB |
Logos
This is going to be the smallest image on the web (other than the favicon).
You can go for either rectangular or square aspect ratios, but a square 1:1 ratio is usually easier and more versatile to use.
This is best kept at less than 1 MB and within 100 pixels in height and 250 pixels max for the width.
Background images
These images are the opposite of the logo, as they are going to be the largest images on your website.
This is the image that fills the screen, no matter what device you are on.
The aspect ratio for desktop backgrounds is 16:9, and this is best kept at less than 20 MB for better loading speed.
You can go for 1920 x 1080 pixels for the dimensions.
Hero images
The hero image creates the first impression of your site.
They’re the first photo, graphic, or video people will see, so it has to be eye-catching enough to encourage them to scroll and interact with your site.
Hero images are similar to the background images in width, but they can also be about half the size in height.
It’s also best to keep your hero images within 10 MB.
The width can range from 1280 to 2500 pixels, and the height can range from 720 to 900 pixels.
Website banner images
Banner images can come in different shapes and sizes, depending on where you want to put them on your website.
A lot of websites opt for website ad banner sizes with a 1:1 ratio of 250 pixels in height and width.
For vertical banners, you can also go for the rectangular 160 x 600 pixels.
The file size may vary for each ad platform, but it is best to keep it at 150 KB or less for the best results.
Blog images
Blog images are also used as thumbnails, not only on your site but also when your blog posts are shared.
This is why you should keep them at a 3:2 aspect ratio.
For the size, you can have them within 1200 pixels by 800 pixels.
Using a lot of blog images can slow down your site, so it’s best to keep it within 3 MB.
The best image size for websites on mobile
Mobile screens are smaller, so images need to be appropriately scaled to maintain quality without wasting bandwidth.
However, you don’t have to worry about specific image sizes, as most responsive website builders will automatically resize your images to fit best on mobile devices.
Images with the 1:1 aspect ratio often display well on mobile devices, while images with the 16:9 or 3:2 ratio may be cropped depending on your resize setting.
To make sure your images still fit your image sizes for mobile, you can set safe zones and keep the subject or text within the middle to avoid getting cropped.
Image optimization tools you can use
Are all the image dimensions, aspect ratios, and file sizes starting to confuse you?
Don’t worry, there are various image optimization tools you can use to make it easier to resize your images, such as:
Adobe Photoshop
Photoshop offers advanced options for both resizing and compressing images.
There’s the convenient “Save for Web” feature to adjust image quality and file size.
Online image compression
There are various online tools, like TinyPNG, Image Resizer, and Img2Go, that allow you to compress images quickly and easily.
CMS Plugins
Content management systems (CMS) like WordPress offer plugins such as Smush and EWWW Image Optimizer that automatically compress and optimize images.
You just have to install the plugin on your WordPress site, and it will optimize your images without manual optimization.
Choosing the right image dimensions for your website
Optimizing image sizes for your website is a critical step in providing an excellent user experience across all devices.
By choosing the right file formats, compressing images, and using responsive designs, you can ensure that your visuals enhance your site’s performance and appeal.
Does it sound tiresome to adjust your image sizes and dimensions?
Let our professional designers at Deer Designer do the work!
Just send in your request, and we’ll make sure you’re using the right image resolutions while retaining high-quality images for both desktop and mobile.
Key takeaways
- The size of images on your website can affect your site’s loading speed and usability. Large images can take too long to load and take up more bandwidth.
- A slow website affects your bounce rate and rankings in search results.
- Optimizing your images helps make sure you are using a small file size without reducing the quality of the image.
- There are different file types for images for the web, such as GIFs, PNGs, and JPEGs. This format can affect the file size of images.
- When an image is compressed, you can reduce the file size of the image without losing quality.
- The image requirements of your website come in different dimensions and file sizes to ensure the clarity of the image and optimal site loading speeds.
- You don’t have to manually find out image sizes and resize images for your site. You can use tools to automate this process (or you can just hire our designers at Deer Designer to do it for you!).
