Having the right size images on your website is essential to improving page speed and providing your visitors with a positive user experience. That’s why we’ve put together a few tips to help you figure out what size your images should be on your website.
First, let’s break down what we mean by image size. There are actually three factors that make up an image’s size:
- File size: This is the number of bytes a file takes up on your hard drive. For example, an image that’s 15 megabytes is huge and can slow your website down. If your file is big, your image dimensions may be too large or the resolution may be too high.
- Image size: This refers to the dimensions of your image in pixels. For example, a typical image on a website might be 795×300 pixels.
- Resolution: This refers to the quality of an image, which is measured in dots per inch (dpi). While a printer may need images to be over 300dpi, most computer monitors display 72dpi or 92dpi. Images at a higher resolution aren’t necessary for display on a website and will just take up space and slow down your site.
Size your images no wider than your page
As a general rule of thumb, your images should not be any wider than your page. For example, if your page is 690 pixels wide, you want your image to also be 690 pixels. When you upload an image to WordPress, it automatically creates three versions of the image: a large version, a medium version, and a thumbnail, so those three options will be available to you without additional resizing.
Don’t scale your photos too small and try to re-enlarge them
You can make a large image smaller, but it’s much more difficult to make a small image larger. If you try to enlarge a smaller photo on your website, you will end up with a blurry or pixelated image. The same goes for adding a small image to your website when the container size for that image is larger than the dimensions of the image. If you are filling the container with the small image, your image will turn out blurry as the image is being stretched to fit the image container.
Check your screen resolution data in Google Analytics
There are multiple types of data you can view to see how users are browsing your site. For example, you can view client screen resolution data in Google Analytics by clicking on Audience, then Technology, and finally Browser & OS.
Make sure your website is compatible with the types of devices and browsers your visitors are using
You can also view the different browsers and operating systems that your visitors use to browse your site. This information is especially useful building, redesigning or optimizing your website.
To check the In your Google Chrome browser, go to your website and click on Customize & control Google Chrome (Settings). Then click on More Tools, Developer Tools, and Toggle Device Toolbar. Then you will be able to view your page as it looks on a variety of devices, like tablets and different types of smartphones.
Know the difference between image optimization and image reduction
Both optimization and reduction are useful for improving the SEO on your website and making sure your page loads quickly and completely.
JPEGMini is a photo optimization tool that allows you to reduce the file size of your images up to 80% while preserving full resolution and quality. That means faster-loading images, which equals a better user experience and can also improve your search engine rankings.
ShortPixel is a WordPress plugin that can help reduce your image size by as much as 90%. This translates to better SEO, higher search rankings, and more traffic to your website, as well as fewer visitors bouncing.
ShortPixel automatically optimizes your images when you upload them to WordPress, saving you time and eliminating a step in your blog posting process. That’s one less item on your to-do list!
Be consistent with size
While header images will obviously be larger, it’s a good idea to keep the rest of the images fairly consistent in size on your website. A lot of different size images can make your site look messy and less professional.
For example, if you are displaying an image gallery of a recent session as a blog post on your site and each one of the images are nested in a 960px wide container, then all of the images for that particular container should be set to 960px wide.
Where to go from here
When determining the right size image you need, it’s important to keep your customers in mind. Whether you are creating a new site, redesigning an old site or optimizing your site for search engines (SEO), you should always look to the data you’ve collected about your visitors to help make design decisions for your website.
If any of the information sounds overwhelming or you don’t have time to optimize your images, you can always hire an SEO expert or digital marketing agency who offers Image Optimization services. Schedule a Free SEO Audit Consultation with one of our team members to see how we can help you improve your website rankings, optimize your images and decrease your page load time.