Best Website Image Sizes for Optimal Performance
While content overall is the cornerstone of a well-constructed website, compelling images are what usually draw people in in the first place. Not only do they grab attention, but they motivate visitors to spend more time on your site and interact with your content.
However, the battle to balance an impressive visual website with a seamless and speedy user experience (UX) is very real. Your images could be creating a performance bottleneck that is negatively impacting your website’s search engine ranking.
Let’s take a closer look at why this may be happening and what you can do to optimize your website’s images and graphics.
Internet Users Demand Near Instantaneous Load Times
The loading speed of a website is a critical factor to both a satisfying user experience for your audience and your SEO rankings and bounce rates. Delays of longer than 5 seconds can cause as many as 90% of potential site visitors to lose interest and leave. That’s why Google favors speedier sites, not just for desktop searches but for mobile ones as well.
One of the biggest causes behind slow website loading times is overly large images. If you are looking to improve your website’s performance and UX, it is highly recommended to look into your image sizes. Before streamlining to the extreme by removing all pictures from your site, try optimizing your images by altering their dimensions to make file sizes (and therefore, their loading times) smaller.
What Are The Best Image Sizes For Your Website?
For photos, JPG (or JPEG) file types are generally better as they tend to be smaller files and therefore faster to load. However, you’ll probably want to go with PNG or SVG formats for logos, illustrations, and any other images that require precise, crisp lines.
Sticking to this golden rule will help boost load times, as well as keep image file sizes below 100 KB if you can (although some flexibility might be needed when it comes to hero images, for instance).
Your image dimensions, as well as the picture resolution, will also factor into this. You want to try and strike an effective balance between loading times and image quality. To do this, you will need to consider what the image is being used for on the site.
Full-Width Images and Headers
If you are using an image that covers the entire background, then a ratio of 16:9 is best. 1920 pixels wide and 1080 pixels high is a good compromise for this. When it comes to headers, 1024 pixels wide is sufficient for the image to render well both on mobile devices and desktops.
Thumbnail Gallery Images and Logos
Logos do well at 250 pixels wide and 100 pixels high. They definitely should be no larger than 320 pixels wide and 100 pixels high. However, if your website has a retina logo option, you will need to double these numbers. Thumbnails can be 165 by 165 pixels for best results.
Blog, Content, and Other Static Images
Images that live within your website’s content such as on a blog page can be 1500 pixels wide for horizontal shots and 1000 pixels wide for vertical ones. 1500 pixels also works well for slideshow galleries. Here the sizing should remain consistent throughout regardless of whether the images are horizontal or vertical.
Compressing images is another great way to reduce the file size without impacting the image quality too much. There are many free tools online for doing just this, such as JPEG Optimizer and Optimizilla.
Optimizing your images for a better UX for your website visitors is a pretty straightforward process. However, we understand that you might be left confused by all those numbers.
If you’re looking for support in selecting the correct dimensions for your website images, get in touch. We are happy to discuss the specifics or provide details on the more general cost of building a website. Our expert marketing team is here to help you optimize your website’s user experience so you can enjoy business growth and improved performance like never before. Contact us for a free audit today.
