1

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?

  • 1
    Its misuse of the ALT tag and will effect your accessibility score. Your alt tags should a description what the image is about, its one or the other but not both with the method you mention. Use CSS sprites for combing elements and use standalone images for actual images, with actual ALT tag usage. Your server-side requests should be reduced by combing of CSS, JavaScript and other non-element types. The best solution to handle images by serving them on a content delivery network, trying to combine images will be a waste of time, never mind loss of traffic from Google image search. – Simon Hayter Mar 15 '16 at 22:16
  • Thank you very much for your answer Simon. But even with CDN, 20 images block other page assets to download because browsers only download 4 item at a time for a specific domain.So I thought to combine them and use Clip to reduce hits and prevent blocking. What do you think? BTW, I could not understand CSS sprite thing. Is not CSS Sprite and Clip same for my task? Plus CSS Sprite works as background-image, I suppose which will make me replace all img tags with div tags, I suppose. – John Sewell Mar 15 '16 at 23:44
  • Only download 4 item at a time, not true. It's actually 6 for Firefox, Safari and Chrome, and 13 on IE11... and these numbers are doubled when using a CDN... 6 becomes 12, 13 becomes 26... CSS sprites are for UI elements, they are better than clip as they have better support. As I said, you shouldn't be combining photos, its pointless and sucks for accessibility. If your pages are heavy on pictures then you could use lazyload. – Simon Hayter Mar 16 '16 at 10:38
  • @SimonHayter Thank you again. Is there any restriction on CDN number please that can be added for a domain? If I specify CDN for each specific asset, does browser increase simultaneous download? Say css-cdn.example.com, img-cdn.example.com and js-cdn.example.com. – John Sewell Mar 16 '16 at 14:42
  • Just like your website a sub domain or external domain are subject to DNS resolve and server first byte. Using a good CDN you won't notice much if any improvement from using 2 CDN's due to the factors I've mentioned. – Simon Hayter Mar 16 '16 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.