Adding Website Images
Adding Website Images is as simple as pressing ‘add new’ and then selecting files to upload. But to get the added benefit of Image SEO plus to ensure your site is loading fast, this is a little trickier and has a few steps involved.
Image SEO isn’t a difficult task but it can make a difference to 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 in being 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.
We always want to do as many things as possible for our clients to rank better and bring in more website hits.
Image File Types:
- .jpg or .jpeg for photographs
- .svg for icons
- .png for logos and graphics with a transparent background
- WebP is a relatively new file type and we recommend serving WebP to assist your Image SEO and page rankings
The Minx Team always laughed about my image SEO mantra is stuck in everyone’s brain for life
“Rename, Resize, Optimise”
Creating a great User Experience (UX) is an important part of SEO
The 5 steps to adding website images
Before uploading an image to your website it is best to resize, rename and optimise it as this will help with your Image SEO, UX and page load speed.
1. Resize
Be sure to resize images to their maximum display dimensions. We use the following sizes:
- For a Blog featured image, I use 1290px wide as that’s the page width I generally use when building a website.
- For Landscape, I use 1920 width x 1280 height.
- For Portrait Images, I use a minimum of 900px wide.
There are quite a few tools you can use to resize images, including the photos application that comes with Windows (it’s super easy & fast to use), Photoshop, and some people resize using Canva.
2. Rename
Generally I rename the file as either the brand name, the name of the person in the image or perhaps the target keyword of the page the image will be used in. It helps me keep track of all the images and where they are without needing to scour the site later cleaning up the WordPress media library.
A unique name is better than something generic like 123789846.jpg. The image name is an opportunity to target the keyword.
Use a – to separate words.
For example, our home page target Keyword is ‘Atlantic Management’, so we use minx-digital.jpg, and if there are multiple images, I use a number so the file name would be minx-digital-1.jpg
Google has published a guide of its own image best practices
3. Optimise
Large Images slow down your page load time and nobody likes a slow webpage.
Optimise before and after adding a file to your web page.
Before
When you resize the file the size will be smaller but you can optimise further by using optimisation tools such as https://tinypng.com/, which is an excellent free tool.
You want the file size to be the smallest file size possible but you want the resolution to be high quality. We aim for a file size of under 100KB wherever we can, but sometimes an image can’t be that small and keep the resolution, so it may need to be bigger.
Adobe has a good article on Image Resolution, which is a good read if you aren’t sure what resolution means.
Upload into the media library
To do this, login to your WordPress dashboard, go to the Media Gallery, and press Add New.
After
In WordPress.org, add an image optimisation plugin. There are many to choose from, including Ewww, ShortPixel, Imagify or Smush. These plugins help minimise file sizes even further.
Having a high-quality photo that is as small as possible is exactly what you want.
4. Add Alt Text
Alternative text that shows in case the image can’t be shown to the user for many reasons is also needed for accessibility for the visually impaired + it helps google to understand what the photo is about.
Basically, Google is blind & cannot see your image but google reads content and code so 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 ‘Atlantic Management Home Page Hero’
Try and 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 5 photos, use a different variation of the keyword such as Atlantic Management Home Page Hero, Atlantic Management Pink Website, Atlantic Management Solutions, etc
Always be sure to write unique alt text that describes the specific contents of the image
5. Geotag your image
This is probably the most underused image SEO tactic. You can literally connect your photos to locations by Geo-tagging them. This is amazing if you are doing local SEO, as your blog posts will then rank locally.
Geo Imgr is a handy tool to do this
Whilst it isn’t a ranking factor, Geotagging can be helpful
6. Implement Lazy Loading on your website
We can’t ignore the fact 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 useful to a user.
By using lazy loading, we defer a browser from loading an image until it is needed.
We 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 hope you found this blog helpful
Until next time
