How to Optimize Your Website Images for SEO: A Step-byStep Guide mprstudio.com /optimize-images-seo/
If you’re a blogger, then you probably already know how important it is to add relevant, quality images to your posts. Photos, illustrations and other imagery help make your content more appealing and break up blocks of text nicely. You should always use at least one image per post, and multiple images if your posts are lengthy. Not only do images make your content more enjoyable to read, they can also help you with Search Engine Optimization. In this post, you will learn how to make sure that all images you use on your site are optimized in regards to file name, size, alternative text (very important!), topic relevance, placement and more. Table of Contents 1. Selecting the right image 2. Choosing the best file format 3. Mixing it up 4. Using descriptive file names 5. Writing captions when needed 6. Making sure you use alt text 7. Paying attention to image placement 8. Sizing images correctly 9. Compressing your files 10. Conclusion
Selecting the right image
1/9
Relevance is key: If you’re writing a story about puppies, use a picture of a cute puppy.
Before you start optimizing images, you’ll first need to find the right ones for your post (or page). A good image will have the same subject/s as your blog post, help emphasize your writing and effectively enhance your reader’s experience. If you’re a decent photographer and have the ability to capture images that are relevant to what you’re writing about, go ahead and shoot your own stuff. If not, simply look online for images that match your written content. There are many websites with free stock photos that you can use, including the following: You can also use Google’s Advanced Image Search, and perform various searches to narrow down your results: all these words; this exact word or phrase; any of these words; none of these words. I usually just enter my search term in the all these words box and it seems to work well. Next, you can further narrow down your results by the following: image size; aspect ratio; colors in an image; type of image; region; site or domain; SafeSearch (you can use this to filter out explicit results); file type (.jpeg, .png, .gif, etc.); and finally usage rights. Under usage rights, you want to filter the results by either “free to use or share, even commercially” or “free to use, share or modify, even commercially.”
2/9
This is a pretty helpful trick to find quality images you can download, resize and use in your blog posts. With some search terms, you may not be able to find images that you can freely reuse commercially. It really depends what you’re looking for. Please Note: Before you reuse content found through Google’s Advanced Image Search on your website, check that its license is legitimate and read the complete terms of reuse. In some cases, the license may require you to give credit (in the form of a link or otherwise) to the original image creator.
Choosing the best file format
When sizing images for web, there are a few different file formats that you can use. I almost always use JPEG or PNG files, but have created a couple animated GIFs in my day as well. When selecting the most appropriate file format for your images, you should choose the one that keeps the file the smallest. Generally speaking JPEG files are going to be smaller than PNGs, but that’s not always the case. What I Do: Using Adobe Photoshop, I size my image for the content area width of my post or page, then choose Save for Web & Devices. Once in that window, I switch between JPEG-High and PNG-24 and see which one yields the smallest file type. For photos, JPEG is always smaller and should be used. For graphic text or other imagery, PNG is often smaller.
Mixing it up
3/9
Try to keep an open mind when looking for website images (and generally in life as well). DON’T just look for photographs, but try and mix it up a little bit by using various types of artwork on your site. Use a nice mixture of the following types of imagery: illustrations, paintings and drawings charts, graphs and tables infographics or other graphics you design yourself animated GIFs screenshots (these work especially well for tutorial posts) By varying the kinds of images you use, you make your content more visually appealing and thus more interesting for your visitors (assuming your written content is high-quality).
Using descriptive file names
When you save images to use on your website, you should take care to name them in a descriptive fashion. You want to make sure you use keywords relevant to the image and content you’re writing about. Keywords should always appear in a natural fashion, whether in file names, alternative text, blog posts or page titles. Don’t ever stuff keywords in any of your content, as it will provide no benefit and may even result in a Google penalty. If you have an image of a smiling child, it’s much better to name the file smiling-child.jpg than to simply leave the original file name (e.g. _DSC0428.jpg). Make sure that when you name your files you separate words with a dash (name-your-file-like-this.jpg), because that dash is interpreted as a space by Google (and Bing too). Accurately naming your images is one way to help Google find them more easily. This means better overall visibility for your website in the search engines. All of these optimized images add up to help your website perform better.
Writing captions when needed 4/9
You can use captions on images as well, but only if including them provides valuable information for your readers. When people skim through your posts, they tend to look at images and read the captions beneath them. Make sure you use that opportunity to capture their attention by writing catchy, informative captions to accompany your images. Don’t worry about including captions with every single image you use in your blog posts. Some are meant for illustrative purposes only, and absolutely DO NOT need a caption. With each image you use, think about whether a caption will provide value for your website visitors. If the answer is no, then you don’t need one.
Making sure you use alt text
Alternative text (alt text for short) is an attribute which is added to an HTML image tag. It appears inside an image container and helps describe the image to search engines when it cannot be displayed. Alt text is also used by screen readers that help those who are visually impaired more easily navigate the internet. The descriptive alt text (bolded) in the following image link helps identify the picture for search engines (do people really use anything besides Google?) <img src=”https://www.mprstudio.com/wp-content/uploads/babe-ruth-original-new-sepia.jpg” alt=”Add sepia tone to an image in Adobe Photoshop” /> So, make sure you add descriptive alternative text to the images on your site, and include keywords in a natural fashion.
Paying attention to image placement When you add images to your post, make sure that you put them near related text content. I make a habit of using multiple subheadings, and place related imagery near all of them. It’s a good way to break up the text, and helps make blog posts easier to read and more visually appealing.
Sizing images correctly
5/9
The width of the content area on my site is 665 pixels, so I size my images accordingly (sometimes even smaller).
Website speed plays an important role in both SEO and user experience, so itâ&#x20AC;&#x2122;s imperative that your site is quick for your visitors. Images play a huge role in the speed at which your website loads, so make sure you size them properly. If you upload images that are sized at 4288 x 2848 pixels and display them at 600 x 400 pixels by tweaking the source code, it will seriously slow down your website (and take up a lot of server space unnecessarily). Do your site visitors a favor, and save your images in the correct size for your content area. Since youâ&#x20AC;&#x2122;re using WordPress, all images that you upload are responsive by default. This means you should size your image for the content width of your desktop site, and it will be served at smaller sizes for visitors on all devices, including tablets and smartphones. This is great functionality that WordPress introduced in version 4.4 which ensures that unnecessarily large files are not loading on devices with smaller screens.
Hereâ&#x20AC;&#x2122;s what I do I use Adobe Photoshop to size my images, then choose Save for Web & Devices and select either jpg or png depending on what kind of image it is and which file type is smaller. Then, I use EWWW Image Optimizer to further compress my image files. It is a free plugin that works great and even lets you bulk optimize images.
Compressing your files
6/9
After properly formatting your images, you can further reduce file size by compressing them. There are a few different ways to do this, and since you’re using WordPress, you can just use a plugin. There are a number of different plugins available, including the following: EWWW Image Optimizer – This is my go-to plugin for compressing image files, and I highly recommend it. Any images you upload to your media library will automatically be optimized, and you can use their bulk optimize tool to compress any files that were uploaded before installing and activating the plugin. You can choose between varying degrees of both lossless and lossy compression, and even no compression. I don’t know why they’d have a no compression option, but I don’t use it and certainly don’t claim to know everything. Some things are a mystery. Smush Image Compression and Optimization – WP Smush is available in both free and premium versions. It also automatically compresses all images uploaded to your media library and has a bulk optimization option, which enables you to optimize 50 files at a time with the free version. The free version of WP Smush uses lossless compression, but if you purchase the pro version, you can use lossy compression (referred to as Super-Smush) which further reduces file sizes with a minimal loss of image quality. Kraken.io – Through Kraken’s API, you can optimize .png, .jpg and .gif files. In order to setup the plugin, you must first sign up for a free account at kraken.io. Once you register, you’ll receive an API and secret key that you can use across multiple WordPress websites. Kraken’s default settings ensure your images are compressed using a smart lossy compression technique, which was created to drastically reduce file size without a drastic reduction in image quality. You can manually enable lossless compression in settings. Compress JPEG & PNG images – Unlike the other plugins already mentioned, this one ONLY offers lossy compression methods. It does not offer too many configuration options in settings, but lets you choose the maximum resolutions for images that you upload and pick exactly which image sizes you want to compress (e.g. thumbnail, large, etc.). Also, it gives you the option to preserve some metadata associated with the images, including copyright, creation date and GPS location. This is not recommended, as this info adds to the file size and the whole idea behind 7/9
compressing your images is to make them smaller, not larger (duh). Why should I compress my website images? 1. Your website pages will load faster, making your visitors ecstatic. Quicker website speed can also lead to increased revenue, especially if you’re running an ecommerce store. 2. Site backups will take less time due to smaller file sizes. 3. You’ll be saving 100s of kilobytes per image, and therefore will use less bandwidth. Please Note: Lossy image compression methods will help you create smaller files sizes, but you will want to compress a few images to check image quality before you bulk optimize your entire media library. Make sure the image quality is good enough for your needs, and that there are no noticeable flaws in the compressed files. In addition to plugins, there are a variety of online image compression tools you can use, including TinyPNG and compressor.io, among others.
Conclusion As you have learned in this post, optimizing your images for SEO involves a number of steps and things to consider. Take time to properly prepare images on your website and make it easy for the search engines to index them. To recap, you want to keep the following things in mind: 1. Choose the right type of image for your content. 2. Select the proper file format (JPEG, PNG or GIF). 3. Use a unique mixture of images (photos, illustrations, charts, infographics, etc.). 4. Use descriptive file names with keywords and dashes between each word. 5. Insert image captions, but only if they add value for the reader. You don’t have to use them all the time. 6. Make sure to enter alternative (or alt) text to your images. Explain the image with keywords in a natural way. Never stuff keywords anywhere! 7. Keep image placement in mind. In a short post, put the image at the top. If your post is longer, consider putting images near every subheading. 8. Size your images for the content width of your posts/pages. Don’t upload giant files, only to display them at a small size. 9. Use a plugin or online tool to compress your image files and make them even smaller. 10. Create an XML image sitemap so Google can easily index all of your images. I hope this post has provided you with helpful information which you can use to easily optimize all of the images on your website. Don’t stop there, make sure you optimize all your website’s posts and pages for SEO as well. Follow this WordPress SEO Checklist to get started. If you have any questions or comments, please leave them below. I will do my best to help you out. Do you need help creating a WordPress website? Sign up for your FREE WordPress Setup today. 8/9
If you found this post helpful, please share it and spread the word! Want more like this? Sign up for my newsletter to receive helpful WordPress Tutorials, Tips and Tricks.
9/9