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
And by using Clip property I want to assign suitable fruit image to the related
img tag by the help of
class attribute and
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>
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?