andreweick / aedc2

My Family Web site(s)
0 stars 0 forks source link

Retina support (for header image) #1

Closed joshuaogle closed 10 years ago

joshuaogle commented 10 years ago

Retina.js is a great option for retina images, but for your header image we could go straight to SVG. I have a simple script that detects SVG support and switches the extension to a ".png" fallback for older browsers (just IE8 and down really). If you have raster images (like photos) that you wanted to use this for then Retina.js will probably get updated with the new @3x and @4x displays that are starting to come out, but I like that SVG already has vector graphics covered.

joshuaogle commented 10 years ago

Pushed this to master.

I've added the header logo as an .SVG and improved the fallback code for IE.

For other retina images, it really depends on how you want to approach that. We talked about middleman-clowncar, but that requires you to run a command for every image (and for your photos that could be quite a pain). There's also the option of creating an "@2x" version of every image, which is also a pain but could be batch resized and named.

Since this was just for the header image, this should work fine.