Are you looking to improve image SEO on your website? When optimized properly, image search can bring many new visitors to your website.
To benefit from image SEO, you need to help search engines find your images and index them for the right keywords.
In this video, we will show you how to optimize image SEO by following the top best practices.
0:00 Intro
0:34 Ensure that images are hurting your page
2:12 Image size and site performance
5:40 Using ResizePixel
7:13 Using EwwwImages
11:24 Optimizing Images for SEO
12:30 Changing Metadata for images
20:23 Changing search appearance
Related Links
►Don’t forget to subscribe to the channel and always stay ahead! https://www.youtube.com/user/wpbeginner?sub_confirmation=1
►ResizePixel https://www.resizepixel.com/
►EWWW Image Optimizer https://ewww.io/
► All in One SEO (AIOSEO) https://aioseo.com/
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
This is The Ultimate Guide to image SEO To get the maximum benefits out of Optimizing images or image SEO on your Website you need to perform two types of Operations on images the first kind Would be to optimize your images so that They don't negatively affect the Performance of your website which will In turn hurt the SEO of your website and Also affect the user experience on your Website and the second kind of Optimization will be so that you can get The maximum traffic using the images on Your website and in this Ultimate Guide I'm going to discuss every single Operation you need to perform to ensure That your images are the most optimized For your website let's go so let's start With the operation number one which is To ensure that images don't affect your Website in a negative way now why is This part important to implement let me Just example or give you an example Typically a web page if you look at the Size of the page itself can be anywhere Between 20 kilobytes to let's say 50 Kilobytes at maximum but look at any Image on the page it will typically be Between 100 kilobytes 200 kilobytes and If they're not optimized 500 kilobytes And even in multiple megabytes and the Result of this is that your website Actually Performs very poorly for your end users
So if somebody is trying to access a Page on your website it'll take multiple Seconds for it to open which is not a Great user experience and Google doesn't Like it when your websites perform slow So in both the scenarios taking a look At both the scenarios where your website Is not performing great and it's also Providing a worse user experience that It can Google actually demote you in This search result so typically if you Let's say you would do able to rank Number two with a certain set of Keywords for a certain set of keywords With certain content because your Website not performing great because of The large images that you have you might Be deranked to allows are demoted to Ranking number 8 10 or even worse so It's in a best interest SEO wise that Your images are actually the smallest Size possible so that your website can Provide the best user experience so That's when what we're going to learn How to do for you for your website in This step so let's talk about how do you Optimize your images for this best Results So now that we understand why we need to Do this let's talk about the three Parameters you need to optimize your Images for for the best results the First one is resolution which is the Number of pixels image has the second
One is quality or compression the third One is choosing the rise image format Let me give you a quick example of how Massively these factors can affect an Image's size So this is a website or let's say not a Website this is an image that I've Downloaded from unsplash.com it's a free Image resource and you see this image I Just resize the window so that I can Show the image this is a image that I've Downloaded from unsplash.com now let me Show you what the image sizes and the Resolution is so limit size I have not Touched image anywhere is 2 megabytes It's massive for any web page and the Dimensions are 4849 pixels wide and 3233 Pixels tall now this is a very very Large image in terms of terms of Resolution and most of the time you Don't need this much resolution so What's the typical size that you need Well the answer is actually not very Simple to explain but I'll just give you A simple guidelines I'm here on my Website and I've installed the Astra Theme most themes will have a setting Where they'll be able to define a Container width on how wide the site can Actually go apart from that if you go Wider on let's say a wide screen display The image actually will stay the same Aspect ratio so if I go to The Container Settings here you'll see the my
Container width is 1200 pixels that Means my website will never go wider Than 12 1200 pixels so considering this I should have images maximum size as 1200 pixels but to account for let's say High resolution displays I can usually Double this number so if I just round it Off then 2000 pixels is the maximum Image size which I should be using on my Website and typically for most websites Somewhere container weight is 1200 to 1400 pixels so as a benchmark you can Say hey maximum width of 2000 pixels is What you should be aiming for for any Website so going back to this image here It's massive it's 4849 pixels so let's look at the image Size when we actually compress it or Let's say reduce the pixels I already Have the result here so this is this Original image and this is the image Which I have resized to 2000 pixels and You see the massive difference in size 2 Megabytes to 894 kilobytes already this Is just changing the resolution of the Image let's talk about the second factor Which is also compression and quality When I took the same image this image And actually compressed it do you want To see last I already have it here this Is the final answer so this was the Original image and I compressed the Original image just to give an example You saw two Mega megabytes to 1.64
Megabytes and this is the resized image 894 kilobytes and once I resized or I Say compressed this image the final Image was 254 kilowatts massive difference in just Two operations but what about the Right Image format what's the typical I say uh Compression or savings that you can Expect when you change the image format Let's also check that out a lot of Images here but the final result that You should be looking for is this image 2000 pixels web performance which is a Modern day format 12 129 kilobytes only And if I open this image up it still Looks pretty darn good so this is the Amount of savings you can expect by just Implementing these three changes Compression resolution and also choosing The right image format and as all these Examples here so that you can take a Pause the video take a screenshot and Just understand how each operation Affects the image size but just look at This two Mega device to 129 kilowatts That's a massive difference in any image Quality or any any image size so this is What you should be doing let me now show You how you would do this for any image On your website So let me now show you how you can do The same things the three operations I Talked about on any of your images that You have without downloading any piece
Of software it's completely online it's Completely free the website is called Resizepixel.com it's already on the Screen I'll place a link in the Description of this video as well this Is where you'll upload an image and You'll perform the same operations so I'll upload an image that I have again Downloaded from unsplash.com and you see That original image is 6000 by 4000 Pixels 2.46 megabytes in size a massive Image so let's perform these all Operations one by one the first Operation is resolution so we'll go to Resize and instead of 2000 or 6000 we'll Change it to 2000 oops sorry 2000 will Change the size And now instantly you'll see once the Image has changed size the depth Difference in size is massive already It's already from 2.46 megabytes to 109.4 kilobytes let's also compress it So I'll go to compress tab I'll keep it To Auto I'll compress it And again you see 11 improvements once More let's also change it the to the Right format and I'll change it to webp Here And again almost 50 percent improvements So starting from an image which was 2.46 Megabytes in size now it's 40.83 Kilobytes in size and it's completely Free you can go to download and download The image and now you'll be able to use
It on your website now this is just for Images that you haven't uploaded to Website at and this is a manual process But I just wanted to show you that this Process also exists let me show you a Simpler way on how you can do this Automatically and also all the images on Your website which are already uploaded Can also be compressed and also convert To the right format let's talk about That now So to perform all these optimizations on Your website automatically for images That you upload and also images that are Already on your website will be using a Plugin and the number one plugin for Image optimization that we recommend is Called eww image Optimizer so let's Install the plugin first I'll go to the Plugin section I'll go to add new Now look for eww image Optimizer I'll Just search for e W w and typically the search result will Give me the plugin this is the one I'll Click on install Let's also activate the plugin so the Plugin is now installed let's go into Settings and configure a few settings First and I'll show you how you can Start compressing images automatically Or changing formats automatically so I'll go to settings here And since it's a first install eww image Optimizer will ask me a few questions in
Order to recommend the best settings Please set will select which goals are Most important what we are trying to do Is speed up our website so I'll select This option and I'll stick with a free Mode for now there's a premium option as Well I'll go to the next option And there's typical options that are Recommended to us so first option is Remove metamera I'll recommend that you Keep it in a lazy load I'll keep it Enabled webp conversion I'll keep it Enabled and maximum width again you can Make it 2000 pixels or 1920 is also fine And image backups is local that means if You upload a really high resolution Image it will be backed up to your Website as well embed help and enormous Reporting I'll keep it off I'll save my Settings And I'll go done and here there are a Couple things that you should again Enable inside the settings all these Settings are already something we Configured I I'd enable this as well add Missing Dimensions this is important Rest of the settings you can just double Check and leave with them B so once You've configured these settings Everything is now set up perfectly Anytime you upload new images to your Website they'll automatically perform With all the three operations they'll be Reduced to right size they'll be
Compressed and it will also be converted To the right image format an eww image Optimizer also takes care of fallback Options that means if let's say Somebody's browser does not support the Latest image format webp then typically They'll be served with a typical or as a Fallback option so you don't have to Worry about a user's browser not Actually supporting the webp format so Now since everything is set up let's go To the media library and add a few Images and see how the compression Actually takes place so I'll go to the Media I'll go to library And I have no media right now I'll go to Add new And let me just upload a few images These are again stock images I've Downloaded they are massive in size two Megabytes one megabytes each of these Images I'll upload a handful of these Images right now So all the images I added were uploaded To the site and I went to the library And you see all these images now are Here so how do you see all the benefits Or all the optimizations that would Happen or that actually were carried out You switch to the list view here just Look at this icon switch to the list View and you'll see all the details that Are already or all the operations or Details of the operations that were
Performed on your images so you see this Image six size compressed webp format Converted reduced by 81 percent reduced By 81 reduced by 79 reduced by 82 Reduced by 65 and all these Optimizations were performed Automatically for you so you didn't have To raise a finger just confirms a few Settings and now everything or every Image that you upload is now being Optimized so these this this or this is For the new images that you upload what About the images that you already have For that you need to go to the bulk Optimize option area right here and once You're here since I have already Uploaded or I saw all the images I have Loaded I have already been compressed so I won't find any I'd say uncompressed or Unoptimized images but what you can do Is just click for on or click this Button which says scan for unoptimized Images and the plugin will scan for Unoptimized images on your site you see Here now I've also found 10 optimize or 10 images that might be part of my theme Files that are not optimized so I click This button which will optimize those Existing images which are might be logo Files or images that are come as part of My theme and all of these images now Also optimize so for new images as soon As you upload the images they'll Automatically compress automatically be
Uh change the resolution and Automatically we will change to write Format and once you have done that you Can also go back go to the bulk optimize And optimize all the images that are Already present on your website this is All for free this is all automatically Done for you nothing need to change so This concludes part one of our video Let's talk about the second part where We optimize our images so that we can Get the maximum traffic to our website With image SEO So let's talk about how we get the Maximum amount of traffic from Google And other search engines with the power Of image SEO once again we'll be making Changes to the image itself but we'll be Changing some data about the image not The image itself we'll be changing three Most important aspects the first one Being we'll be optimizing the name of The image this is very important for Google and Resurgence to understand and They use the name as a signal of what The image is actually about the second Thing we'll be changing is the alt text Now alt text is a piece of text that is Represented or shown up on the image Itself and also the metadata especially When the images actually fail to load so If somebody's actually using your Website or browsing your website from a Slower internet connection and images
Fail to load then the alternate text Also appears on the screen so not only Will Google actually use this as to Understand what the image is about it's Also useful for accessibility reasons Where users can actually read the alt Text on the screen if the image fails to Load on that we can also change the Title and add a descriptive title of the Image which can also be used for Metadata and also ranking reasons and The fourth a bonus tip that you can add To your images is caption which they Will depend on the kind of context every Provide with the individual images so Let me show you how you'll make all These changes on your images so I'm Inside my WordPress website inside the Media library I have some sample images Uploaded to the website let's say I want To change the metadata or all this data For this image now of course you cannot Change the images or change the name of Your images right inside WordPress I'll Present a solution for that as well but Let's uh start about uh talking about The other methods or other data first so We have the alt text we have the title And the caption here so what you can do Is first of all this title is not pretty Descriptive so I'll delete this but I'll Just add the alternate title and the Same as the alternate text and the title As well so I'll name this or I'll say
The alt text of this image can be dog Sleeping On the bed And woman Working On a laptop In So I added a pretty descriptive alt text But you can keep it short depends on the Kind of image you have I'll paste the Same thing in the title of the image as Well now once I've saved this or once I've just let go it's automatically Saved now whenever I add this image Particular image to any of my posts the Alternate text and the title will Automatically reflect these changes now For the images that you have already Added if you go and change the alt text Then the alt text will not automatically Be update it on the post itself so You'll have to go and make those changes To the post themselves but you can make The other changes right here the Alternate text and the title but what About the names of the images the names Of the images is very very important so To do that and to make all these changes Seamless because there are couple of Problems with this approach even though You have added the alt text and title Here there's no way to keep track of What actually of what images have you Optimized and also you cannot change the
Images right here inside WordPress so That's another problem as well so to fix That I'll recommend a better solution Which is to use a specific plugin Designed to solve all these problems so Let's install the plugin I'll show you How exactly it works So to install the plugin we'll go into The plugins menu of our website once Again we'll go to add new and I'll just Show you which plugin it is we can just Search for rename images it's very easy And once all the plugins actually come On on the screen the plugin I'm going to Recommend is a very specific one so make Sure the plugin is this one which is Called media file renamer renamer files Manual Auto and Ai and it's by Jordi Meow so I'll install this plugin Let's also activate it so the plugin is Now installed and once the plugin is Installed and activated on your site You'll see this setting option appear on The menu entry which is meow apps so Access the settings of the plugin we'll Go into the mail apps and inside the Renamer options where we'll find a lot Of different settings and we'll just Configure some basic settings and you Should just replicate these settings Because the plugin does have a lot of Automation features which we are not Trying to use at this point of time just Using the manual rename feature so
Inside the method we'll keep the method To disable automatic rename and in the Manual options we'll enable the rename Field enable sanitize with extra options On upload enable images only enable and Inside the side updates I'll just keep It the post enable inside the UI I'll Enable undo I'll enable the alt field as Well this is the settings that you need To configure inside the basic Options Under Advanced option what I'll do is Just make one more change I'll disable Or lock the automatic rename because I'm Not going to use it I'm going to disable The manual rename lock that means I Should be able to manually rename the Images so once this is done the settings Will automatically be saved so you don't Have to press save button and once it's Done we'll go ahead back into the media Library and start making changes to These images or not in the media library But inside of particular options media Library inside the renamer options this Is where all the settings will live so You see all these images that I have Uploaded to the website and there are Few different images which you see are Not optimized from any metadata see the Title is not optimized there's no alt Text to this image and the name of the Image is also not very descriptive if I Click on the image I might be able to Just go back and see what the image is
About so now I can just confidently say What the image is about I'll just go Back and now I'll rename the images Appropriately so I'll just go here to Rename the image and just change the Name of the image or type a new name So once I've typed in an appropriate Name for the image all I have to do is Just click the rename button and now the Image has been renamed and what about The title and the alt text well I just Click the edit media button and I'll Just change the title and also add the Alt text right here so I'll just do what Do it once again Foreign Title and all text which is descriptive Of the image let me click the OK button And the image will instantly disappear Why does that happen because I've Optimized the name as well as the all Title or alt text and the title an image Doesn't disappear it's just going to the Lock state where you can go and check Out the image at a later date to Understand that oh these are the images I've already optimized and these are the Images I haven't optimized so it gives You a great user experience where once You optimize all the data about image It'll automatically disappear from the List of images that need to be optimized So you can keep up on top of the images That you actually need to optimize so
This provides a great user experience And once you've done this you can Actually go back to a post and check out That all these data about the images Showing up so let's go check that I'll Go to post I'll add a new post to the Site And I'll just try it and add an image Block here so I'll just type in image I'll open up the image I'll go to the Media library I'll find that particular Image that I just selected and you can See the name of the image has been Updated the optimization that we already Did have been updated and also you see All text and the title also appearing if I just add the image here you can see All title also appearing which you can Optimize on a per post basis now for the Captions you have to add the captions Manually so just click here and add Captions or wherever the options for the Captions appear on the screen so let's Say this website was about synography And how to set up lighting and camera Angles I could make the caption as Perfect lighting setup for an interview So I'll just go here click the caption Button and I'll just type the caption in Which is So once I've written the caption that I Want to I just have to click away and Continue building the page as I would Want to create and with that every kind
Of metadata has been added to the image They have the right names they have Right all text the right title and also The caption that users need to give them Context about the image we've also Optimize the images completely in terms Of size resolution compression and also The right format but there's one Additional thing you can do take it as a Bonus tip that will accidentally I say Help you save a lot of your crawl budget So let's talk about that specific thing As well So what's this bonus optimization that I'm talking about let me just show you So inside the media library I have all These images right now I'll just open up Any one of these images and you'll see Attachment details this is a page Attachment Details page but you might Have not noticed this feature or this I'd say option right here just view Attachment page now what is an Attachment page let me just show you I'll click and open it in a menu tab you See a dedicated page created just for This attachment which just features this Particular image now why does this not Make any sense because this is not a Very useful feature but why is this Detrimental is because let's say you Have hundreds of images all these will Have separate attachment Pages created And all your crawl budget inside Google
Will be wasted or I say not properly Utilized by crawling these images and Attachment pages so the best way or the Best solution is to eradicate or I say Disable attachment pages and redirect Them to directly either the image or the Post that contains the image itself so How do you do it well there's a way to Do it with code but the easier way that You can do this is using a plugin which Is called all-in-one SEO it's an SEO Plugin and it can say supercharge your Website SEO but I'm just going to talk About this particular feature in this Video because there's a lot of videos We've done and I'll leave some videos in The descriptions video you can go check Them out so I'll go into the plugin Section and I've already installed all In one SEO on my website you can go into Plugins go to add new and just search For AIO SEO and once you find this Plugin make sure to install and activate It on your website and once it's plugged And installed you'll see all of an SEO Menu appear right here hover over it and We go to search appearance and inside Search appearance we'll just look for a Particular setting inside image SEO and Inside images SEO this is the feature I'm talking about redirect attachment URLs right now it's disabled that's why We are seeing the attachment page but You can make that to attachment or
Attachment parent if you make this Setting to attachment or change it to Attachment that means you will open up The image directly as part of the URL or Directly the image file not an Attachment page if you go to attachment Parent then what will happen is whatever Image or whatever post contains that Image it will be redirected to that Particular post now sometimes what Happens is you have a post in multiple Pages or image in particular multiple Pages then the safer bet is to just keep It to attachment so I'll save my changes By disable or giving an example by going To attachment right now once again I'll Go back to Media Library I'll just Refresh my page just for safety and once The page is refreshed I'll open up the Same image and I'll open the attachment Page once again and now this time it Just opens up the image file directly Which is a much better way of handling This right now so just to recap Everything we've done in this video to Completely supercharge our image SEO we Took all the images we resize them Compress them and also change the image Format I showed you uh showed you a Manual method of doing it and also how To do it an automated way using a free Plugin we also changed and updated the Metadata of all the images which change Their names the all text the titles also
Learned how to add captions and I showed You two different ways where you can do It manually one by one and also plugin Where you can do it manually but a much Better interface or with a much better Interface so that you can not only Rename everything that you want to but Also organize your images perfectly and Also I showed you how to redirect your Attachment page URLs so that your crawl Budget is not wasted and once you've Done all this you should see uh Significant lift in not only the Performance of your website but also how Much traffic is coming to you from Search engines using images or just with The power of images now make sure you Have enough images for it to have a Significant impact on your website Otherwise if you just have one image and Expect it to give you significant better Traffic that's not going to happen but If you have an established website with A lot of images a lot of traffic already Coming in by making these changes you'll Ensure that your website's traffic is Not being wasted when I say your website Resources are not being wasted by Unnecessary large images so that your Server can actually conserve the Resources to uh serve users and also Providing all the important metadata to The images themselves so the search Engines can understand what the image is
About show them in relevant queries Thereby redirecting traffic from images To your website now this might be a lot Of information for a single video so if You have any questions the comment Section is open we answer every single One and if you like videos like this Where you want to educate yourself and Level up your skills in your web Development WordPress game then give us A subscribe and if you like this video a Lot all the effort I put in make sure to Hit the like button as well my name is Yuvraj you're watching wbeginner I'll Catch you in the next video take care
