If you’re a blogger, chances are you’re uploading photographs to your site. In fact, it’s one of the most important aspects of content management for any blog! But, it also results in one of the most common questions we get asked: “How large should I be sizing my blog images?” And beyond being asked about it, we constantly see blogs without optimized images, or content uploaded at inconsistent sizes. So today, we wanted to share the definitive guide on how to size images for your blog!
Why does image size matter?
Well, for a few reasons:
- Images that are uploaded at full resolution or extremely large sizes may slow down your site load time. If you’re on a hosting plan that only offers limited resources for your site files, this can result in images taking for.ev.er. to load. This impacts the user experience (and can impact your S.E.O. negatively, too).
- Images uploaded at incorrect sizes might appear blurry to some users, depending on the type of computer or device they’re accessing your site from.
- Images uploaded at inconsistent sizing can make a blog look messy and unprofessional.
What to know about sizing images for your blog
Here’s the simple explanation for what size images should be on your blog: They should always be the full width of the post column (or widget, page column, image container, etc.), then doubled in size to accommodate Retina displays (more on this in a minute). If your blog posts are 800px wide, then all images should be uploaded at either 800px or 1600px (for Retina) to fill the space and look consistent. Have a widget on your sidebar that features an image 300px wide? Upload the image at 300px, or 600px for Retina displays.
Important! How you size images for your blog may not be the same on another person’s blog. So if you hear someone say, “My designer told me to size my images at 1328px,” or another blog friend tells you, “I always size at 1000px,” know that these dimensions may be specific to their site. They might also be inaccurate.
If you’re not sure about the dimensions of various containers on your blog, here are some ways to determine the correct sizing:
Ask the expert
If you worked with a designer for your site, you can ask them for the width of your blog post column to determine how large your images should be. For example, if the blog post (sometimes called .entry-content) column is 1000px in width, then images are rendered in 1000px in width as well.
Check our Theme Documentation guides
For EmPress themes, you can find a list of all blog post column widths (and any other image containers that are part of your theme) within your Theme Documentation PDF. Or, check out specifications in our Help Desk articles, over here.
Determine using Google Chrome
If you’re still not sure how large your blog post column is, you can actually figure it out using a handy tool in the Google Chrome browser. It’s called Inspect, and unbeknownst to most Chrome users, it’s been available to you all this time, for free. Here’s how it works:
How to use Chrome’s Inspect to determine your blog post column size:
- Visit your blog in the Google Chrome browser. Navigate to any post.
- Right click on a piece of text within the post, then select Inspect from the menu that appears.
- A window pane will load in your browser, revealing much of your blog’s code. Don’t worry — while you can see the code, looking at it or editing it here will NOT affect the live code of your site. Instead, Inspect is a tool developers use to, well, inspect code, play around with code settings, and lots of other things.
- Moving your mouse around the code elements in the Inspect pane will show you sizing features of various elements. Alternatively, right clicking on any item and selecting Inspect will highlight that area, and should display pixel dimension proportions.
The video below shows you how to use the above steps to determine your blog’s image sizes. We’ve used the <em>press blog theme as an example, but keep in mind that if your own blog design features different sized images on your Home Page versus your post page (i.e., when you click into a post), you may need different sized images for each. It’s all dependent on how your theme is built!
You’ll notice that as the user right clicks on elements on the blog and selects Inspect, a dark grey box appears showing the width. Similarly, as the user moves their cursor over different pieces in the code, those selections are highlighted and also reveal the dark grey box, again showing the dimensions. In all cases, you can see the width of this blog’s post column is 800px wide, meaning that images should be uploaded at 800px, or 1600px for Retina display. More on that ahead… Give this a try on your own blog and see what you can discover!
The big caveat about image sizing: Retina display!
You can learn even more about how Retina display impacts image sizing, but here’s the gist: some screens have a greater density of pixels, requiring you to upload your images at double the normal width, so that they look crisp and clear on Retina displays.
For example…
If your blog post width is 1000px, but a user is viewing it on an iMac desktop with 5k Retina display, their monitor has two times the pixel density of a regular monitor or laptop. Because the image you uploaded is 1000px in width, the image will look blurry, since on the Retina display, the same image container has a density of 2000 pixels across. Essentially, you’re not supplying enough pixels within the image you uploaded for it to render crisply on the Retina display. In fact, you’re only supplying half the required number of pixels.
So what does this all mean?
All this means is that ideally, you would upload ALL images to your site at double the container width, sometimes noted as @2x. This goes for images on your blog posts, information pages (like an About/Contact page), or images in your sidebar. Doing this ensures that images look crisp and clear for all users, regardless of the device they’re accessing your site from. Trust us when we say — if you’re not uploading images @2x and someone views your site from a Retina display computer, they can tell. Very much so.
This same application goes for any identity assets you might upload to your site. If you’re uploading a logo to your blog header, be sure to size it at double the normal dimensions, so that it looks crisp and clear (especially since it’s the first thing people will see and associate with your blog site!).
And, optimize file size
The tricky thing about doubling the width of all images based on the container size is that it can increase file size, which can increase load time. We recommend saving your images as JPGs, and using the Quality control settings in Photoshop (or another creative program) to reduce the overall file size. For example, if your default quality size is 12, images that are 2000px might result in HUGE file sizes — like 1MB or more. Reducing the same image to a JPG Quality of 5 could reduce the file size by 75%. Unfortunately, there’s no perfect formula for how much to reduce quality, as file size can be impacted by the original image, meta data associated with the image, and other factors. We recommend editing your image, then navigating to File > Save As, saving as a JPG, then playing with the Quality settings dialog box that pops up, until you get an appropriate file size. We aim for under 300kb, though 250kb and under is ideal. With larger graphics though, sometimes it’s just not possible.
Here’s a quick video showing you how to change the Quality control settings within Photoshop:
To recap…
Knowing how large to size images for your blog is simple!
- Determine the width of the image container at hand, be it for a post, a sidebar widget, or a page on your blog.
- Double the width to accommodate Retina displays. This is how large the image should be, in width. That’s it!
//
Have any questions? Still need help? Leave a comment below and we’ll do our best to answer your questions!
