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 change image size in illustrator