![]() ![]() Blog imageīlog images can also vary in type and size. Keeping the file size small helps improve your webpage speed, so a max of 5 megabytes would be ideal. 300 by 200 pixels or 970 by 90 pixels) are generally better. However, if you’re thinking about having a banner that’s not an ad, the rectangular options (e.g. ![]() Since Google Ads is one of the most popular services in this space, the folks at Google have a few recommendations for the best banner sizes:Īs you can see, there are plenty of options. The most typical type of website banners, however, are ads. Website bannerīanner images are a little trickier than other image types because they can be different sizes and shapes, depending on what you need to show the visitor. Here’s an example of a hero image in action:Īs you can see, BLK & Bold opted to go as wide as it can,with a shorter fixed-ratio image height. Max image height: between 720 pixels and 900 pixelsįile size: max of 10 MB, but ideally, smaller (without sacrificing quality) Max image width: between 1280 pixels and 2500 pixels This image type is a great option if you need to have more text on the screen right away without users having to scroll to see it. You might have mistaken a hero image for a background image before, but the key difference is they’re usually smaller in height-about half the size. It fills the screen, designed to stretch across no matter what device it’s viewed on. Here is a great example of a background image on an ecommerce website:īicycle retailer Cowboy lets its hero product take center stage with this image. The background image is the biggest image type you’ll see-as the name suggests it serves as the backdrop to your homepage (though you can also find them on main “pillar” pages). There are five main types of images you’ll see on a website: background images, hero images, banners, blog images, and logos. In this section, we’ll look at size requirements for specific types of images for the web, as they’re not all the same. Google uses a host of metrics within its algorithm to determine what goes on the front page of search results, and the quality of your images (and the user experience they generate) are part of the current algorithm. Website ranking can refer to the overall ranking of your website (e.g., domain rating), or how close to the first page (or top of the first page) of search results your webpage is when a user searches for specific terms. When half of customers abandon shopping carts if pages take more than 6 seconds to load, it’s important to get your page speeds up to avoid a high bounce rate. 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.
0 Comments
Leave a Reply. |