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.pngAnd 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?
Can images be combined using the clip CSS Property while still maintaining image SEO and semantics?
seo;html;css;images;performance