Proper Blog Image Size

With so many different display sizes for web browsers today — from laptops to tablets to smartphones — choosing the right images for your personal blog is crucial. Since every website has unique dimensions, there isn't a catch-all blog image size, but there is a general range worth keeping in mind when prepping images for a website.

Need images for your project? Shutterstock’s impressive collection of more than 70 million images can help! See what our library has to offer.

Below, we've outlined a few essential steps that every serious blogger should take before uploading a photo or illustration:  

  1. Check the Current Image Size: First, we recommend selecting the image file in Mac Finder or Windows Explorer. This will provide basic information about the image's dimensions and resolution, which is typically measured in pixels. In general, you don't want the image to be wider than your website's column width, because otherwise it will look squashed. 

  2. Consider Your Blog Settings: Remember, when uploading an image to a WordPress account, the blog platform will create a full-sized version, a medium-sized version (300px wide) and a thumbnail (150px). These are the default settings, and generally you should keep images within the confines of your blog content area. For example, if your area is 500 pixels wide, it's not necessary to upload images that are larger than 500px. Otherwise, they will just be shrunk down to fit the space.   

  3. Use Image Compression: When saving an edited JPEG in Adobe Photoshop or Mac Preview, it's a good idea to select an "80%" quality setting, or thereabouts. This will compress the image by 20%, which is usually a happy medium between file size and quality. If blog speed is more important to you than image clarity, than you may want to choose a lower quality setting.

  4. Pixels Determine File Size: Ultimately, when determining the ideal blog image size, you should keep in mind that pixel width is the deciding factor for actual file size. No matter what the PPI (pixels-per-inch) is, an image 500 pixels wide and 500 pixels high will have 250,000 pixels overall. This will take longer to load than a 400 x 400px image, even if the PPI is lower on the 500px version.

  • Was this article helpful?

Can’t find what you’re looking for?