Optimizing food photos for the web… not the most sexy of topics right? But a necessary one.
As a food blogger, your photos are probably the largest files you host on your website, and are therefore the biggest culprit in slowing down your loading time.
Did you know, most people will only wait 3 seconds for a website to load before losing interest and clicking somewhere else? In fact a delay of loading Amazon’s webpages by just one second could cost them $1.6 billion in sales. So even though as a food blogger you might not be trying to make Amazon’s level of sales, those few precious seconds can have a HUGE impact on your traffic, engagement, and income opportunities.
If you’re on the fence about making sure you’ve optimised your food photos – perhaps thinking the whole process is just boring or too much effort – I’m hoping this post will persuade you otherwise, and show you just how quick, easy and worth it it is to turn your food blog into a well oiled SEO machine!
There are two key parts to optimising your food photography for your website: optimising the photo files themselves, and all the attributes of the files.
When both are done well, they become a very powerful tool that can bring an exponential amount of traffic to your food blog.
This post is going to break down both parts into a handy checklist, giving you all the detail you need to get your food blog working well, and attracting as many visitors as possible.
Even though this can seem like a lot of steps (and a lot of information to take in), you’ll soon be a total pro, doing all of these things on autopilot.
To help you get started, I’ve made you a complete food blog image optimisation checklist, which you can download for FREE right now!
Free Resource
Free Resource
Optimize your Food Photos for the Web
Optimize your Food Photos for the Web
Free Food Photography Optimization Checklist
Optimize your food photos for your food blog or website and make sure your site runs efficiently, without sacrificing any quality!
Your checklist is on it's way! Please check your email for next steps (check your spam folder if you don't see it!)
We respect your privacy. By signing up, you agree to our use of your name and email as per our Privacy Policy
Free Food Photography Optimization Checklist
Optimize your food photos for your food blog or website and make sure your site runs efficiently, without sacrificing any quality!
Your checklist is on it's way! Please check your email for next steps (check your spam folder if you don't see it!)
We respect your privacy. By signing up, you agree to our use of your name and email as per our Privacy Policy
Let’s jump in…
Exporting your files
This whole process starts by making sure that your food photos are as small of a file size they possibly can be, so they don’t slow down your site and cost you any precious seconds.
There are a few really simple things you can do to optimise your photo files whilst maintaining the excellent quality you need for your food photography.
Make your images the right size
To make sure your photos load as quickly as possible on your food blog, it’s important to upload them to your WordPress media library at the correct size.
The size of the image that you take on your camera is usually much bigger than the size it will ever be viewed at on your food blog. That means if you don’t resize your photo before you upload it to your website, your readers are downloading a lot of unnecessary information, resulting in slower loading times and more data usage!
The size that your images can be displayed at on your website will depend on your theme or website settings, and the device that your reader is viewing the image on.
You want to upload your photos at the largest size they will ever be displayed, so if your maximum content width is 640 pixels, your photos should be uploaded 640px wide. WordPress then automatically resizes your photos for smaller devices such as tablet and mobile.
To find out your maximum content width, you can check in your theme settings or use the inspect tool in Google Chrome.
Bonus Tip: If you want your images to show up super crisp and sharp on “retina” screens (which you should – most Apple devices now use retina screens!), you’ll need to upload your photos at double the size of your maximum content width.
Then you need to use a plugin to generate retina images. I use WP Retina 2x as I find it super simple to use, and it integrates with WordPress’ built in functionality really well.
Export your photos to JPEG format
One of the easiest things you can control to keep a small file size, is the file format you use when uploading your images to your food blog.
Once you’ve finished editing your photos and you’re ready to put them on your blog, you should make sure you export them in JPEG format, as this is the best file format to compress your photos and still control the quality of your image.
When saving your food photos in JPEG format, you can control the level of compression that’s applied to reduce the file size. More compression means a smaller file size, but a lower quality image. Here’s an example:
You’ll see in the image on the right, some weird lines, almost like tide marks next to the jar, and the image itself isn’t as crisp as the one on the left.
I’ll show you how you can choose your image quality in the next section!
Remember, we’re only talking about food photos here. Your logo, and other graphics on your food blog, might be best exported in a different file format, but we’re not covering that!
Stripping unnecessary metadata
While this doesn’t make a huge difference to the file size of your photos, this is still an important step and keeps your images nice and clean for sharing on the internet.
I strip all the data except for “copyright information”. You can set custom copyright information in the settings of both Photoshop and Lightroom.
Want a handy checklist to help you tick off all these steps every time? Click below to download your free checklist for optimizing food photos for the web:
Free Resource
Free Resource
Optimize your Food Photos for the Web
Optimize your Food Photos for the Web
Free Food Photography Optimization Checklist
Optimize your food photos for your food blog or website and make sure your site runs efficiently, without sacrificing any quality!
Your checklist is on it's way! Please check your email for next steps (check your spam folder if you don't see it!)
We respect your privacy. By signing up, you agree to our use of your name and email as per our Privacy Policy
Free Food Photography Optimization Checklist
Optimize your food photos for your food blog or website and make sure your site runs efficiently, without sacrificing any quality!
Your checklist is on it's way! Please check your email for next steps (check your spam folder if you don't see it!)
We respect your privacy. By signing up, you agree to our use of your name and email as per our Privacy Policy
Choosing your export settings in your editing program
If you’re using Adobe Lightroom or Photoshop to edit your food photos (which I highly recommend you do!), there’s handy built in functions to help export your photos with the right settings, including image quality and file size.
Related: My 3 favourite Lightroom Editing Hacks
Photoshop
Once you’ve finished your edits, go to File → Export → Save for Web, to export your photo:
You’ll be presented with the Save for Web screen, where you can choose the file type, image quality, and dimensions of your exported photo:
You should select the JPEG format, then use the quality slider to reduce the quality of your photo. Don’t be scared of reducing the quality! You can take JPEG files down to approximately 65 before noticing any visible difference at all.
Photoshop offers a preview window on the left, that you can use to zoom in on your image and see how it’s looking at your chosen quality level. This can save you hundreds of kilobytes of file size without affecting the look of your image at all.
Finally, use the image size boxes on the bottom right to set the correct dimensions for your website.
Note: This feature is now labelled as “Legacy” in Photoshop. I still think this is currently the best option to export JPEG files from Photoshop. If it is discontinued and replaced with an alternative in the future, I’ll update this post with a new tutorial.
Lightroom
The same settings are available in Lightroom when you choose File → Export:
Like in Photoshop, you should select JPEG as your image format in the “file settings” section, and use the slider to choose your quality. Annoyingly, Lightroom doesn’t offer a preview function, so you will just need to play around on a few files to figure out which quality works best for you. I now use 65 as standard.
Finally, use the “resize to fit” setting in the “image sizing” section to export your photo at the right size.
Implementing good SEO in your Food Photos
File names
In order for your food photos to show up in Google Image results (and as results on Pinterest), you need to make them “readable” for search engines.
When you name your files, don’t leave them as the original “DC00021.jpg” that they leave your camera as. Instead, name them descriptively and in plain English.
If you’ve decided on a keyword (or keywords) for your post, you should include these naturally in your file name. For example “simple-vegan-chocolate-cake-1.jpg” is a good, descriptive and natural file name.
The clearer and more concise your file names are, the easier it will be for google to read your pictures and return them as a search result.
The file names should be updated before you upload your photos into your WordPress media library.
Alt Text
Similarly to a file name, the “alt text” (alternative text) should be filled in as a relevant description of your image.
The alt text is what would be displayed on your website should the images not load. It also helps your images and website rank better in search results, so you want to use this as a bit more of a robust description than your file name, and still include your keywords.
Another thing to bear in mind when setting the alt text is that Pinterest will use this as the description for your Pin, so it’s a chance for you to show off the best features of your recipe, encouraging people to click through to your food blog.
Using the same example above, the alt text for that image could be “An easy recipe for vegan chocolate cake that takes just 30 minutes to make”.
Here is where you set the alt text when inserting your photo in a blog post in WordPress:
Phew! That was a lot of steps! All these things may seem really dull, but if you implement them consistently, it will help you achieve exponential traffic growth to your food blog.
To summarise all this information and to make it easier to get into the swing of it, I’ve created you a free checklist for optimizing your food photos for the web. Click below to download it for free!
Free Resource
Free Resource
Optimize your Food Photos for the Web
Optimize your Food Photos for the Web
Free Food Photography Optimization Checklist
Optimize your food photos for your food blog or website and make sure your site runs efficiently, without sacrificing any quality!
Your checklist is on it's way! Please check your email for next steps (check your spam folder if you don't see it!)
We respect your privacy. By signing up, you agree to our use of your name and email as per our Privacy Policy
Free Food Photography Optimization Checklist
Optimize your food photos for your food blog or website and make sure your site runs efficiently, without sacrificing any quality!
Your checklist is on it's way! Please check your email for next steps (check your spam folder if you don't see it!)
We respect your privacy. By signing up, you agree to our use of your name and email as per our Privacy Policy
Summary
- Optimizing your food photos for web is an important step in making sure your food blog is found through search engines such as Google and Pinterest.
- You can optimize food photos for web both through the file compression and the naming and attribution settings.
- Use JPEG Format for images (but shoot in raw format for best quality)
- Save your food photos at the correct size for your food blog.
- Make use of the “Save for Web” functionality in Lightroom and Photoshop, to minimise file size without compromising quality
- Download your FREE food photo web optimization checklist!
Your turn
Are you optimizing food photos for the web? Is there anything else you’re struggling with when it comes to SEO?
what would be a low budget camera to start with, that you recommend?
it depends what brand you would like, do you already have lenses? Check out our Tools and Resources page for a few recommendations!
This is so helpful, Lauren! Do have any info regarding workflow as in transferring camera card raw files to external hardrive and that whole thingy? I know I’m doing something wrong and am afraid to delete the raw files from my computer hard drive until I know how to retrieve them (I feel so dumb!). Thank you!!
I am working on a whole workflow post!
This food photo optimizing process is very good and i really got here valuable idea, thank you so much
Really useful post, Lauren! These tips should help me optimize images on my blog.
I have a question though. Do image compression plugins help in achieving similar results?
Hi Harshad, so glad you found it useful! I personally don’t use plugins to compress my images because I like to have control over what is being compressed. However I believe they can be effective!
Hello LAUREN,
I love you and I always follow your resources. this post also very good and informative. thanks a lot for sharing this idea
This information is so helpful! I’ve learned more from reading your blog in one day than I have in a whole month of scouring the internet trying to figure things out. Thank you for explaining things in such a concise, yet practical way. I appreciate all of your insights and hope you’ll write more soon!
That is just the BEST feedback Tania!! I will definitely be writing more and producing more videos really soon!
Lauren! Loving this site!!! So many great tips! You’ve done a spectacular job with it, I’m signing up for sure! 🙂
Hi Anna!! So nice to see you around here!! Thank you so much for the kind feedback, I’m so glad you like it! 🙂