Best Photo Size for a Food Blog

One of the most common questions we get from food bloggers is something along the lines of, “How big should the images on my site be?”

It’s not too surprising –– you know that phrase, “You eat with your eyes”? Great photos are an essential part of any successful food blog, so it makes sense that bloggers are concerned with making sure that the photos on their sites are on their sites are the right size for their posts, Google, and site speed.

Image size may seem like a simple enough topic, but it’s actually a bit more nuanced than you may think!

So let’s dive into the beautiful world of food photo sizing.

Why should you care about photo size?

Food blogs are typically pretty photo-heavy –– we want to show off the textures, colors, and experience of our recipes through the photos we add to our blog posts. Photos are great for readers, as they’ll know what to expect if they make the recipe, and you can easily share your photos on social media to help you get even more readers to your site.

That said, you want to make sure that your images aren’t too big or too small –– either case will create issues for your readers, your site speed, and search results.

And an important distinction before we unpack that, when we say “image size,” we’re talking about:

• The file size –– in kb (i.e. 700kb)
• The dimensions –– in pixels (i.e. 600px X 900px –– where the first number is the width and the second is the height)

Images that are too big

Let’s talk about images that are too big in file size first.

You know when your internet is slow and every site you try to visit takes for-ev-er to load? Super frustrating, right?

Your readers may have a slower internet connection than you, and if your image file size is too big, it’s going to require more resources to load when someone visits your site. Add in the other elements that are trying to load on your site –– like ads, your text, your theme, your colors, and your fonts –– and it can take a really long time to fully load your page!

47% of readers across the web expect a page to load in 2 seconds or less, and 40% of people leave a website that takes more than 3 seconds to load, so it’s incredibly important to do what you can in order to decrease your site loading times –– paying attention to image file size is an easy way to do that!

Now let’s talk about images that are too large dimension-wise.

The dimensions of your image can impact the file size of that image; if you’re exporting an image from your editing program that’s 3000px X 4500px, your file size will most likely be much larger than an image that’s exported at 1200px X 1800px.

Images that are too small

Lucky news: an image that has a small file size is actually a good thing. Faster is always better, and images that have small file sizes will load faster than those with larger file sizes.

Images that are exported with dimensions that are too small is the issue here. And to understand that, it’s important to first understand the content width of your blog posts.

When you think of a food blog post, it typically looks like this:

We have a menu bar on top, the content area on one side, and then a sidebar on the other.

That orange chunk –– the content area –– is what we’re talking about right now. That’s where your post, your recipe, and you photos go. Here’s what that looks like on our food blog, Pinch of Yum:

Content area widths differ from theme to theme, but most content widths are anywhere from 600px – 800px, meaning that there are that many pixels to fill width-wise in your blog post.

Typically, you’ll want images to fill that content area, so if your image dimensions are too small, it’ll leave some unwanted white space around your photo.

Not only that, but a lot of screens these days are 4K or retina-ready, meaning that they show twice as many pixels per pixel on the screen in order to deliver crisp, high-quality photos to their users.

If you upload an image that’s only the width of your content area or lower, your image will appear grainy, blurry, and unfocused on those retina screens because they’re expecting more pixels (or a larger image) in that area on the screen.

So we’re after the “Goldilocks” of a food photo –– one that’s not so big that it slows down our sites, but not too small so it still looks nice and crisp.

WordPress and Image srcset

If you’re a WordPress user, your theme will most likely utilize an image attribute called srcset, which helps make your images more responsive.

When you upload an image to WordPress, your site actually creates a bunch of different-sized versions of that image (called thumbnails) for use in different places in your theme.

srcset helps serve the correct image size for the device your reader is using. If your reader is reading your post on an iPhone, there’s no need for your website to serve a giant 1200px image when the screen is only 1125px wide (and when your content width is much smaller than that!).

On Pinch of Yum, srcset creates versions of the same image for screens that are 1200px wide, 200px wide, 600px wide, 768px wide, 1024px wide, and 150px wide:

This is a handy feature that optimizes your images for different devices, but there are still a few different ways that you can optimize your images even further to ensure they load efficiently and still look great.

How big should your images be?

The short answer –– A good rule of thumb is:

• Your image size should be in the 200kb to 300kb range.
• Your images should be 1200px wide (and however tall to maintain the correct aspect ratio).

The longer answer –– There are a lot of different components that impact the size of your images.

First, you need to start out with great photos. If you’re trying to optimize an image that’s too dark or grainy to begin with, no amount of image optimization will make them better.

Want to take better food photos?

Check out this blog post with our 7 top tips for improving your photography skills!

Once you have a great photo, it’s time to edit. When you’re editing your photos in Photoshop, Lightroom, or another editing software, there are a few different ways you can minimize the file size and optimize the dimensions of your images:

1. Export your image as a JPG

JPG photographs are usually a bit smaller than their PNG cousins, so you’re already reducing your file size by exporting all of your images in this file type!

Nerd Note 🤓: JPG is great for photos, and PNG is great for text, line art, drawings, and most logos.

2. Resize your photo to have a width of 1200px

When exporting your photo, you can set the export width to our recommended 1200px, and keep the height “locked” so that it’ll automatically adjust based on the aspect ratio of your image.

If you’re editing an image that’s 3000px X 4500px and you set the export width to 1200px, your editing program can automatically adjust the height to have the same aspect ratio as the original image, 2:3. So your final exported image will be 1200px X 1800px.

3. Adjust the quality setting

Not only can you adjust the height and width of your image, you can also adjust the export quality.

If your export quality is at 100%, that image will export at the largest image size it can for the image’s dimensions. It’ll also be the most crisp image you can export from your editing software.

That said, you can reduce the export quality to make your file size a bit smaller. Of course, reducing the export quality too much may have a negative impact on the look of your image, but you may find that there isn’t a huge visual difference between exporting the image at 70% quality and 100% quality.

We recommend experimenting here and seeing what works for your photo style. Once you find a quality that works for your style, you typically won’t need to change it moving forward.

4. Keep an eye on the file size

After your image is exported with 1200px width and at a decreased quality, check the file size. Is it in the 200kb to 300kb range?

It may not be! And that’s because whatever is in the image itself can also impact the file size.

If your photo has a ton of texture and detail, it might need to be exported at a higher quality in order to look its best. And as we know, higher quality = larger file size.

So the tl;dr here is to find a quality setting that results in files sizes in the 200kb to 300kb range, as it’ll work for most of your photos, but definitely keep photo quality in mind and adjust as necessary in those one-off instances.

5. Use a compression plugin on your site

Last but not least, you can compress your images after they’ve been optimized! We like, use, and recommend a plugin called ShortPixel for that.

There are two really compelling reasons to use a compression plugin on your site:

1. They use custom algorithms that help reduce the image size significantly more than the ways we chatted about above.
2. They optimize all of the thumbnails that WordPress automatically generates (aka. those other sizes of the same image!).

If you’re a Food Blogger Pro member, you can head on over to our course that walks you through setting up and using this plugin.

Putting it All Together

Now, I know you may be saying, “Okay, Alexa, this is all fine and dandy. But you’ve just given me a lot of information to digest, and I need a quick checklist to help me make it all happen!”

Your wish is my command. Download this free PDF and keep it handy whenever you’re editing and uploading images for your blog posts!

Now we’re excited to hear from you: Is there anything that surprised you about image sizing? Anything you still have a question about? Let us know in the comments below!