{"id":1836,"date":"2023-01-31T07:23:06","date_gmt":"2023-01-31T07:23:06","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=1836"},"modified":"2024-03-07T11:14:25","modified_gmt":"2024-03-07T11:14:25","slug":"best-image-sizes","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/best-image-sizes\/","title":{"rendered":"The Best Image Sizes for Your Website"},"content":{"rendered":"\n

Do you want to know the right image sizes for your website? In this article, we explain why using properly sized images is important and what are the best dimensions for your WordPress site (including on mobile). You\u2019ll also get a bonus showing how a plugin like Imagify can help you in your image optimization journey. <\/p>\n\n\n\n

Let\u2019s dive in.<\/p>\n\n\n\n

Why Choosing The Right Image Size Is Important<\/h2>\n\n\n\n

Having images on your website that fit all screen sizes is essential for creating eye-catchy pages and ranking well in search engine results. However, the size of your images matters: if they are too large, it may impact your site’s performance; if they are too tiny, you risk creating a bad user experience.<\/p>\n\n\n\n

\"Right
Right image size vs wrong image size – Source: Imagify<\/a>
<\/figcaption><\/figure>\n\n\n\n

What Does Image Size Mean?<\/h3>\n\n\n\n

The term image size refers to the height and width of an image measured in pixels.<\/p>\n\n\n\n

A pixel, or picture element, is a single point in an image made up of a set of points. The number of points present in the image determines its definition or clarity.<\/p>\n\n\n\n

\ud83d\udcd6Glossary:<\/strong>

Image size: <\/strong>the physical size and resolution of an image measured in pixels (e.g.: 800x600px).
File size: <\/strong>the amount of space (in bytes) taken by an image on a memory card or your computer.
Image quality: <\/strong>how much compression is used to store the file information.
Image resolution<\/strong>: the number of pixels per unit of length in an image measured in pixels per inch (ppi).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Benefits of Choosing the Best Image Size<\/h2>\n\n\n\n

Having the best image size improves performance, makes you rank better on Google, boosts the user experience, and ultimately increases your conversions. Let\u2019s go over each of the benefits:<\/p>\n\n\n\n

1. Optimize Performance<\/h3>\n\n\n\n

Lighthouse recommends properly size images to improve your website’s loading times on desktop and mobile. Serving optimized images on mobile<\/a> will save cellular data and boost page speed.<\/p>\n\n\n\n

\"Lighthouse
Lighthouse recommends properly size images to improve load time – Source: ChromeDev<\/a><\/figcaption><\/figure>\n\n\n\n

That is why you should opt for an image size that won\u2019t affect your page weight too much. In our example below, images constitute 18% of the total page request, and half of the page size is occupied by images! With some optimization, you could easily reduce the space taken by images and improve your loading time. <\/p>\n\n\n\n

\"Slow
Slow performance and large page size when using unoptimized images – Source: GTmetrix<\/a>
<\/figcaption><\/figure>\n\n\n\n
Read more about optimizing your images to pass the PageSpeed Insights audit.<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

2. Improve SEO Visibility & Traffic<\/h3>\n\n\n\n

Images need to be optimized and served at the right size to improve your ranking on search engines (especially on images)results. According to Moz, almost 27% of searches in the US are made through Google images:<\/p>\n\n\n\n

\"Google
Google Images search – Source: Moz
<\/figcaption><\/figure>\n\n\n\n

Google penalizes slow websites, so if you want to make it in the top results, you need to have image file sizes as small as possible (without impacting too much the quality). <\/p>\n\n\n\n

3. Enhance User Experience<\/h3>\n\n\n\n

Images should not be larger than your page layout on mobile, tablet, and desktop if you want to offer a great user experience on multi-devices. The browser will resize the image to fit its container, but it still has to download the full HD file from the server. If the image is not sized properly, it will take up bandwidth and increase the loading time, resulting in a poor user experience. <\/p>\n\n\n\n

4. Increase Conversions<\/h3>\n\n\n\n

Conversions are directly correlated with page speed and user experience. As an online shopper yourself, you may leave or even not trust a slow website with blurred images. On the contrary, 87.6% of shoppers are more likely to buy on a website with clear pictures<\/strong>, meaning with a good size without compromising on the quality. <\/p>\n\n\n\n

\"\"
Online shoppers\u2019 purchase motivation \u2013 Source: marketingcharts.com<\/a>
<\/figcaption><\/figure>\n\n\n\n

What Are The Best Image Sizes For Your Site?<\/h2>\n\n\n\n

Images should be sized to fill the container based on the layout of your website. In that section, we will give you some best practices to follow to serve the best image size for each part of your site. <\/p>\n\n\n\n

Mobile Site and Apps <\/h3>\n\n\n\n
\"Images
Images on mobile – Source: Expedia<\/a>
<\/figcaption><\/figure>\n\n\n\n

Dimensions: <\/strong>Minimum 800px <\/strong><\/p>\n\n\n\n

Aspect <\/strong>Ratio:<\/strong> 4:3 <\/p>\n\n\n\n

Pixel resolution: <\/strong>72 ppi<\/p>\n\n\n\n

Tips: <\/strong>You can go to 1200×630 pixels, but after that, some impact on the performance may be noticeable for your mobile users. Additionally, the best ratio for mobile devices banner images are 1:9, 1:1, 1:1, or 4:5. Knowing those ratios can be helpful when running ads. <\/p>\n\n\n\n

WordPress Blogs<\/h3>\n\n\n\n

WordPress blogging generally has two types of images: the blog post and the featured image.<\/p>\n\n\n\n