Published: July 10, 2025
by Katie Hemmeter
Our web clients often ask about images, wondering what size works best, what makes for a good image, and how file size affects site performance. We’re here to walk you through file size and dimensions (pixel size), two of the most frequently asked about aspects of optimizing images for your website.
What File Size Should Images Be?
Image file size is important because a smaller file size means your page will load faster. Consider your audience. Will they be relying on public wifi or using the library? You want your website to load well for everyone, not just those with screaming fast fiber connections. The rule of thumb we follow is to aim for your file size to be under 300kb, with a better goal of closer to 100kb if possible. How? This may largely depend on your access to Adobe Photoshop or other editing software.
First, you can reduce the actual dimensions of your image. (We’ll talk about target pixel size in the next section.) But if you have an original photo from a smartphone or an analog camera, chances are the dimensions are far bigger than needed, and resizing the photo can do a lot for file size.
Second, you can reduce the quality of the image. We mostly use Photoshop for simple image resizing. Once we reduce the photo’s dimensions, we save it as a .webp file, which allows us to reduce the quality, which is usually not even noticeable. To reach a happy medium of quality and file size, we typically start with a quality of around 80 and then see what the file size is. If the image is still over 200kb, we try 70 on the quality slider. In just a few tries we can usually find a good balance of quality versus file size.
For those of you who just want a path through the action of resizing, try this:
In Photoshop: File > Save As > select WebP > choose Lossy image compression > set quality > hit Okay.
That should get you through most of the resizing you need to do to make sure your page’s image loading times aren’t driving people away.
What Pixel Size Do My Images Need to Be?
The biggest question we get is, “What size should this photo be?” Oftentimes the answer is, “I don’t know.” Here’s why: many times this question is in reference to background imagery, photos that are filling the background of a section. So, those background photos are different sizes depending on the device. Web content is dynamic—that means it moves around to fit different screens. The background image on a large desktop machine will likely be wider and shallower. That same image on a smartphone is going to be much narrower and taller.
So what does that mean for your photo size? Well, you aim for the biggest pixel size you can get without making the file size huge. This will allow for the image to dynamically adjust to the size of the device as needed. For most hero images, we start with 2,000 pixels wide, reduce the quality to about 70, and see what happens. Often this is sufficient to scale correctly, look nice, and not slow things to a crawl.
Check out the hero image over at stagecoachplayers.com. If we set the website to fill the screen on a 24” iMac, that hero image needs to stretch to fill 2240 pixels wide. In order to do that, it’s going to zoom in as much as it needs to so it fills that space. After adjusting the dimensions and quality, we were able to get that image to 2,500 pixels wide and 207kb, and we got a nice wide shot where we can see 10 performers.
If we look at the site on an iPhone 14 Pro Max, that same hero image is stretched to fill more vertical length, and we end up being able to see the main performer and only a few background performers.
Because of this, hero and background images must be large to start with. We cannot take a 600 pixel wide image and turn it into a hero shot. Stretching it will make it look like you don’t know what you’re doing, torture us, and look like hot garbage. Here’s an example:
If the image in question is not a background image, we can likely get a more defined pixel size. The best way to figure out what size you need is to look at existing images in your WordPress media library. If you are replacing a staff portrait, for example, find that photo in your media library, click on it, and take note of the dimensions. You should use those exact dimensions for direct replacements unless you want that person looking like they’re in a not-so-funhouse mirror.
If you are looking for a similarly sized image that is not a direct replacement, just have a look at another image in the media library that is similar in size to where you want to put your new image. Use that image’s dimensions to size your new image. It’s as easy as that.
We hope these short tutorials and examples guide you to better image usage on your website. If not for the sake of our eyes, then for your visitors and the general public, who might not be so helpful about it. Thanks for tuning in. If your website needs more help than even this blog can advise about, get in touch to schedule some time to chat about it. We’d love to help!