WEBSITES, THAT REPRESENT
REALIZED QUICKLY AND PERFECTLY

Images on web - the correct methods for SEO and UX

Pictures are hugely important part of any website. They may be decorative, they can ease users' understanding of your content or deliver an information.

There are not many reasons not to include images on a website. With that you must be careful, because thanks to wrongly used images, you can loose audience or even position in search engines.

How to work with images on a website? What to do to make them searchable, sharp, but small to load fast? How should an HTML code look like?

All of the points in the article are valid for users while uploading an image through any kind of CMS and for real website developers.

If you use a CMS and you'll find out a web system renames or too much compress your images, contact your developer since this is something may be preventing you from getting more visitors.

Fast images loading

Speed in general is connected a success and visibility in search engines of your website. Images usually play a massive part in a final speed score of a website.

What can you do to make it snappy?

Small image's file size

File size must be as small as possible. If the image is visible right on a page, size should not exceed a couple hundreds kilobytes. In some cases is inevitable size of an image in a few megabytes, which are usually overlay or background images. At those cases the image should be downloaded in a background and with a help of smooth transition posted to its place.

You can achieve smaller size by:

  • trying to save the image as .png and .jpg to see which one is smaller,
  • lower the quality of the image to 70 %, which looks the same in most cases (DO NOT change the quality multiple times),
  • resize the image to lower dimensions.

The smaller your image is, the less of a size difference will be noticed, but count every kilobyte.

Load images from a separate domain

Every browser has its limit of simultaneous connections to a server. Every "src" in code, every AJAX and iframe is a request adding to the counter.

Those limits vary by a browser. Google Chrome's limit is 6 and others are the same or lower. It's not very much.

If you load images from a different domain, they will be loading without waiting for the essential sources a website downloads.

For example:

This website is https://web.profit-visions.com/Images are loading from https://f.profit-visions.com/ (the "f" stands for "files").

Use modern WEBP file format

WEBP is a new image file format from Google and they have achieved to lower the size in comparison to standard .jpg and .png. WEBP supports alpha canal (both full and partial transparency) and that makes it an universal image file.

Be careful - WEBP is not supported by Safari, Internet Explorer (Edge supports WEBP) and web viewers like are those built in Skype or other apps and software.

Use them where you know a WEBP is supported. Server it even in sitemaps to Google or Facebook's sharer, they'll handle it.

Serve images proper to a situation

Situations vary, the usual ones are images on a desktop size website and a its mobile version. On both of them are images displayed in different dimensions.

It's a waste to load fullHD image on a small cell phone. Also a phone website is more troubled with speed.

As a developer, you can identify these situation and tell the website to display one image or another.

HTTP cache of images

Standard way of loading an image is to request a server and receive the image data. But the server can also return an information about caching.

If you set a cache to any request, browser asks for it one time and when in the future would ask again, it remembers it and loads it from a local memory. It’s a great way to save server’s processing time and bandwidth, but more importantly too save a user’s ones.

Load something from local memory is always faster, then remotely from some distant place.

Set the cache for as long as you can, even indefinitely. You won’t run into a problem with it since you  should never rewrite images with new.

Quality of images

First is the quality of the image itself, of its content and how well you can photograph. These points are for another article. 

While using an image, you need to keep in mind multiple different displays it will be seen on. Users have displays with many different resolutions, size and density.

The higher display's density is, the bigger must the image be to be properly scaled. Most difficult displays are Apple's Retinas, which are always worth to check.

Higher in this article is mentioned compression of images. Compression is a great thing, but do not go to low just because of a file size. A higher compression may also damage a user experience on some displays.

Dimensions of images must be higher than what is set in HTML / CSS. On desktop, make it at least 1.5x bigger and 2 - 2.5x on a cell phones. It's all about scaling, because phones and many notebooks have resolution higher, than is shown.

A phone has fullHD (1920 x 1080 pixels) display resolution on 5" size. A notebook has fullHD resolution on 15" display. A phone's content is scaled up, otherwise would be everything crazy small. So what should be on 50 pixels is now extended to 200 pixels. You can imagine it as if you zoom in - the image you are zooming looks much worse.

Searchable images

Google reports increasing search of images, so it should not be left out in SEO. Let's look at that.

What images should be searchable?

We have two kinds of images - content and decorations.

Decorations are just to make a website pretty without any meaning for a page's content. These are images you really do not want to have in Google Images search.

In code, decorations should be as a background and not IMG tag. Backgrounds are not read by Google indexing robots.

On the other hand, content images are those important and you must do everything you can to make them visible on the internet.

Sitemap

For some time, Sitemap is not for documents only anymore. You can extend it with every image on the specific URL. Keep in mind the limits of Sitemap. With images in, it could get filled really fast.

To get the most of the search, include 4 different sizes:

  • original
  • ratio 16:9
  • ratio 4:3
  • ratio 1:1

IMG in HTML

To get even better match of a search, there are a few things you should include to every single one in HTML.

All those content images must have "alt" and "title". And not just to have those, but with meaningful text describing content of the image.

Put a text under the image to describe it further. Search engines connect the actual image and a near text. Label the image as appropriately as you can.

Those are great things not only for SEO of images, but also for alternative viewers with disabilities.

Name your images

This paragraph could probably be inside of "Searchable images", but the information is too important to be overlooked.

If you take a photo, name of your image is like "IMG_2035.jpg". If a graphic sends you an image, it has a work name.

Name the file to describe its content.

Search engines read the file's name and use it to identify the content.

Lazy load

It is a technique, where images are not loaded instantly, but are loading as they are needed - when carousel is about to move or user is about to reach it by scroll. It greatly helps in almost every case. Every image that is out of a viewport, is a save of time.

Lazy load is achieved by many ways without a preference.

If you use this method (and you should) is very important to have your images in Sitemap. It's because an HTML document is loaded without IMG tags. Robots like Google's can read them with lazy load, but Google is not the only search engine there is and it's better if you do not take as a fact, that robot can process JavaScript.

Manage your images on server

Do not rewrite image files.

In other part of this article is discussed caching. Even if you won’t set cache, it doesn’t mean nothing will be ever cached. Software works independently and doesn’t need to respect an information from your server.

It means if you replace an image file  with a new one, many people, search engines and other tools keep seeing the old image for months.

Always give the image an unique name and use that in your website.

If you don’t want the old image to be visible, delete it from your server or use other methods fo to forbid access to it. The result should be HTTP status 404, or at least some other then 200.

After you delete an image, Google will show it for a good month before it notices and take it down off search. 

Our services

if your website has a speed troubles or needs to be on higher positions on Google, contact us. We can make you an audit, recommend updates to your website and make the changes.

Back to all articles