Complete Guide of Image Sizes for every website

Are you looking for a guide to help you out on the exact measurements you can use on the images for your website? Are you confused by the amount of information out there on image optimization, image sizing, format guides, etc?

Well, you are not alone. Saving images for a website has always been a bit of a mystery for many. Uploading images that are heavy (original image sizing at 5000px width, unoptimized images) will not only create issues with the user experience on your site, but it will also affect your SEO strategy since website speed is a critical user-experience and SEO factor (affecting bounce rates and rankings), and image sizes often are the overwhelming performance bottleneck.

But don’t worry, we are here for you. In this article, we are going to present you with the ultimate guide for image size and formats for your website.

Why are image sizes and site performance important?

Unoptimized images slow down websites, which create a bad user experience, which then lowers the chances to rank in Google searches. When you optimize images, it positively impacts your web performance, reducing load time and increasing website speed. Even if it's just a few milliseconds, that could be the difference between your website either gaining or losing countless website leads and sales. See the pattern here?

Basically, saving your images with appropriate dimensions and optimizing images for the web can help with speed, user experience, SEO rankings, sales and overall quality.

Tip: if you’re worried about user experience, here is an article on why Piio improves the digital experience to millions of users.

Best image sizes for websites:

Before listing the best image sizes and formats for your website, you need to start with format, size and resolution.

Image file format:

The most common formats are JPG (JPEG), GIF or PNG files.

JPG: this file type is good for saving images with millions of colors, including photographs and graphics with a variety of shades and gradients.
GIF: this one is best for line art/cartoon-like drawings.
PNG: although this is also an acceptable format, it is not needed in most cases. PNG is a higher quality and larger file than JPEG. It also supports transparent backgrounds commonly used for logos.

It’s important to note that regardless of these formats, you should never upload high-resolution images to your site just for display purposes. This is because even if your website is only displaying them at a smaller size, the URL for the original images can often be reverse-engineered from the source code, and your images can get stolen. Plus, large images take a lot more time to upload and are slower to optimize.

File sizes:

File size is associated with the number of bytes. A 10MB photo is too large; a 250KB photo is much more reasonable. If your file size is too big, it’s an indicator that either your image dimensions are too large or the resolution is too high. That means, we need to optimize them.

You need to choose the optimal file size based on how you are using the image:

For banners or header images, a file size up to 60KB is acceptable.
For high end photographs, try to keep them to within 100KB at an absolute maximum.

Resolution:

The resolution is measured in dots per inch (DPI). Most computer monitors display images at 72 dpi or 92 dpi, so anything higher than that is overkill and makes your image unnecessarily large. When a design program has the option to “save for web”, it means saving it at a low, web-friendly resolution. The more dpi, the more your website will slow down.

Image size:

By “image size”, we’re referring to the image pixel dimensions (width and height in pixels), or the image file size (KB or MB). We’re not referring to the image size in inches/cm or to the image DPI. On the web, DPI is irrelevant and only pixel dimensions matter! The Image size is related to pixels. The more pixels, the more quality.

Here is a list of image sizes:

Left column:

No images: the left column is used for navigation.

Main body:

Wide slide carousel and Regular slide carousel (Drupal) true dimensions: 892px x 408px (Drupal resizes for smaller carousel)
Super-wide image (Drupal): 900px wide [MAX]
Wide image: 600px wide [MAX]
Images floated in main body with wrapped text: 150px – 300px wide
Thumbnails: 100px square
Headshots used for staff directories, etc: 220px square

Right Column:

250px – 300 px wide

However, if you don’t want to worry about image sizing, you can count on Piio for that. They will not only optimize them, but they’ll optimize your website's user experience and performance. Piio can reduce data transfer to end users up to 95% and increase page speed by 3x!

So, what size should my images be for the web?

Now that you know the different image file formats, file sizes, image sizes, etc., here’s a few rules of thumb to keep in mind:

Optimal file size: large images or full-screen background images should be no more than 1 MB.
Most other small web graphics can be 300 KB or less.
If you’re using a full-screen background, upload an image that’s 2000 pixels wide.
Resolution for web images: if you have the option, always “Save for web” which will give your image a web-friendly resolution.
You can make a large image smaller, but it’s very hard to make a small image bigger. It will look fuzzy and pixelated.

For optimal website performance, images should be as large as needed to fill their “containers”, based on your page layout. For example, slideshow images are usually wider; blog images are medium-sized (at a width equal to the page width minus the sidebar); thumbnails are smaller, etc. It’s crucial to determine image dimensions first to then know how wide your content area is on your site.

Here are a few examples and their measurements:

Image size for fullscreen cover images:

If you want an image to cover the screen from top to bottom and from side to side no matter what the screen size is, you should use an image that is at least 1500×740 if you want to see detail. 1900×900 is even safer and you may like to go as large as 2500×1200 if you want to achieve high detail on really large screens.

However, if you are focusing on foregrounded content and don’t need the cover image to be much more than an impressionistic background, you can get away with smaller images too!

Also, it’s a good idea to make smaller versions of your cover images for mobile devices (1024×1024 are pretty safe minimum dimensions for all mobile devices) and you might consider making different images for portrait and landscape views if there is no way to get your image to look good in both orientations.

If your website is going to have a banner image that is less than half the screen height (allowing visitors to see content below the banner as soon as they open your website), you might want to make it a maximum height of about 400px as it is common for a computer screen to have less than 680px of height available to view the page content.

Image sizes for blog content:

These ones are easy to figure out (at least the maximum size you need) because you just need to know the maximum width of the content area for your blog content. Just make sure they are all the same width (recommended 1500px), regardless if they are horizontal or vertical.

Image size for slideshow galleries:

If you are preparing images for your slideshow galleries, make sure they are all the same height (recommended 1500px), regardless if they are horizontal or vertical. Considering that the height of the space available for viewing your web content on most computer screens is less than 680px, you will do well to make your slideshow or portfolio main images 600px-high or less. Remember that within your window you may have other information you want to be on display, and that may include the site header and navigation and it may also include image captions and prev/next navigation.

Image sizes for thumbnails:

100px high used to be the default size for thumbnails, but what can happen with this size is that the user can feel they see what your image is and not click to view the larger size because the thumbnails don’t quite show enough of the detail to interest them, when the larger version of the image can be something they would like.

Maybe use larger images (150-200px high) for thumbnails or, on the other hand, thumbnails so small that they serve only to allow the user to identify an image they want to go back to.

What if the image is too big for the website?

If you have photos that are several megabytes large you could resize the image, reduce the resolution or compress the image with a free program! Furthermore, if you take the time to reduce your images before you upload them, the uploading process will be faster. Especially if you have a lot of images. 1000-1500px high is about as large as you will need any images to be and you will often be fine with images that are ≤800px high for slideshows and other web content.

The most important thing is to only use images that are as large as you want or slightly larger. Don’t ever upload an image at a smaller size than that at which you want to display it.

Options that influence image size:

Besides everything we just saw, there are other things that can influence the size of an image that are worth noting. These are site width, page template, column width, sidebars or dual sidebars, margins and individual element spacing, etc.

In conclusion,

Getting images right is a crucial part of a visually interesting and fast loading website. And although it may seem tedious, the benefits to be had are numerous, and it’s all part of the fun of building and maintaining a website!

Plus, going through these steps will make your images look better, help your website load faster, and ultimately benefit your SEO.

But, if you do not have the timer or simply don’t want to spend your time worrying about image sizing, leave the hard work to Piio and they’ll optimize your images and make your website a better place for your users :)