Amazing images are a vital component of recipe sites and food blogs because our ‘first bite’ is visual. You put a lot of effort into cooking, staging, equipment, props, lighting – and eventually you snap the perfect shot. Awesome! Now what do you do?
Don’t just upload the file as is to your website! The photo file will be several megabytes in size and will really slow down your site.
You will need to change both the image dimensions and image file size before uploading it to your site. Confusingly, we often use the term ‘image size’ to refer to both the image dimensions and/ or the image file size, depending on the context. You will get used to it and come to know what’s being referred to by the context, but if you’re ever unsure, just ask for clarification.
Image Dimensions
Graphic dimensions are described universally as being width x height. That’s true if you’re describing measurements (eg, inches or centimetres etc), or pixels. For example, a Facebook banner photo (the long photo that runs across the top of your business page) is displayed at 820 x 312 – that is 820 pixels wide, and 312 pixels tall – so it is much wider than it is tall.
If you have trouble remembering which comes first, think about how we read:
left to right first (across first), and then down the page (then height). Across and down.
The gorgeous citrus fruits image below from photographer and chef Edgar Castrejon on Unsplash has been scaled to have 1200 x 1800 dimensions. Note that it is taller than it is wide – a portrait orientation. If it was wider than it was tall, it would be a landscape orientation.
Current best practice at time of writing is to use images that are a minimum of 1200 pixels wide. The height is determined by the orientation of your picture. The reason for this width is found in both Google Discover and Google Article schema documentation.
The quote below is from Google Article schema:
- “Only a marked-up image that directly belongs to the article should be specified.
- Images should be at least 1200 pixels wide.
- Every page must contain at least one image (whether or not you include markup). Google will pick the best image to display in Search results based on the aspect ratio and resolution.
- Image URLs must be crawlable and indexable.
- Images must represent the marked up content.”
Image File Size
The amount of disk space required to hold the image is known as the data file size. This is also the amount of bandwidth required to transfer the photo from your web host to your site visitor’s phone, tablet, or computer.
The more data that needs to be transferred, the longer the transfer process takes, and the longer your visitor has to wait before they see your photo on their screen. And trust me, nobody likes waiting!
Images that are 1200 pixels (px) wide can be less than 100 kilobytes (KB); 60 to 80 kilobytes is very achievable. However, the smaller the file size, the lower the image quality. So this becomes a trade off decision between how small you want your data file to be vs how low an image quality you want on your website.
- When you upload a photo to your WordPress Media Library, the site theme will make multiple copies of the photo. These various copies will be of different dimensions.
- WordPress will deliver the file of dimensions appropriate to the device the site visitor is using. There is no point sending a 1200 px wide image to a phone with a screen that is only 460 px wide. WordPress automatically selects the copy of the image that best matches each visitor.
- Typically, the majority of visitors to your site are using their phone. You can find the data in Google Analytics, but it’s usually in the range of 70-80%. When making decisions about image quality, use your phone to check the images rather than your desktop computer.
Transfer Process: Camera to Site
There are many different ways to do this. The process you use will depend on the software you have, experience with photo editing and much more.
Step 1: Open the image in your photo editing software. Many people use Lightroom or Photoshop. I use GIMP – a free, open source photo editor that has be around as long as the internet has.
Step 2: If you are editing the photo for brightness, contrast, cropping etc. do so now. Scale the photo so it has a width of 1200 pixels. The height is determined by orientation and cropping.
Step 3: Export the 1200 px wide photo in JPG format from your editing software so that the resulting file size is in the 200 to 300 kilobyte range. The lower the quality of the export, the smaller the file size. We are going to shrink the data size further in the following steps.
Step 4: Upload the photo to your media library. Set the alt tags! It is during this step that multiple copies of different dimensions are made and further compression is handled by WordPress plugins such as Shortpixel. Shortpixel will compress all of the copies of the photo that are made. This means that all versions of the photo – the one sent to phone screens and the one send to desktop screens – are optimised.
There are other plugins that do the same thing as Shortpixel, however at the time of writing Shortpixel is one of the best. These things change quickly on the internet though.
Pro tip: Buying Shortpixel credits in one time blocks rather than monthly plans seems to deliver the best value for money.
To see image quality vs compression in action, there is a very cool web app called Squoosh , apparently made by people from Google, that allows you to upload a photo, set the image quality, and see the before and after effects on the screen. If I need to quickly upload a photo to a site that does not have Shortpixel I will often use Squoosh.
Uses for Photos
Featured image – Set in the WordPress post and used by WordPress to generate preview images for linking from category pages, home page, tag page (if you are still using tags, but please don’t!) etc. The images you see on category pages are the featured image set for that post.
What can be confusing is that, depending on which theme you are using, the featured image may not actually display on the post page itself!
Some themes do use the featured image as a kind of header on the page, but this practice is generally phasing out in favor of making pages load as quickly as possible.
The orientation of the thumbnail of your featured image seen on the home page and category pages (and tag pages but….) is determined by your theme. Some themes give you the ability to change it, some do not. You can have square, portrait or landscape thumbnails of your featured image.
Hero shot – An image near the top of the page that shows off the final dish and entices the site visitor to stay on the page. Typically your best photo of the final dish. Helps to hook the visitor to stay on the page so they continue reading.
Recipe card – Your recipe card plugin has a photo area, and you select a photo to display in the recipe card. This photo is very important as generally it is this recipe card photo that will display in the Google search results page, see image below.
Google does not always pick the recipe card photo to display in its search results (annoyingly!), but it usually does.
The good news is that you can usually use the same photo file for all three things: the hero shot, the recipe card, and the WordPress featured image!
Process shots – Process shots are there to assist the reader make the recipe. They are typically not the images we want to display in Google search results, or Discover. That is the job of the hero shot. So your process shots do not need to meet the same standards.
Some people like to make collages out of process shots, or put 2 or 3 smaller (dimension) photos side by side on the same row or other variations that suit their own style. That is perfectly fine. Handle your process shots in the best way that suits your style, your website, and your readers.
Image Alt Text
Image alternative text – alt text – is an important aspect of the image that is often overlooked. Alt text was originally designed to be used by screen readers to read the description of the image to people who cannot see it. It is an important aspect of accessibility.
Google also uses the alt text to understand what the image is about. Therefore it is an important part of your on page SEO. Be sure to use appropriate wording to describe your image. For example, “Large piece of chocolate cake served on a white plate with a fork.” would be suitable.
Don’t stuff your keyword in there again and again, but it makes sense when you are talking about your hero shot to include the primary keyword for that page.
If you are using WordPress, you can and should specify the alt text when you first upload the image to your media library. If you specify the alt text when you first upload to the Media Library, it will be applied each time you add the pictures to a post or page. Saves time if you are using the same picture on multiple posts.
Insert Full Size
There is currently a WordPress bug that has been around since at least 2018 where WordPress defaults to a smaller image dimension when you first insert the image. So all the work you put into making the image the correct dimensions is not applied.
With the image selected, go to the Blocks menu on the right hand side of the editor and select Full Size on the image.
