: Can images be combined using the clip CSS Property while still maintaining image SEO and semantics? I have two images in my web page. Actually there are 20 but I want to keep things simple:

Posted in: #Css #Html #Images #Performance #Seo

I have two images in my web page. Actually there are 20 but I want to keep things simple:

<div>
<img src="apple.png" alt="Apple" />
<img src="orange.png" alt="Orange" />
</div>

Those two images depict different fruits. But I want to decrease server hits and I want to combine those 2 images into 1 single image as fruits.png

And by using Clip property I want to assign suitable fruit image to the related img tag by the help of class attribute and css rules.

But resulting code looks like below.

<div>
<img src="fruits.png" alt="Apple" class="apple_image" />
<img src="fruits.png" alt="Orange" class="orange_image" />
</div>

Although first img tag's alt attribute says as "Apple", the src attribute points to fruits.png which is not an apple image.

I want to ask, does this usage break semantics of the web? Can Google Image search robot give penalty for such kind of usage? Does this kind of usage affect SEO of my web site?

Or if there is any other method, what is the best solution to handle images while keeping hits low and preserving the SEO quality?