Here’s an example of bad page load speeds.įrom here you can see the server has an overage load speed of 2.1 seconds to load the first image, and 4.1 seconds to load the largest image. In image SEO terms, this is called “contentful paint.” Smaller image sizes (mainly image file size) tend to load more quickly across devices. When you have large image sizes on your website, it takes longer for the server to load the page when a user arrives on it it. The repeat images are also unappealing, making for a bad user experience. If the owner of this website had opted to try fitting the small image to screen, it would be too blurry to see.

Here’s an example of what happens when you use a background image that’s too small to scale across a page (which results in “repeater” images used to fit the screen): Having the correct image size for each use case helps improve the user experience by being easier on the eye-without the need to zoom in for details or scroll to see a whole image. This means using the best image sizes on your webpage for each use case can help improve them all simultaneously. Poor choices in your image sizing can impact all three of these metrics, normally at the same time. Why is image size important for websites?įor websites, image size is important for three main reasons: user experience, page speed, and ranking. However, they’re used for the visually impaired via screen-reader software, so keep the attribute text short and concise. Image attribute: Image attributes (alt text or alt tag) are text-based and don’t really impact your website’s performance.

Smaller images (up to 2 megabytes in size) are better in most cases. Image size: The best overall (pixel) size of your images depends on your use case, e.g., background images need to be bigger than a blog post image.įile size: Anything bigger than 20 megabytes in size can dramatically impact your website speed. Any image smaller than that might get cut off or appear blurry if it needs to fill the browser width. Pixel width: 2500 pixels is perfect for stretching full-screen across a browser in most cases.

How to reduce image size in illustrator