How to Optimize Images for Your Blog
Disclosure: Some of the links below are affiliate links, meaning that at no additional cost to you, I will receive a commission if you click through and make a purchase. Read our full affiliate disclosure here.
Do you own a blog? Thinking of starting one? Using images is bound to be an essential part of your content creation process, if not already so. Whatever the case, it is highly important that you know how to optimize images for your blog.
How do you optimize images for your blog and why exactly should bloggers do this? Are there specific tools to use for optimizing your images, and what are some of the best practices to be aware of? Keep reading for answers to these questions and more, but first, let’s establish a few facts.
Images and Blogging
It is commonplace to include images with blog posts because, more than ever, readers expect it. For starters, the human mind tends to be more responsive to images than text or audio content. A great image placed in a blog post often makes it more interesting and entices readers to share it.
In fact, research shows that the brain processes images 60,000 times faster than it does text. Moreover, while 10% of people will remember what they hear and 20% can recall what they have read, a whopping 80% retain what they see in images.
Another great thing about using images is that can help enhance your SEO footprint. The Google algorithm is increasingly prioritizing visual content, so blog posts with images may have an advantage over those without. For this to be true for you, image optimization is a must. Otherwise, you might be at a disadvantage instead.
Image Optimization Explained
The most basic definition for image optimization is achieving a noticeable reduction in the overall size of an image without damaging its quality. When you optimize an image you lessen the amount of computer resources required to display it properly. An optimized image will load quicker, more smoothly, and be able to fit on any device screen. Image optimization also refers to making an image easier to understand and use by viewers.
Benefits of Image Optimization
Looking good on any device and loading quickly are not the only perks when it comes to optimizing images for your blog. Some of the other benefits include:
Improve Website Speed. The lighter your images, the better your website will perform. According to research, 40% of website visitors tend to leave pages that take more than five seconds to load. On the other hand, websites that load quickly (less than five seconds, on average) tend to have conversion rates that are 70% higher than slow ones.
Good for SEO. Slow loading pages are unlikely to rank well on search engines. This means it will be difficult for people to find your content in search. In addition, optimized images are readily indexed by search engines and will, therefore, show up on Google, Bing, etc.
Shares on Visual Platforms. People are quick to share optimized images on websites that prioritize visuals. Pinterest, for example, is a popular destination for optimized blog post images being pinned by its users.
More Content Views. A properly optimized image that accurately represents a blog post is sure to pique readers’ interest. In other words, they are more likely to spend time viewing the article and possibly share it. More view time is another good SEO indicator.
Types of Images
Before heading into the whole process of optimizing your images, let’s talk a bit about different image types that you might end up using on your blog. There are three main formats used online – JPEG, PNG, and GIF.
- The JPEG format is the one most often used for hero images, headers, and those embedded within the body of a blog post. JPEG files typically include photographs of people, places, things, and drawings.
- The PNG file type is generally used for most graphics-related images such as logos, illustrations, and screenshots. In addition, PNG files are used in cases where a transparent background becomes necessary for a photo on a webpage.
- GIFs are animated images (contains movement). They are often used for humor, emphasis, or supportive information.
Of the three file types outlined, JPEG images tend to take up the least amount of space by comparison in size. JPEG is also the format you will use for the majority of visual content on your blog. While JPEG tends to have a smaller footprint than PNG and GIF, optimization is often still required. The reason for this is large image sizes.
Understanding Image Dimensions
When a photo is snapped using a digital camera or smartphone, the file is often saved with the stipulated dimensions on the device. The colors, lines, depth, and actual details of the photo will contribute to its overall size, in addition to the pixel quality of the camera. A PNG graphic or GIF will also retain all the data that is put in by the creator.
When you upload these images directly online, they will maintain their full resolution, even if they display smaller on the screen. Browsers are designed to scale photos down so they can fit into image holders on the screen, but that won’t take away from the size. An image used for a product, for example, may be several megabytes in size (and slowing down the page) but appears tiny on screen due to browser scaling. Hence, optimization is required to get your photos smaller.
How to Optimize Images for Your Blog
Having covered the basics of image types and why optimization is necessary, it is time to look at how you go about optimizing images for your blog.
1. Check if Your Images Need Optimizing
There are a few ways to find out if bloated images are slowing down your blog. Google PageSpeed Insights is one of the most popular options you can use, and it is free. With this tool, you simply type in the URL for your blog and hit “Analyze.”
Once the process is finished, you will see an overview of the performance of your website. If there are images that are too large, they will show up in the report, along with recommendations on how to fix them.
Google PageSpeed Insights also allows you to compare performance across both mobile and desktop. The report might recommend image optimization for mobile but not desktop. The reason for this is that images generally tend to load slower on mobile, whether they are optimized or not.
2. Remove Broken or Useless Images
Testing for large images that might be slowing down your website is a good first step. Another optimization best practice that you might not consider is getting rid of images that serve no real purpose.
Some GIFs, for instance, may stop working, but you may be unaware unless a reader points this out. Some JPEGs and PNGs may also fail to display properly due to broken code or theme changes.
In addition, there may be images placed on your blog that no longer serve the intended purpose due to updated information or moved content. Consider doing a thorough audit of your blog to identify any such useless images that may be slowing down your site unnecessarily.
3. Find Suitable Images
One overlooked aspect of optimization is where images are sourced from. Using random images you find online can result in numerous problems, including quality level, compatibility and legal issues (more on this later).
Stock photo sites such as Shutterstock, Unsplash, or Pexels are among the most popular options when seeking high-quality images for your blog. With these sites, you have the advantage of downloading images in various sizes, although further optimization will likely be necessary.
Another option is taking your own photographs. You can easily upload your own photos from your device to use in your blog posts. But as with stock images, you will still need to do some optimization first.
4. Make Your Images Smaller
Whether you use images stored on your own device or download photos from a stock library, you will need to decrease their sizes. Apart from Photoshop, which can be difficult to use for some people, there are a number of tools that can easily get the job done. The list includes
- I Love IMG
With each of these tools, you are able to simply upload your images, enter the most suitable dimensions and hit “resize.” You will be able to download the new image to your device and then use it on your blog.
Another way to reduce your image size is by cropping. This is rather useful for screenshots and video grabs that may contain details that are not needed in the final image you want to use. You may also crop stock images in instances where you want to isolate a particular detail from the rest of the photo. There are various ways to crop an image, including the use of basic tools such as Microsoft Paint.
One issue you might come across when reducing image sizes is how to figure out the best dimensions for your use case. Luckily, there are recommended image sizes that serve as guidelines for content marketers.
With WordPress, for instance, 1200 x 630 pixels is usually the recommended image size for blog posts. For feature images, though, the recommended size is 1200 x 900 pixels, while header images can be 1048 x 250 pixels. With that said, the specific size may differ based on the blog theme or layout being used.
5. Use Image Compression Tools
Reducing image dimensions is a great start to optimizing them. You can crunch the numbers even further using image compression. This is a process that removes or groups certain parts of an image so it takes up less space. Metadata and other image elements might be removed during compression. The result is that you can trim down a large image to one that is only a tiny fraction of the original size.
There are a number of image compression tools available. If you use WordPress for your blog, there are plugins on offer that can optimize your images with advanced “lossy” compression. Lossy here means that you will lose some of the quality of the original image, but the difference will be hard to detect by the human eye. Popular image compression plugins include:
- Compress JPG And PNG Images
- EWWW Image Optimizer
Outside of WordPress, there are a number of other image compression tools you can use:
- TinyPNG (specifically for reducing PNG files)
- ImageOptim (desktop image optimization tool for Mac users)
- JPEGmini (specifically for JPEG files)
Using these and other tools is often the quickest way to optimize images for your blog post. You can achieve an even smaller file size by doing a double compression. That is, you would compress the image using a local application (such as Photoshop) and then compress it again using a plugin. With double compression, however, it is possible for the image to start getting pixelated, so you may want to review the image thoroughly to ensure it is still of a high enough quality to be used.
6. Name Your Images Correctly
Many bloggers do not think much of the name when saving an image. A photo may be saved on a device as IMG1234.jpg, for example, and the blogger ends up uploading the image with that same name. While this won’t have any bearing on image size, it will most certainly have an effect on your SEO.
As mentioned earlier, search engines are more sensitive to images found in content, but it will be difficult for those without a proper name to show up in search. What constitutes a proper name?
A common practice is to give the image a similar name as the one used for your page title. If you have a blog post with the headline, “How to become a writer,” for example, you can use that name for your main photo as well. If there are photos in the body of the post, you can use the subheadings for the names.
7. Add Image Alt Text Information
This is another step that is meant to have a positive impact on your SEO strategy. Just in case you are unaware of what alt (alternative) text is, this is a short, text-based description of what is being shown in the image. The alt text is often added within the image html.
WordPress and other content management systems allow you to add this alt text within an image editor, so you don’t have to worry if you have no idea how to edit html.
Alt text in an image serves several purposes. In the event that your image fails to load when someone opens the containing webpage in their browser, the alt text makes it easy to see what the image was about. In addition, alt text is useful for visually-impaired people who use screen reading software.
There is also the SEO factor mentioned earlier, but this only makes sense if the right keywords are included when adding alt text to your images. You want to look for appropriate keywords that refer to the image name and your content. Google and other search engines make a note of these keywords when ranking your content. However, be careful not to stuff multiple keywords into your alt text as this could work against, instead of for you.
8. Credit Image Rights Holders
If you capture your photos using your own equipment or create your own graphic designs, you can use them in any way you see fit. On the other hand, using images and designs sourced elsewhere on the web means you have to be more careful. While you can download images from almost any website, you run the risk of being sued if the image owner has not been properly credited.
It is against the law to use images owned by someone else without prior permission. There have been many instances where individuals and even companies were ordered to remove images that did not have the proper attribution. Luckily, there are many legitimate stock photo platforms around. These allow you to either legally pay for the rights to use selected images or to simply give credit where due.
Images that are shared under what is referred to as a Creative Commons (CC) license may still require you to give credit to the rights holder. In any event, it is important to read the details on what you can do with an image and whether you are required to credit the owner. Furthermore, it is considered common courtesy to always give credit, even in cases where no attribution is required to use an image.
How do you give credit? This involves placing a short statement – directly on the image, under/near the image, or at the end of the content. The statement should say where the image was taken from and/or mention the owner. It can be something as simple as: “Image credit – xxxxx” or “This image was used with permission from.” Some image owners are even satisfied with adding a link that leads back to their website.
9. Use a CDN
If the vast majority of people who visit your blog are from the same country where it is hosted, you can probably skip this step. But if people from all over the world tend to view your blog, it might make sense to employ a content delivery network (CDN). This will likely come at an additional cost, but the benefits will be worth it.
A CDN is a system that allows the contents of a website to be made available from data centers located all around the world. This arrangement allows the server nearest to a website visitor to show the content they are interested in, instead of from where the main site is hosted.
Let’s say your website is hosted on a server in Canada, but someone from Nigeria clicks on one of your blog posts. Without a CDN, the images within the blog post will take a relatively long time to download to the user’s browser, even if those images are already at their optimal size. With a CDN, however, the contents of the blog post will be delivered from a server in the same area or from a country that is at least closer to Nigeria than Canada.
There are many different CDN sources you can use, and some are even bundled into website hosting plans. Users of WordPress, for example, have the option of adding this feature when choosing a hosting plan.
10. Add Links to Images (if Necessary)
Sometimes an image represents additional information, such as a guest blogger’s bio, social media profile or external reference material. In such cases, you want to ensure you add appropriate links to images, so readers can be directed to the associated information when they click on it. Not inserting links on an image that displays your Facebook profile, for instance, will likely cause disappointment in readers who clicked on it in the hopes of following your page.
Image optimization is highly beneficial to your blog’s performance and SEO friendliness. If you are concerned about the speed of your website, this guide can help you begin the process of “cleaning up your image.”