While it doesn’t speed up your web page per se, it helps visitors perceive the site as loading faster. As visitors check out the loaded content, the site has more time to process other elements of the web page that are out of sight.
14. EXIF metadata impacts image SEO
EXIF metadata is used by cameras to store information in photos, during image compression. They embed data such as date, time, camera model and settings, geolocation, etc.
They are useful for Google algorithms because they carry out specific data about your picture. Here is what Google says on EXIF metadata:
EXIF data optimization shouldn’t be your priority when you are optimizing your image SEO. You need to focus first on image names, alt texts, and image compression.
This being said, it’s really worth to spend time optimizing the EXIF Data of a few pictures. It might be the ranking factor that will allow you to overtake your competitors.
To edit and optimize your EXIF data for SEO you only need GIMP, but you can also do it with Adobe Photoshop or Adobe Lightroom.
15. Use responsive images
This one is essential for SEO as well, and if you are using WordPress it’s done for you since it was added by default from version 4.4.
Images should have the srcset attribute, which makes it possible to serve a different image per screen width — this is especially useful for mobile devices.
You can define the size by the image width (w) or by the image density (x).
<img srcset=" image/photo1.jpg 4025w,
image/photo2.jpg 3019w,"
src="default image/photo.jpg" />OR
<img srcset="image/photo3.jpg 2x,
image/photo4.jpg 1x,"
src="default image/photo.jpg" />Let’s take an example from ahrefs blog:
<img src="image.jpg" srcset="image-medium.jpg 1000w, image-large.jpg 2000w">
The first part of the syntax is a pretty standard <img> tag. We then also include links to two other versions of the same image in different sizes—medium (1000px wide) and large (2000px wide).
Now we are going to steal this next part of the explanation pretty much word for word from this article because it does a fantastic job of explaining what happens here.
Say you are on a device with a screen width of 320px and is a 1x (non-retina) display. The images you have are small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide).
The browser goes:
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
OK, so since I’m a 1x display, 1.5625 is the closest to what I need. It’s a little high, but it’s the best option compared to those other that are way too high.
Now another browser visits the site. It’s also a 320px display but it’s a retina (2x) display. That browser does the same math, only then goes:
OK, so since I’m a 2x display, I’m going to throw out that 1.5625 image because it’s too low for me and might look bad. I’m going to use the 3.125 image.
Make sense? The browser essentially chooses the most efficient image to send to the visitor, thus reducing bandwidth and improving load time. Perfect!!
For WordPress user, it happens automatically. For each image you upload, WordPress makes these versions by default:
- Thumbnail: A square crop (150px by 150px).
- Medium: Resized so that the longest side is 300 pixels wide or high.
- Medium Large. Resized to 768 pixels wide.
- Large: Resized so that the longest side is 1024 pixels wide or high.
- Full: Original image.
Furthermore, WordPress also adds srcset automatically.
16. Use picture tag to load resized webp images in HTML
Let’s have a look at the snippet below. It’s the first step to load a webp image.
<picture>
<!-- load webp if supported -->
<source srcset="img/image.webp" type="image/webp">
<!-- load in case no `source` format applies
and use attributes for presentation -->
<img src="img/image.jpg" alt="Alt Text!">
</picture>This snippet loads webp images when the browser supports them. Otherwise it loads a jpeg. But, this picture element is not taking pixel density, device size, or CSS layout into consideration.
Add comment