When adding images to your website, it’s important to think about the size of your images (measured in pixels). If you’re using a content management system like WordPress, it may automatically resize your images to the correct size. However, you have to be careful for a couple of reasons: Your CMS may crop your photos the wrong way, and it sizes the photo down each time the page loads. That means the CMS will load the large image and size it down as the page loads, which diminishes your page speed. Page speed is incredibly important — not only to the people that visit your website, but also to Google, who will reward websites that provide a positive user experience.
So what’s the best way to go about sizing your photos? First, find out what size the image needs to be. You can right click on an image on your website and open it in a new tab to find out what size it is, or talk to your developer to see what they recommend. Before adding new images to your website, be sure to resize them appropriately to ensure that they load quickly. And loading speed isn’t the only factor — resizing your images before you upload them also ensures that the images won’t take up too much storage space on your website, which can prevent you from having to pay for more server space.
If you’re in a hurry to add an image and can’t get the proper measurements, a good rule of thumb is to size it down to 1000 pixels (1000 pixels wide for horizontal images and 1000 pixels high for vertical images). That way, if the CMS still has to automatically resize the image, it’ll only be by a few hundred pixels rather than a few thousand pixels, and it won’t have as much of an impact on page speed.
Ready to resize an image? If you’re using a Mac, you can open the image in Preview and use the Tools tab to adjust the size and crop the image if necessary. You should keep the high resolution version and make a copy of it, then edit the copy to use on your website. If you’re using a PC, you can use the Photos app to resize your images (more on that here).
We don’t recommend using your CMS to resize your images. Instead, size your images appropriately before you upload them to ensure that your CMS will load the resized image rather than the full resolution image. Large images can take up a lot of space and add bulk to your website that doesn’t need to be there — and in turn, you’ll have to pay for more space.
Don’t worry — using the resized image instead of the high resolution won’t impact the quality of your photo on the web. However, if you’re using photos for print, you’ll need the high resolution version, so be sure to make copies of your images before you resize them.