locked
Creating images in design for websites that scale.... RRS feed

  • Question

  • I am currently creating dynamic scalable graphics in design for a software application at my work. I am wanting to expand my talents into scalable graphics for the company website. I am by no means a web developer so I get lost in web lingo quickly. What would be the desired saving format for scalable vector art to be placed on a website. I like the XAML saving features for my software apps due to the decreased file size and flexability but can I use that on the web? Should I save for Silverlight? What if someone doesn't have silverlight on there comp will they be able to view my web graphics.
    remove the warning labels to remove the stupid people of this world..
    Friday, March 28, 2008 3:31 PM

All replies

  • Good questions. I know there's a way to create scalable graphics in a WPF application but so far I haven't found a way to do that for a Silverlight app. As far as whether people can see your graphics on a web page without the Silverlight plugin, yes they can see them but they would be static.

    I'll see what I can find out about scalable graphics for Silverlight.
    Annie
    Friday, March 28, 2008 3:55 PM
    Moderator
  • I don't really mind what format it's in as long as I can put an image on the web that will scale with the changing size of the viewing window, and still hold onto it's quality!
    remove the warning labels to remove the stupid people of this world..
    Friday, March 28, 2008 3:57 PM
  • You might look into the RenderTransform property. You can scale images using ScaleTransform. I'm still new at Silverlight so I'm not sure how you'd program to scale according to resolution. At any rate, in answer to your question that I forgot to answer, yes you would export to Silverlight or use Edit > Copy XAML and paste the XAML into Blend. Expression Web does not currently support Silverlight (I believe) so you'll have to work in Blend.
    Annie
    Friday, March 28, 2008 4:06 PM
    Moderator
  • Since you are asking for preserving image quality while scaling the browser's window size, I assume you cannot tolerent default bitmap scaling in browsers.
    Using silverlight, you can put your artwork as vector shapes, that will preserve exact quality you want at any resolution. However, if your graphics are bitmaps, I doubt you can get much benefit from silverlight.
    And yes, you have to have silverlight plugin at your client's computer to see your silverlight graphics. Altough it's super simple, just a few mouse click in 1 min, and it support many latest browsers, including Mac and firefox.
    Friday, March 28, 2008 6:31 PM
  • Why L said:

    I assume you cannot tolerent default bitmap scaling in browsers.



    yes exactly! lol I'd like to have something that is much more dynamic and interesting than a bitmap image. Unfortunatly I do not want to use silverlight on my page any mroe than neccessary. I would preffer that the common user can come on to my site and enjoy the full experience without having to download anything so they can view it. Not to mention we get alot of 56K people and I don't want to exclude them!
    remove the warning labels to remove the stupid people of this world..
    Friday, March 28, 2008 7:29 PM
  • As long as the image is large, but programmed to a smaller size, you can scale up without losing quailty.
    Annie
    Friday, March 28, 2008 7:42 PM
    Moderator
  • That's how we're doing it now.. It's working fine but I was just curious about trying to find a way to do this without the huge image slowing the loading process. We just had a meeting about possibly going to the way of a total silverlight website!
    remove the warning labels to remove the stupid people of this world..
    • Edited by unattainable Friday, March 28, 2008 7:58 PM typo
    Friday, March 28, 2008 7:57 PM
  • Great decision! I'd love to see the site when it goes live. I hope you'll keep us posted.

    You might have to change your name to attainable! :-)


    Annie
    Friday, March 28, 2008 8:31 PM
    Moderator
  • I can't help but recall SVG: scalable vector graphics.

    While there are quite a few standardised forms of bitmap images a standardised vector format seems to evade all.

    And I ponder upon its usefulness.

    Most workflows seem to take vector artwork > turn it into a bitmap > optimise what you want with the bitmap > do it all again for something web based.

    Maybe SVG could have worked? But then it ties in what do browsers do and what are acceptable standards?

    Then: if a suitable common vector language worked at a pragmatic level would it in effect be better than much evolved bitmap methods?

    I suppose that the conundrum revolves around scalability where vectors do but bitmaps don't on a computer yet on the web: vectors don't but bitmaps do?
    Saturday, March 29, 2008 12:51 AM