I’ve been looking at my website on a retina screen iPad and (not unexpectedly) the 72dpi images look rough.
I would like to at least have my logo (a vector graphic) looking crisp on high res screens. I presume I could use a SVG graphic see
or create a high res bitmap and use ‘pass-through’ in FW so that FW doesn’t reduce the resolution to 72dpi.
Any views?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Mark,
If your logo is a vector, than SVG should work perfectly (I believe it also has much smaller download times than a bitmap). See this article: Using SVG | CSS-Tricks - CSS-Tricks
One thing to note is that there is no SVG support in IE8 (latest version that will run on XP) and Android 2.2. However, if you are willing to use a markup item instead of graphic, then this code will supply a fallback:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for this snippet, Caleb. If I get a chance I will pop it into an Action. Here’s how I would imagine using it. Draw a graphic box on the page, import the SVG item. Freeway will convert it to a graphic fallback natively. Wrap the generated IMG tag with an OBJECT tag as you have sketched out here. Get Freeway to upload the SVG along with the graphics, and link to it. I haven’t tried this sort of thing yet (getting the raw source of a drawn image) but I have done similar things lately that I should be able to crib from.
Walter
On Mar 18, 2013, at 12:01 PM, Caleb Grove wrote:
Mark,
If your logo is a vector, than SVG should work perfectly (I believe it also has much smaller download times than a bitmap). See this article: Using SVG | CSS-Tricks - CSS-Tricks
One thing to note is that there is no SVG support in IE8 (latest version that will run on XP) and Android 2.2. However, if you are willing to use a markup item instead of graphic, then this code will supply a fallback:
![]()
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the input Walter. I wanted to give comprehensive directions, but am a little busy over here. An action would be positively sweet!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi guys
Given that the SVG won’t work in IE8 and Android 2.2 and I don’t want to have to set up a fallback PNG image and I’m only concerned with my logo which is pretty small:
would a simpler option be to create my logo PNG at 144dpi and use pass through in FW? OK on most screens there will be more pixels than necassery but on a high res screen it will look great.
Is it as simple as this? or have I got to put the image in as a background, and use media queries and background scale? Surely it’s not as complicated as this: http://f.cl.ly/items/0b2O1d1v1s030g363D0c/How%20to%20retinafy%20your%20web%20site%20or%20app.pdf
Thanks
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It looks like I would need to have my logo at 326ppi:
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter
I’ve just seen your SVG Action on the Action Forge. That’s quick!
I presume the Action generates a jpeg image from the SVG image - as the Action doesn’t ask me where the substitute jpeg is.
I may be wrong, but not only does the SVG image need to be at the correct size, but it also appears the FW item needs “fit box to content” otherwise the image grows to fit the item.
Thanks so much for your help again
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ditto Mark’s question, Walter. I am especially curious about auto-generated JPEGs since I’ve never found a JPEG that beats what I myself usually create in Photoshop.
I would also be inclined to use the SVG action if it could include IE8 fallback.
–James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I can’t make it work the way you need it to without a lot of extra complexity in the Action. Your options are to use SVG as a passthrough image, when you know that the bulk of your visitors won’t be able to see it, or to let a Freeway-generated JPEG proxy do what it will. You can crank the “quality” up, I guess.
Walter
On Mar 20, 2013, at 9:37 PM, JDW wrote:
Ditto Mark’s question, Walter. I am especially curious about auto-generated JPEGs since I’ve never found a JPEG that beats what I myself usually create in Photoshop.
I would also be inclined to use the SVG action if it could include IE8 fallback.
–James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So just to confirm, Walter…
When your SVG Action is used, Freeway will automatically create a JPEG (for fallback) of the SVG used. And I assume Freeway will do so at the default chosen JPEG quality setting, which the user sets in Freeway’s Preferences?
You have no implemented IE8 fallback in the SVG Action yet, but you will in the next version? 
Thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Mar 20, 2013, at 10:35 PM, JDW wrote:
So just to confirm, Walter…
- When your SVG Action is used, Freeway will automatically create a JPEG (for fallback) of the SVG used. And I assume Freeway will do so at the default chosen JPEG quality setting, which the user sets in Freeway’s Preferences?
Yes. You import an SVG image into a normal graphic box, so you get all the controls you’re used to there. Freeway won’t publish an SVG output, but it will consume the SVG as if it was an EPS or PDF or whatever sort of vector image.
- You have no implemented IE8 fallback in the SVG Action yet, but you will in the next version?
It already should work in IE8. The fallback is in there, thanks to Caleb’s clever code. View the source, and you’ll see.
Walter
Thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
- You have no implemented IE8 fallback in the SVG Action yet, but you will in the next version?
It already should work in IE8. The fallback is in there, thanks to Caleb’s clever code. View the source, and you’ll see.
I can confirm that Walters action works in IE8. You do have to be careful that Freeway isn’t importing the SVG as a pass-through though. Just make sure that option is deselected in the import dialog.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I have an example here:
http://visionsecurity.jp/en/test/test/
My company logo is the SVG. I imported the SVG into a standard graphics box in Freeway, then I applied the SVG action to it. Here’s the Action:
http://actionsforge.com/actions/view/295-svgimage
Note that I created this SVG in Illustrator CS6. I saved it using defaults. One thing I noticed is that if you don’t shrink your Illustrator Artboard down to almost the exact size of your graphic, it will display the full Artboard size when you import it in Freeway.
Zooming in on my example SVG page in modern browsers will confirm that it is a scalable vector graphic.
I confirmed compatibility in IE7 and IE8 (as well as IE10, which we all know works). I didn’t see anything unusual in IE7, but in IE8, the computer bleeped me and vomited up something about the page wanted to display an Adobe SVG, and it asks the user to install a Netscape add-on, SVG 3.0. (It’s in Japanese on my Japanese XP machine, so I don’t know what the straight English text is). Of course, IE8 displays the fallback graphic just fine, so it’s completely stupid and idiotic that it beeps at the user. If there was no beep, I’d consider implementing SVG graphics across my site, for logos and as a substitute for large GIF text too. But not everyone will like to be beeped at, nor will they automatically install what they are told to. And if they don’t install the add-on, they will get beeped at on every single web page where an SVG is used. AND, they will get beeped at each time they reload the same page!
Now, I know what some of you are going to say. “Who cares about IE8 these days.” Yadda, yadda, yadda. Yeah, I know that. But the answer is: someone who cares enough to have added fallback to this Action, that’s who! So you’ll need to consider this carefully if you decide to put an SVG on your page.
Furthermore, I get very strange results when I hit F12 in IE9 or IE10 and then use Compatibility Mode to check the page display in IE8 or earlier. The page just doesn’t display right at all, nor do you get the strange Netscape Add-on error I get in IE8. So you need to use true IE7 or IE8 browsers running on XP to see what some of your visitors will actually see when they come to your site.
Best,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi
I’ve exchanged a few emails with Joe Billings of Softpress about SVG graphics and retina resolution images. I’m sure he won’t mind me sharing the following:
On the Softpress site, they decided against using SVG graphics and instead are using ‘high res’ images making the site look great on retina screens.
This article is what Softpress based their decision on and it is very very interesting:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Images that look great on retina screens and are smaller file sizes!!
And here is what to do
I’ve done this to my logo on www.advocatedesign.co.uk. The file size is pretty much the same, it looks great on a retina screen, there is no additional source code and no need for media queries.
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
if you don’t shrink your Illustrator Artboard down to almost the exact size of your graphic, it will display the full Artboard size when you import it in Freeway.
Try putting a box around you artwork then setting that as your crop area. FW should respect that.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Mark, I read that “retina-revolution” article, and in summary it basically says, “just compress the heck out of your JPEGs and they won’t look as bad as you think, on low-rez or high-rez screens.” Noted. However, I cannot find the article on softpress.com that you spoke of, which points out why SoftPress decided against using SVG graphics on their site. Can you provide a link to that? And if there is no article, then can I encourage Joe to write one for us?
Next…
Mark, I did a right-click on your “Advocate” logo and opened it in a new tab to see that it is twice as large (meaning, it will have twice the resolution when displayed at half size). That’s great, but it leads me to wonder why you didn’t do the same on the graphics within your Windows Phones style Live Tiles. Why not make those Retina-ready too?
Chuck, thanks for your tip. I’ll try that next time. But honestly, I wish Freeway’s AI could be tweaked so it does the grunt work for me (i.e., scan the AI or SVG file to see the physical dimensions of the content and then use those dimensions automatically, ignoring unused surrounding white space).
Best,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Addendum:
By the way, Mark… Great Action you have there. Just one tip. To bring back the Freeway Action icon and make it double-click installable, just open your Action via Get Info in FileBuddy (or similar) and delete out the “Type” (but leave the Creator intact).
–James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi James
“just compress the heck out of your JPEGs and they won’t look as bad as you think, on low-rez or high-rez screens.”
The article says double the size of your images and then compress the heck out of them, because when they are used at half the size (100%) you won’t notice the compression. So you have retina images AND smaller file sizes.
However, I cannot find the article on softpress.com that you spoke of
I exchanged emails with Joe through Softpress Support.
Why not make those Retina-ready too?
I intend to when I get round to it.
Cheers Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for your replies, Mark. (And, Joe, if you’re listening, I’d love to see a SoftPress blog entry on what you decided against SVGs on the SP website. I’m quite curious.)
Mark, you mention “doubling the size,” as per that web page you linked for us. But in fact, we can go higher than that. If you merely double the size, you are going from 72dpi to 144dpi. Not bad, but in light of the Retina Display on my iPad3 being 326dpi (or so), it makes logical sense that going beyond 144dpi would look even more outstanding, albeit with a larger filesize. Toward that end I have quadrupled the size of some graphics on the following test page in my site, yielding 288dpi:
http://visionsecurity.jp/en/test/compliance.html
The header is a JPG (288dpi, 44% quality setting in Photoshop), the VAS badge is a PNG (288dpi, millions of colors), and the document at the bottom right of the page is a GIF (288dpi, 32 colors, 44% lossy). Boxes all have smooth corners via CSS3 Corners, which look perfectly sharp on any screen. Right-click on any of those graphics to open it in a new tab and view it at 100% size.
The only two items still remaining (sans my leather background image) to be Retina-ized are the footer graphic and my “Certifications” GIF text.
I used GIF for that “Certifications” page title because not everyone has the Helvetica Black font, especially not Windoze users. And due to the IE8 bleeping error (as I reported earlier in this thread), I am not enthusiastic about using SVG. I am now pondering use of @font-face via the Caxton Action or the WebFonts Action, but I’ve still got a few questions on the implementation of that:
http://freewaytalk.net/thread/view/89694#latest
Best,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi James
Mark, you mention “doubling the size,” as per that web page you linked for us. But in fact, we can go higher than that. If you merely double the size, you are going from 72dpi to 144dpi.
Yes I asked this question of Joe. I’m sure he won’t mind me sharing his response (which I can’t quite understand):
"Don’t be thrown off by the ppi – what matters is the CSS pixel ratio. You can see a list here: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density. I’d also recommend getting this book that does a good job of explaining what’s going on (far better than I can): http://retinafy.me/
I use a Macbook Pro with Retina display and 2x images look really crisp. The difference between the 1x and 2x on the original article I sent you is incredible."
I’ve read a Smashing Magazine article about CSS pixel ratio, so what Joe says is accurate. However, I would be interested to know if you can see a difference on your retina display between the 2x and 4x images?
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options