Optimize an image for the web

Optimize an image for the web

Images play a massive part of traditional on site SEO, and optimizing images is not rocket science, just use your common sense and follow some pretty simple to follow principles.

One of the biggest and most common mistakes I see when somebody with little experience creates, or takes control of their website is images, however, even professional web design companies make this mistake.

So, below is a few basics to ensure that your images are optimize :

Good Quality Images

Always use the best images possible and never use two images that are of the same subject on a single page; it may seem obvious but ensure you use relevant images, it’s really important.

Image File Size

Make sure that the file you are uploading is as small as possible, but maintains high quality. The simplest way to think about it is if you are uploading a few images, that equate to 2/3MB, imagine how long that would take on a weak 3G signal when users are using mobile, even if your website is super responsive the images are going to take an age to appear, or worse the browser will quit and broken images will appear.
My rule of thumb is to never exceed 350kb on a single web page. There are a number of tools to help you reduce your file size – Photoshop is the most obvious, however, software such as Pixlr or gimp is just as good and is free and easy to use.
If you are using WordPress, use smushit software to ensure that your files are compressed even further once uploaded.

Image Alt and title tags

I see a lot errors with alt tags and title tags. The first issue is no tags at all; every image uploaded should have an alt and title tag.
Don’t upload an image and allow the tags to be taken from the file name, which is straight from the camera – for example DSC_0001.jpg – this is quite common in CMS based websites where alt and title tags are automatically assigned via the name of the file, which goes on to another issue: file names, make sure you name your file descriptively, it’s good for your organization.

Another common issue is when every tag is named the same; make sure you mix the tags. If your image summarizes a subject use the subject, along with the local area, however dont keep on repeating these tags in all of your images . The last thing a user with a visual impairment who is using a screen reader wants to hear is “Plumbers Bath” repeated, and believe it or not, this is not what Google wants to hear either, so to improve your SERP chances make sure you get your image alt and title tags correct.

Declare a Width to the Image

Either set a pixel or percentage to ensure that your image is loaded perfectly: this is an issue you will see if you run your website through the w3c validator and it is so easy to fix.
Stock Free Images
When possible try not to use stock images, this might sound a bit rich coming from me, but my stock images will be replaced shortly when I get time to set up a shoot. Real images are easily set apart from stock, and users like to be able to see faces and examples – any company can buy stock images that look nice, so setting yourself a part by using “real” images is worth the effort.

Finally, don’t think that you have to pay £1000’s for a good camera or photographer, most smart phones can take good shots, just make sure you research how to set a scene and composition up, there are lots of tutorials on YouTube to do this, here is a few channels:

Di Casia Film
That Nikon Guy
Snap Snap Snap

Thanks for reading, if you have any questions please get in touch.

Rob @ Developed Web

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>