Views: 0 Author: Site Editor Publish Time: 2022-08-30 Origin: Site
Discover what factors are key to optimizing images to improve your content and help it rank higher in searches.
Think about the last time you uploaded an image to your website. Chances are you downloaded it from a photo gallery website, uploaded it to your website backend, and then inserted it into the page.
This is not a shining example of image optimization.
It's like you've added a giant bowling ball weight to your site, slowing down the page. Also, search engines can’t read your images without alt text.
Let's change that.
According to 2018 data from Jumpshot, more than 20% of U.S. web searches occur on Google Images.
SEO amateurs and professionals alike know that it's well worth taking the time to optimize images for your website.
Moreover, Robbie Richards generated 150,732 visits by adding image alt tags, compressing images, and other SEO techniques.
Without proper image optimization, you are wasting valuable SEO assets.
It’s like the search engines are giving away free Oreos and milk. But, you only got the Oreos. In fact, Oreos are better soaked in milk.
Image optimization creates many advantages, such as a better user experience, faster page load times, and additional ranking opportunities. And, it is becoming an increasingly important role.
As Matt Southern points out, Gary Illyes made a statement about image search in a recent Reddit chat.
'We just knew that Media Search was too neglected for what it could do for publishers, so we put more engineers into it and more outreach.'
But which factors are most important to ensure your images can be found and don't weigh down your website?
Here are 12 important image optimization tips you need to know.
Interpreting all the different image formats may feel like your first time ordering at Taco Bell. However, before you start adding images to your website, you want to make sure you have selected the appropriate file type.
While there are many image formats to choose from, PNG and JPEG are the most common on the web.
PNG: Produces better image quality, but comes with larger file size.
JPEG: You may lose image quality, but you can adjust the quality level to find a good balance.
WebP: Use this to select lossless or lossy compression, which is an image format supported by both Chrome and Firefox.
To me, PNG is the unsung hero of image formatting. However, for my daily use, PNG is the way to go, and then converting these to WebP.
Be careful if you use .jpg images in inline SVG format, as Google's systems cannot index these images.
According to the HTTP Archives, images account for an average of 21% of the weight of the entire web page.
This is why I highly recommend compressing your images before uploading to your website. You can do this in Photoshop, or you can use a tool like TinyPNG.
You can also use TingPNG’s WordPress plugin.
However, I prefer WP Smush as my WordPress plugin. It can reduce image file size without affecting quality.
Whatever plugin you use, make sure you find one that compresses images externally on their servers. It reduces the load on your own website.
Or, take it a step further and use an image CDN that detects the device and optimizes the images before delivery. Cloudinary and Imgix are two options to try.
Increasingly.com improves website speed by 33%/2 seconds by compressing images.
If you're not sure how your images affect your page speed, I recommend using Google's PageSpeed Insights tool.
If you flood your website with stock images, you'll appear uncreative - just like thousands of other websites that won't stand out.
Too many websites are filled with the same generic images.
Think of a corporate website, a consulting firm, a business that prides itself on customer service. All these websites use almost the same stock photo gallery of smiling businessmen.
While you may have your image library perfectly optimized, its impact or potential SEO benefit is no less than that of a high-quality, original image.
The more original images you have, the better the user experience and the better your chances of ranking in relevant searches.
Keep in mind that large images are more likely to show up in Google Discover.
As Google advises in its search engine resources, 'Large images need to be at least 1200px wide and enabled via the max-image-preview:large setting, or by using AMP.'
Don't use your logo as a picture.
No matter what image file you choose to use, make sure there are no copyright conflicts.
Postal Service pays $3.5 million in image copyright lawsuit Moreover, Skechers was sued for $2.5 million.
If Getty, Shutterstock, DepositFiles, or some other image provider owns an image that you use, and you don't have a license to use that image, you risk an expensive lawsuit.
Under the Digital Millennium Copyright Act (DMCA), you may be issued a notice if you violate any copyright issues. If a content owner sees their content on your site, they can issue a DMCA takeback notice, which you must comply with.
Google Images allows you to filter results based on those images that are available for reuse, and Mindy Weinstein shared 41 different websites to find free images.
When it comes to SEO, it’s important to create descriptive, keyword-rich file names.
Not customizing your image file names is like a burrito with nothing.
Image file names alert Google and other search engine crawlers to the subject of the image.
Typically, the filename will look like 'IMG_722019' or something similar. It's like ordering from a menu in a different language. This doesn't help Google.
Change the default file name to help search engines understand your images and improve your SEO value.
This involves some work, depending on how extensive your media library is, but changing the default image names is always a good idea.
For example, let's say you have a picture of chocolate.
I could simply name it 'Chocolate', but if you were selling chocolate on your website, probably each image would be named 'Chocolate-1', 'Chocolate-2', etc.
I will name this image 'Dark Chocolate-Coffee' to help users and search engines understand this image.
The Alt tag is a text replacement when the browser cannot render the image correctly. Similar to the title, the alt attribute is used to describe the content of an image file.
When the image fails to load, you get an image box with an alt tag present in the upper left corner. Make sure they fit into the image and make the picture relevant.
Paying attention to alt tags also benefits your overall on-page SEO strategy. You want to make sure all other areas of optimization are in place, but if the image fails to load for any reason, users will see what the image should be.
Additionally, adding appropriate alt tags to images on your website can help your website rank better in search engines by associating keywords with images. Even Google mentions the value of alt text in images.
It provides Google with useful information about the subject of the image. We use this information to help determine appropriate images for user queries.
Due to the Americans with Disabilities Act, alt text is required for those who are unable to view the image themselves. A descriptive alt text can remind users what exactly is in the photo. For example, let's say you have a picture of chocolate on your website.
Symbol text can look like this:
However, a better alt text describing the image would be something like this:
.
Alt text can be viewed in a cached text version of the page, contributing to its benefit to users and search engines. To further increase SEO value, alt text can serve as anchor text for internal links when images are linked to different pages on your website.
Google has updated its image guidelines. One of the major updates they revealed is that they use file paths and file names to rank images.
Repeat: File paths and filenames are an actual ranking factor.
For example, if you are an e-commerce brand with multiple products, instead of putting all your product images in a common /media/ folder, I recommend structuring your subfolders into more category-related topics, such as /shorts/ or /denim/.
Google also revealed that it uses your page title and description as part of its image search algorithm.
All of your basic on-page SEO factors such as metadata, title tags, on-page copy, structured data, etc. will affect how Google ranks your images.
If you use AMP or PWA, you need to define your image dimensions in the source code.
However, if you don't use either method, defining width and height is still a good idea. It provides a better user experience.
Additionally, it allows the browser to determine the size of the image before loading the CSS. This prevents the page from bouncing when loading.
Image size properties are also important to prevent Cumulative Layout Shift (CLS) issues that can interfere with your core page metric optimization.
Making sure you include width and height attributes for every image and video element is key.
This will tell the browser how much space to allocate for the resource and prevent annoying content from moving around, lowering your CLS score. Learn more here.
Oh, mobile SEO. At its worst, it can give you a high bounce rate and low conversion rate. But, when it's good, it can give you more ranking power and better user engagement.
The question is, how do you optimize your images for mobile-first indexing?
Fortunately, Google provides guidance on what to do with images.
In short, you want to create responsive images. This means that regardless of whether the user is on a desktop or mobile device, the images will change with the size of the site. It can be adjusted according to the size of the device.
Mozilla provides a comprehensive guide on how to use the srcset and sizes attributes to provide the browser with additional source images so that it can display the same image content resized for the device.
It is important to use different attribute values in each row.
Whether you add images to a sitemap or create a new sitemap for images, you'll want to find images in the sitemap.
Adding images to your sitemap greatly increases your chances of being crawled and indexed by search engines. Therefore, it will bring more website traffic.
If you use WordPress, Yoast and RankMath offer a sitemap solution in their plugin.
Structured data marks up your content type, guiding Google and search engines to deliver better visual results. Essentially, if you add structured data, Google can treat your image as a rich result.
For example, if you use structured data markup on a product page and you tag an image as a product, Google can pair that image with a price tag. Search engines skip the algorithm and use the information provided in structured data to serve the correct image.
So before you start uploading your images to your website, make sure to follow the image optimization rituals above.
The most important thing is to make sure your images and alt text are relevant to the page.
Other key takeaways:
Choose the correct file format.
Reduce file size to improve page loading speed.
Make sure your on-page SEO elements (metadata, structured data, etc.) match your images.
To make it easier to crawl, create an image sitemap, or make sure your images are represented in the sitemap.
Optimizing images is no joke. As voice search technology advances and media becomes increasingly important, your entire website will benefit from taking the steps above.
