Retina?

[csswizardry]

Is retina worth the increased image-size overhead? Ponder it, Harry!

[Prankstar]

Yes, it is worth it. Because the increased image size dosn't have to be there! : - )

Edit: http://alidark.com/responsive-retina-image-mobile/

[csswizardry]

Those examples are all photographs; I’m not sure how it works with crisp PNGs, like the logo etc…?

[Prankstar]

Lose the "dot.gif" and save your self a http request, and the small increase in file size is acceptable - IMO. Logo should be an image though, not a background image?

[csswizardry]

The logo is an image; the content of the image is just an empty pixel :)

The logo needs spriting anyway as it has a smaller version on mobile. I will look into retina, but it will be retinaing the existing sprite :)

[shanomurphy]

How come you don't just use CSS to create the logo rather than an image? a quick and crude example would be: http://jsfiddle.net/ECtzs/2/

Then you don't need to worry about retina, plus you can simply change the font size at different breakpoints to make it smaller/larger

[Prankstar]

http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

[shanomurphy]

I wasn't suggesting using a h1 and Harry's logo wouldn't be present (in visible form) without the CSS anyway, but yes I suppose the image with alt text is more meaningful for accessibility.

You could always embed the blank .gif with a Data URI to save the extra http request:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

[Prankstar]

For SEO, it's always best to have your site logo as an image, and not background image - and not in a sprite. Would be sad if people Googled for the site and was met by a sprite, instead of a logo.

So Harry "The logo is an image; the content of the image is just an empty pixel :)" will still be meet by either the 1x1 img or a sprite if google even indexes background-images.

The above applies to the CSS version too, since it cant render as an image via. Google images search.

[csswizardry]

Google (nor any machine that affects developers) has any idea what the content of an image is, that’s why we have alt text. My old logo used to be HTML/CSS, but for semantics/performance reasons I decided to go with an image.

[Prankstar]

It still indexes the image as your logo via Google images, given the right semantics ser used. What is Best for the users to see? Your logo or a sprite? Google wont index your site logo as your logo properly if you use a sprite for it - and if you use sprites for it dosn't even matter with the alt, save the bytes instead ;)

[csswizardry]

I value performance and semantics over Google indexing my half-arsed excuse of a logo :P

[Prankstar]

Just leave the alt empty then :P but if your allready doing the http request with the empty gif image, you might aswell just get logo as an standalone image instead. Byte wise its the same, just more correct (less CSS, better for SEO) win-win

[csswizardry]

The alt needs to exist, as that img is (semantically) my logo. The overhead of one 1x1 .gif pails in comparison to the overhead of pulling in my sprite and the extra request for a larger logo image. This discussion has steered well away from retina; I will look into that but I will not be altering my spriting strategy. I’m providing performance benefits through spriting whilst retaining correct semantics.

[Prankstar]

Fair enough, but your question was also performance issues, but last comment though - PROMISE ;D

Your logo is content, not styles.. Therefore the most correct would to keep it out of your CSS. And since you are using your sprite to reduce http request, you kinda just revert back by adding the 1x1 http request - which i my eyes makes no sense.

Taking the bytes out of the sprite, and adding it to an allready existing http request is still the same perfomance.

So if you add your logo as a content image instead og sprite you will get:

• less CSS which means less bytes
• same amount og http request as you have now
• more correct code, since logo is content not styles
• better SEO

All in all - only a win win solution.

Will stop bugging you know Harry, Either Way i love your new site :)

[csswizardry]

My logo is an image. The actual pixel content of an image doesn’t matter to anything – the logo is (semantically) an img which just has a layer of CSS on top of it. The 1x1 gif is a small extra request which can be repurposed should I ever need to sprite an image up again. See YouTube for the same spriting strategy.

[aranw]

Am now running a retina mac and I haven't seen any issues at moment in terms of images, the text looks beautiful and crisp! The only thing I can notice is a little blurring on the logo.

I don't know if that has been compressed so I uploaded the original just in case. http://cl.ly/image/3T090O1H2z2Z

[csswizardry]

Done. Used an SVG which is—obviously—scalable, thus retina, but even better… it gets served minified and gzipped :D Everyone’s a winner.