A Flash Developer Resource Site

Results 1 to 12 of 12

Thread: Any tips for optimizing photos for Flash?

  1. #1
    Member
    Join Date
    Jun 2006
    Posts
    75

    Any tips for optimizing photos for Flash?

    I'm curious if anyone has any great tips for preparing photos to be used in a Flash website.

    I'm very familiar with Photoshop and I've designed many non-Flash sites so I know the general approach for preparing photos for the web. I've done a few Flash sites which are heavily image based... no images galleries but just large photos used in the layouts.

    In the interest of keeping the file size down to a minimum, I'm bringing the quality of my jpegs down to 45 or even 30 in Photoshop (this usually makes them around 40K +- 10K each). Needless to say, they lack the sharp quality of a good image when brought down to this size.

    Lately, I've seen some really great Flash sites that have very large images in their layout The photos are very clear and the site moves smoothly/quickly.

    So, I guess my question is two-fold:

    1) What can I do to maximize the quality of the photos without compromising the speed of the site?

    2) As a general rule, what is the range of quality for photos brought from Photoshop into Flash? (jpeg, psd, gif?)


    thanks for any insight!

  2. #2
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,449
    Moved to design and Graphics
    - The right of the People to create Flash movies shall not be infringed. -

  3. #3
    Senior Member
    Join Date
    Apr 2002
    Posts
    2,849
    I've discovered lately that I get the best results by bringing photos in from Photoshop as 24bit png files and letting Flash do the compression.

  4. #4
    Member
    Join Date
    Jun 2006
    Posts
    75
    thanks for the tip!

    Are you controlling the compression level in the Publish Settings Jpeg Quality slider?

    If so, what are you setting this too?

  5. #5
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Personally I think you get better results by adjusting the compression for each image individually by double-clicking it in the Library. As for how much, unless they are very, very similar then that's going to be different for each image as well. You might be able to get away with 30% on one, but on another that could easily end up introducing far too many artifacts.
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  6. #6
    Junior Member
    Join Date
    Jan 2007
    Posts
    13
    i suggest you not to resize yor photo in flash.. i mean to drag that stuff to resize/rotate and so on.. try to make it from the beggining the size you need..
    this is my tip, hope i helped

  7. #7
    Member
    Join Date
    Jun 2006
    Posts
    75
    Thanks to everyone for the tips.

    I'm now bringing in 24bit PNG files and having Flash take care of the compression.

    Since I'm using fairly large, detailed images, (1000 x 600px) I'm finding the best quality is around 90% for each, which makes them around 148K each.

    This makes me wonder what an "acceptable" size is for an image. What's good practice?

    I want the images to look crisp but I don't want them to take forever to download. Any suggestions?

    thanks again

  8. #8
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    ive always been a big fan of the 24bit png as well for using in flash

    i would suggest generating a size report for the swf file when you compile it to find out exactly where filesizes jump. you can do that by opening up the publish settings, and its a checkbox.

    itll tell you in bytes where all of the filesize is allocated.

    is that 148k the filesize before you brought it into flash? becasue after you export with flashs compression, itll be way smaller.

    and...how many of these images will you have onscreen at one time? if the entire thing is just 148k, thats not bad at all..i try to keep a graphics heavy site down to maybe at most 300k per page, which still isnt that bad, i just like to keep things loading fast and moving along.

    and one last thing...i hope you dont try to animate that image or mask it. performance will just plummet

  9. #9
    Member
    Join Date
    Jun 2006
    Posts
    75
    Thanks for the tip.

    The png is much larger than 148K but when I click on it in the library and adjust the compression to 90%, then hit the Test button, it reports the file size to be around 150K or 7% of the original. The entire page with content is only 160K total.

    The site I'm building will have just one large image each, none are animated.

    Still, at this size they take about 4.5 seconds to load using the Simulate Download with DSL setting (my usual test).

    How are you getting pages at 300K to load fast and smooth?
    I'd love to crank up the photo quality to get an even better image but I'm not sure of the best way to keep the site fast and still get that great image quality.

    Any help would be great!
    thanks again

  10. #10
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    i dont usually go by those bandwidth settings, they are always slow, i just test them out on different computers with different connections. this site: http://projects.youdontevenknow.us/sage/ has about 400k-500k pages, and the load time is pretty minimal. but, each page is basically a 1024x768 png with content and animations and loading external content from a database.
    Last edited by MyFriendIsATaco; 01-26-2007 at 02:11 AM.

  11. #11
    Member
    Join Date
    May 2004
    Location
    Springfield
    Posts
    50
    keep images positioned on whole numbers, keep them sharper. avoid using 1.2 etc. the applies for pixel fonts
    In the words of Homer the Great! If it's too hard, it's not worth doing!

    Finally found a use for all the forwards I received Inboxity.

  12. #12
    Senior Member
    Join Date
    Nov 2005
    Location
    dante's inferno
    Posts
    904
    I usually size my photos in photoshop, then use the unsharp mask in the filters to bring back the"sharpness." You have to mess with the sliders a bit to find a setting you like, then test it on your site. it took a couple of runs, but I finally found a setting i could work with.

    IMS

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center