You can’t ignore the importance of quality images on your blog, especially if you’re a food blogger. While I’m still learning and trying to improve my food photography skills (gosh darn, it’s SO hard!), there are some important aspects of preparing photos for the web beyond the actual quality of the images.
Properly prepared images can help improve your SEO (search engine optimization) and lend to your credibility as a blogger. These steps are so simple, yet so often overlooked by bloggers.
You work really hard on all that amazing content and you want people to be able to find it, right? Optimizing your images for the web is a huge factor in SEO and will also make your blog that much more enjoyable for your readers. Optimized images will improve your site loading times and help to improve your search engine ranking, and we all want to make Google happy right?!
1. Rename images with descriptive keywords.
Leaving your photos with the generic name the camera gives them isn’t the best tactic for image optimization. You’ll want to rename all your images with relevant, descriptive keywords to get the most SEO bang for your buck. Just like including keywords in your posts and post URLs is important for pages, the same is true for images.
Say you have a photo of a bowl of broccoli soup, you could call it soup_700x900.jpg or IMG_4533.jpg, however it would be much better to call it vegan-broccoli-cheese-soup-recipe.jpg. Now the file is not only easier for you to identify later, but it also contains relevant keywords.
Use filenames that would make sense to both search engines and to your readers. You might understand souppic23.jpg, but chances are that doesn’t mean anything to anyone else and it won’t help your search engine ranking. You should also try to use full words, not abbreviations, keep filenames fairly short and don’t use any special characters.
2. Resize images for the web.
This is one of the most important steps you can take in order to optimize your images for the web. The images that come directly from your camera have a large file size due to their dimension and resolution. If you upload these images directly to your WordPress site, it can substantially slow down the loading time of your blog. Search engines, and your readers, do not like slow page load times (nobody does!), so the quicker your site pops up on page, the better! Do not just let WordPress resize a large image to look smaller either, you have to actually resize the image before you upload it.
I edit and resize my photos in Photoshop and save them for the web as medium-quality jpegs from there. You want your images to be at a resolution of 72 ppi. Do not upload images at a resolution of 300 ppi as it makes for a huge file sizes and slow loading times, and it isn’t necessary for on-screen images. Personally I resize my images to a width of 700px because that’s the width of my post area and it also works well for Pinterest. The main factor is file size, so go as low as you can while still maintaining the quality of the image. Of course, if you use Pinterest to promote your posts, don’t make your images too small!
If you’re not using Photoshop, you can export photos at a reduced size directly from iPhoto or Adobe Lightroom. You can even use the free online software PicMonkey to resize your images and save them at a reduced file size for the web, plus it offers some great editing options if you’re unfamiliar with programs like Adobe Photoshop. You can also use free online tools like Picnik and Image Optimizer if needed.
3. Add metadata.
Even though WordPress makes it so easy for us, this is probably one of the most commonly skipped factors of image optimization. Metadata is information about an image that’s written in the HTML of your site. Because search engines can’t actually see the visual content on your site, even if you’ve included text on it, it’s important to include descriptive information in the HTML in the form of alternative text. Luckily, even if you don’t know the first thing about coding, WordPress makes it incredibly easy to add this information to your images. Your metadata should include relevant keywords to help maximize the search value of your images.
The two most important elements to include are the “title” and the “alt text.” An alt tag, or alternative text is a short, approximately 150-character description of an image. They are a way to “describe” an image to those who can’t see it – the visually impaired and of course, search engine spiders. The primary users who rely on alt text are those who are visually impaired, but alt tags also appear when a page isn’t loading properly, that way the user can get an idea of what the image is.
When you’re writing your alt text think about the purpose of the image in relation to your content and also the keywords related to your post. Good alt text should provide context and communicate an image. That being said, make sure the text is actually describing the image and not just repeating keywords, or “keyword stuffing.” As for title tags, I don’t believe they have much if any effect on SEO, but I add them in anyways just to be complete. They appear on your site when someone hovers over an image with their mouse.
TIP: Try this Image SEO Tool/Alt tag Checker from FeedtheBot
There are a few different ways to add metadata to your images in WordPress. If you’ve already inserted the image into your post, click on the image and then click on the icon in the top left corner. From there you’ll want to add a title and alternative text. You can also add this information in your main media library or when you upload images but haven’t inserted them into the post yet. I have noticed that WordPress often ignores the title you enter in the “Media Library” and you have to open up the image again in the post to enter the title.
Pinterest Tip: Ensure that images on your site have great alt text, because that is the default information picked up by Pinterest when a visitor pins from your site. They may not change the description when they pin, so ensure that you have a quality description that works well for Pinterest. If you don’t write “alt” tags, Pinterest will pick up the image name and there is nothing worse than seeing “IMG_3834.jpg” or “photo3.png” pulled into the description box. Make sure you are re-naming your images appropriately and writing good alt text to ensure Pinterest success.
As a side note, you should also select “None” in the Link section for an image. Linking your own images to their source isn’t really necessary unless you’re using thumbnails and you can view a larger version of the image by clicking them. If on the other other hand, if you’re using someone else’s image make sure you mention that and link the image back to the original source.
If you’re not working in WordPress, you can also add alt and title text directly into the HTML tag for your images like this:
<img src=”http:/runningonrealfood.com/images/how-to-optimize-images-for-the-web.jpg” title=”How to Optimze Images for the Web” alt=”3 Simple Steps to Optimize Images for your WordPress Blog” height=”600px” width=”800px” />
If you’ve neglected these steps since you’ve started blogging, it’s time to roll up your sleeves and go back into your media library to edit your images. Unfortunately, there is no way to change file names after they’ve been uploaded so it’s your decision if you want to start re-uploading images with proper file names or just follow this step moving forward.
You can start adding alt text in your media library anytime if it’s something you’ve missed. As for file sizes, if you site is full of very large images you might want to think about fixing them. The goal here is to get more traffic to your site so you can show off all your hard work. Blogging is a lot of work, so we might as well follow these simple step to make the most of our efforts.
I hope you all find these tips helpful, please leave me a comment below if you have any questions!