SVG & PNG Image Test

While I have yet to get my hands on either an iPad or Macbook Pro with a retina display, it’s clear that high resolution screens will be the standard in coming years. As such it’s imperative for designers to understand how to optimize images for these displays. The main technique being used so far is to basically build your images at 2x, then scale down using html. This is a fine technique, but since I’m now in the research phase, I thought I’d also give SVG a try. Below are the results of a quick run of tests and techniques using the Spigot logo. I chose it because 1. It’s a logo – something most websites will definitely want to optimize, and 2. It’s already a vector based graphic.

To see the effects, zoom in on the page. You can see the differences in sharpness compared to the original logo presented first below.

Original

Current logo, as of 7/13/2012. Looks all jaggy zoomed in, eh?

Test 1: SVG from Illustrator

File saved from Illustrator as .svg. The white background shape has an outer glow effect applied in Illustrator, but it’s not visible here for some reason. The logo looks very crisp when zoomed in, and the colors are exact. See how dark the spigot graphic is compared to the original above? It seems Photoshop changes it slightly when saved as a .png.

Test 2: SVG from Illustrator

File saved from Illustrator as .svg. Tried using an edited version of Illustrators bundled SVG outer glow effect, but it’s still not visible.

Test 3: SVG from Inkscape

When looking for .svg info on the web, there seemed to be more references to Inkscape, so I thought I’d export the file from there. Outer glow still not visible.

Test 4: SVG from Test 1 using <object>

Most of the .svg tutorials on the web stay to use <object> to output .svg files. This clearly isn’t working here and I’m not sure if this is more user error, a WordPress limitation, or otherwise. Either way, using <object> is a PITA compared to <img>.

Test 5: @2x PNG from Photoshop

Vector file imported into Photoshop, scaled up @2x, exported as .png, and scaled down via html. Zooming in looks pretty good. Not quite as crisp as .svg but the outer glow is there. The colors suffer the same issues as the original. Perhaps a Photoshop setting is incorrect somewhere?

Test 6: @2x PNG from Illustrator

File saved from Illustrator @2x, width scaled down via html. Since Illustrator can also output optimized .png files I thought I’d give it a go. Seems to have the same color issues as Photoshop, but looks crisp zoomed in.

Test 7: @3x PNG from Illustrator

Hey, if @2x is good, @3x must be better right? Nope. File saved from Illustrator @3x, scaled down via html.

Test 8: Hand optimized PNG

File saved from Photoshop @2x with the logotype hand optimized to reduce fuzzy anti-aliasing effects. The logotype is even crisper – note the slight fuzziness around the ‘P’ in some of the above files. This seems to be the way to go so far.

Conclustions

I’m far from being able to draw definite conclusions, but I didn’t have the luck I was hoping for with SVG. The outer glow effect I use wouldn’t translate through. It’s in the file, but something along the way is getting lost. This is most likely operator error, as .svg’s are probably not supposed to be added as an <img>. Bummer nonetheless. I was surprised to find that the colors were more true to original using .svg. I’d never really noticed that the current logo was even off. This is probably the reason I’ll continue looking to work .svg into our development.

I have yet to test browser support, but this post will allow for that – let me know what you’re seeing above when using something other than Safari on a Mac.

What I’ll be using for now: Test 8: Hand optimized @2x .png files from Photoshop.

Let me know what you think

I’d love to hear what others have experienced using .svg or @2x .png files. What am I missing?