Images in Web design and SEO

Images in Web Design and SEO Featured image
Images in Web Design and SEO
Images in Web Design and SEO

Images are an integral part of web design and allow designers/developers to make a website look better than just having lots of text on the screen. Whether it is photos, hand-drawn images, or infographics, images can make a dull website much more interesting. While this can be great from a User Experience point of view for SEO images are empty spaces.

What does Google see?

When you include an image in your website the following code is inserted.

<img src=”yourimage.jpg” alt=”Text describing image” />

What Googles indexing program sees is space where image from yourimage.jpg goes “Text describing image”
Basically, the Google and other search engine indexing programs are blind and can only see the text portion of your website. This is why it is important to include the alt text in all of your images as this is what the search engines see.

Image size and page load speed

When uploading images we all want our visitors to see the best image possible, however, the best quality image may not be the correct image to use in that location.

Take this image:

350 x 150 Image
350 x 150 Image

 

Notice the dimensions written over the image. This is the dimensions at which the image is being shown. While the browser can adjust an original image that is of a higher resolution than this, the higher resolution image also has a much larger file size.

In order for a browser to display any image, it has to first download the image that you specify in your website code. Many first-time website builders, especially photographers, make this mistake. The images that they use for printing out for clients are in the region of 2000 pixels by 3000 pixels which can cause the file size to be greater than 3-5 Megabytes in size. This is a lot of data to be downloaded. This is fine if it is going to be printed or displayed at this resolution. In most cases on the internet, however, we do not show an image at this resolution. Most websites are rarely larger than 1200 pixels wide. While they may scroll off the bottom of the screen they are rarely wider than 1200 pixels because there are very few devices with a screen resolution larger than 1920 by 1080 or Full HD.

Common Screen Resolutions

Take a look at this table of common screen resolutions globally as found by Statcounter.

StatCounter Screen resolutions 2016-2017
StatCounter Screen resolutions 2016-2017

This shows that over the last year the two main screen resolutions have been 360 x 640 and 1366 x 768. The smaller screen resolution correlates with a mobile device and the larger possibly an HD ready desktop screen.
Bringing this question to a more local level this image shows the common screen resolution used in the UK.

StatCounter screen resolutions UK 2016-2017
StatCounter screen resolutions UK 2016-2017

 

Again both 360 x 640 and 1366 x 768 are the most common resolutions with 1366 x 768 being more popular in the UK.

From these two tables, we can see that using images where the original resolution in higher than 1366 x 768 is forcing the user to download an image where most of the data downloaded is being discarded by the browser before being displayed, and as such is something of a waste of bandwidth and time.
It would be more beneficial from a User Experience point of view to upload images at the resolution that they are going to be displayed. Returning to the original image. This image is being shown at 350 by 150 pixels and has been uploaded at this resolution.

Reducing your image size

To achieve this open your image in your image editor of choice whether that is Photoshop, Gimp, or even a web based image editor. Next, you can either resize the image now or resize when saving for the web in the case of Photoshop or exporting with Gimp etc. Whichever program you use we want to save the resized image at X by Y pixels. This can reduce your file size to below 1 Megabyte and in some cases, it could be as small as a few hundred Kilobytes. Once saved we will also run it through another tool to reduce the image file size some more with minimal loss of quality such as http://resmush.it/ or if you are using WordPress then install a plugin such as WP Smush.
By reducing the file size as much as possible it means that your website loads quicker due to less data being downloaded. This, in turn, has a major positive impact on your Search Engine Ranking Position, which will allow you to place higher than your competitor for a similar search.

 

In my next post. I will discuss further steps that can be taken to improve Page Load speed when using WordPress.

Until next time take care and enjoy your wanders around the internet.

Billy

Staff member Billy

Summary
Images in Web design and SEO
Article Name
Images in Web design and SEO
Description
How to use and optimise images on your website for best SEO results.
Author
Billy Winslow Web Design
Billy Winslow Web Design
Publisher Logo

Leave a Reply

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

Rating*