Adding Website Images may be as simple as pressing ‘add new’ and then selecting files to upload.
We all know that fast websites are important for conversions, so to ensure your site is fast loading and gets the added benefit of Image SEO, adding website images is a little trickier and involves a few steps.
Image SEO isn’t difficult, but it can significantly improve your traffic, rankings, and search visibility.
Properly optimised photographs will assist your page loading faster. Page speed is part of on-page SEO, so these steps will assist your page with organic search and also help your photos be listed in Google images search, which can bring in additional traffic.
Image optimisation becomes a habit the more you do it. It takes a little more time, but it’s worth it. I always want to do as many things as possible for my clients to rank better and bring in as much website traffic as possible.
Before we begin the steps, let’s discuss image types and what you should use when and where.
Image File Types
- .jpg or .jpeg is for photographs
- .svg for icons
- .svg or .png for logos and graphics with a transparent background
- WebP I recommend using WebP for the images on your website
Amongst those who know me well, it is always laughed about that my image SEO mantra is stuck in everyone’s brain for life “Rename, Resize, Optimise”
Before uploading an image to your website, it is best to resize, rename, and optimise it, as this will help with Image SEO, UX, and page load speed.
1. Resize
Be sure to resize images to their maximum display dimensions, as advised by your WordPress theme or website builder.
I use the following sizes for this website as recommended by my theme but the sizes you use are totally up to you.
- For a Blog-featured image, I use 1200px width with 630px height (this is the best size for sharing to Facebook)
- Landscape (Hero Image) 1920px width x 1080px height.
- For portrait, my preference is 1000px width and 1500 height as they are easy numbers to remember but you can use whatever you like for these but try to keep them consistent.
- Product Image 600px Square
- Favicon 512px x 512px
You can use many tools to resize images, including the photos application with Windows (it’s super easy & fast to use), Photoshop, and some people resize using Canva.
If you want to bulk resize in batches, https://imageresizer.com/bulk-resize is a handy tool. https://bulkresizephotos.com/en is another free tool
If you would like to know the theme, plugins and hosting I used to build this website, check out my tools and resources page
2. Rename
I name the image the target keyword of the page.
A unique name is better than something generic like 123789846.jpg. The image name is an opportunity to target the keyword.
Use – to separate words and use lowercase.
For example, my home page target keyword is ‘larap digital’ so I use larap-digital.jpg and if there are multiple images I use a number so the file name would be larap-digital-1.jpg
Google has published a guide of its own image best practices
3. Optimise
Large images slow your page load time, and nobody likes a slow webpage.
Optimise before and after adding an image file to your web page. Use WebP if possible.
Before Upload
When you resize the file, it will be smaller, but you can optimise it further by using optimization tools such as https://tinyjpg.com/, an excellent free tool.
You want the file size to be the smallest possible file size, but you want the resolution to be of high quality. I aim for a file size of under 100KB wherever I can but sometimes an image can’t be that small and keep the resolution, so it may need to be bigger
Upload into the media library:
In WordPress, go into the Media Gallery and press Add New
After Upload
In WordPress.org, add an image optimisation plugin and use WebP images.
There are many to choose from with popular ones being Ewww, ShortPixel, Imagify or Smush. These plugins help minimise file sizes even further. I use Ewww Image Optimizer as I like their Easy IO CDN + it serves WebP images.
Having a high-quality photo that is as small as possible is precisely what you want.
WordPress Automatic Sizes
When you upload an image in WordPress, it automatically creates several copies in different sizes (in settings>>media). Different themes and plugins can further increase the number of sizes generated.
You can write code in your functions.php or use a PHP snippet to remove the image sizes you don’t need and free up some space on your server. If you have a lot of media files, you can offload them too (they are stored elsewhere and called when the page renders )
WordPress Media Replacement
When you upload an image in WordPress it creates a URL for that image. If you want to change an image that you used throughout your site you don’t need to go to each page and replace it. Shortpixel has a media replacement plugin that is handy for this task. With my care plans I include a premium plugin that has media replacement and other cool things such as media galleries.
4. Add Alt Text
Alternative text that shows the image in case it can’t be shown to the user for many reasons is also needed for accessibility for the visually impaired and to help Google understand the photo.
Google is blind and cannot see your image, but it can read content and code and can read ALT Text.
- Be Descriptive and Specific
Alt text should always describe the contents of an image in as much detail as possible.
The more specific you can be when describing an image, the better, as this will help it rank on Google Image Search and help visually impaired people better understand the content on your page. - Be Relevant
Alt tags aren’t a place to spam keywords and should be used to describe the file, such as ‘Lara P Digital Home Page Hero’
Try to write alt text that describes the photo in a way that relates to your page. - Be Unique
Don’t use your page’s main target keyword as the alt tag for every alt text. If there are five photos, use a different keyword variation, such as LaraP Digital Home Page Hero, LaraP Digital Pink Website, LaraP Digital Solutions, etc.
Always be sure to write unique alt text that describes the specific contents of the image.
5. Geotag
This is a bit of a bonus add if you are doing local SEO, some SEO specialists swear by this tactic and others think it’s bogus.
Essentially Geo-tagging allows you to connect your photos to locations. Geo Imgr is a handy tool for doing this
6. Implement Lazy Loading on your website
We can’t ignore that photos are usually the assets on a page with the largest file size and, therefore, slow down your page. It’s unavoidable.
You can’t have a great website without photos. They are too important to provide clients with what they are looking for and provide a great user experience.
They make your website more engaging, pleasing and helpful to a user.
By using lazy loading, we defer a browser from loading an image until it is needed.
I use WPRocket for this task and include this plugin with all my website maintenance plans. It’s a fantastic WordPress cache plugin for many speed-related tasks.
So there you have it, my top 6 steps for adding Images to your website and Image SEO.
I am obsessed with site speed, and I list all my favourite tools on my tools and resources page. I have also written a thorough post explaining why site speed matters.
I hope you found this blog helpful
Until next time
