Is your site feeling slow? When it comes to your website’s performance, there are many variables that can cause your site to load & react slowly. One common (and easy to fix) cause could be your banner or hero images.
Banner images are the large images that appear as the background or above the fold of your page. When it comes to performance drops on your website, it’s important to reflect on any new images you may have uploaded to your banner recently. While images are a key part of making our websites attractive, unoptimized banner can easily slow down your site.
Unoptimized banner images tend to be images that are much too large for your site to load quickly. While you may think that your images need to be large to maintain their visual appeal, most images can be both smaller and compressed and still look good! In order to tell if your banner images are too big, you need to take a look at your banner’s dimensions, file size, and image format type.
Banner Dimensions
Banner dimensions are the physical size of your banner image. In most cases, banner dimensions are measured in pixels since your banner will be appearing on a screen. Take a look at the banner image you uploaded and analyze its properties: how big is it? While there isn’t a set dimension that works for all websites, the largest size your banner appears as on a screen is the largest dimension it needs to be. Open your website on a desktop screen and use the Inspector Tool to measure how large it is in pixels. If your original banner image is much bigger than the max dimensions your banner appears on your site, your banner is too big.
Banner File Size
Your banner’s file size is the amount of space your image takes up on your server. File sizes are measured in Bytes (B), Kilobytes (KB), Megabytes (MB), Gigabytes (GB), and so forth. When it comes to your banner images, it is best to keep your banner images under 1 MB, if not closer to 150 KB. The larger your image file size is, the harder it is for your server to send it over to a customer’s screen. If you look at the properties of your banner image and find that it is well over a few Megabytes, your banner image is much too big.
Banner Image Format
The image type of your banner images can play a large role in how big it is in terms of its file size. Popular image formats you may see banners exported in are PNG, JPEG, GIF, and WebP. Each image type has its advantages and disadvantages. PNGs and GIFs, for example, tend to be much larger than JPEGs and WebPs. JPEGs, however, can’t be used to create transparent images while PNGs can. In the past, WebPs were not supported by certain browsers, which made it risky to use. It is important to consider what your banner image looks like & where it will appear when determining its image format. Overall, when in doubt, the JPEG image format is a small, but quality image format to use for your banner images.
Want to Learn More?
Optimizing your banner images can require using image editing tools. Download our free Banner Optimization Guide to learn how you can make your banner images smaller with Photoshop or GIMP!
