Fireworks Pro Series: Optimizing Images for the Web

Fireworks Pro Series: Optimizing Images for the Web

Tutorial Details
  • Program: Adobe Fireworks
  • Version: CS5+
  • Time: 18 Minutes
This entry is part 6 of 8 in the Fireworks Pro Series Session
« PreviousNext »

If you’ve ever wondered about the best possible way to save images for the web, this is going to interest you! In today’s addition to the Fireworks Pro Series, we’re going to look at image optimization in Adobe Fireworks.


Image Optimization in Adobe Fireworks

One of the best features in Fireworks is the comprehensive “Save for Web” feature that has been layered throughout the entire interface of the program. Unlike Photoshop, where saving images for the web is somewhat limited, Fireworks gives you a vast set of tools to refine your web images. Better yet, because Fireworks has been created for web designers specifically, you’ll notice a smoother workflow when it comes time to chop or slice your design into code-ready images!

Even if you’ve used Photoshop for a site design, using Fireworks for your web-image creation will allow you to:

  • Reduce the filesize on web images (up to 40% over Photoshop)
  • Access comprehensive tools for tweaking the image settings
  • Create independent, transparent .PNG slices
  • Create PNG8′s with full transparency
  • Use the powerful 4-Up view for saving images

Here’s the video – I’ll let Tom take it from here:


About the Author

Tom Green is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice. He is an Adobe Community Expert, Adobe Education Leader (Post Secondary), Community MX partner and was listed in Adobe’s Top Ten Most Influential Flash Designers.

Tom has written several books (9 in all!) and extended tutorials on the topic of Fireworks and web design over the last 7 years, so he’s a natural fit to guide us through this incredible program. After this introduction, Tom will be guiding us through the wonderful world of Fireworks with several video tutorials. Alright, now that you know a bit about Tom, let’s dig in!


About the Fireworks Pro Series

If you’ve been wondering about what makes Fireworks tick for a while, this “Session” is being recorded for you!

We’re amassing quite a few tutorials for everyone from the beginner to the expert, so be sure to check out our entire library of Fireworks tutorials.

If you have a particular request or question about using Fireworks for web or app design, post it in the comments section along with any of your other thoughts!

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Carla

    I’m loving these FW tuts! :)
    Thanks!!

  • http://www.paolomeyer.com Paolo

    HOLY SMOKES! Love it ;-)

  • Cooper41

    I really like this Fireworks Series, i hope they continue. But while it’s good to learn about Fireworks functionalities like the “Batching Process” or “Working with Flash” i think it would really awesome to have a complete tutorial on building a real website only using Fireworks and all it’s potential.

    I am not saying to stop what you guys are doing, it’s really great and i really appreciate it, i am just throwing the idea to make a tutorial rounding up some of this functionalities and showing us how we can use fireworks in our design projects.

  • Pingback: Fuegos artificiales Pro Serie: Optimizar imágenes para la Web

  • Pingback: Fireworks Pro Series: Optimizing Images for the Web | Coding Articles & Tutorials

  • http://codemonkeydev.com Thomas Cannon

    Oh wow, all this time I hadn’t realized how awesome Fireworks really is. Bookmarking this series to look over ASAP!

  • http://WIP Peter Richardson

    Great tutorial Tom. I’ve used the selected JPEG mask feature in Fireworks for years, and you are the first person I’ve noticed who has mentioned it. Bravo. I have mentioned it over on CMX and Jim says he has used it, but I don’t remember.

    But I do wonder in this day of much faster broadband how many people actually bother or worry about image size?

    • http://codemonkeydev.com Thomas Cannon

      Accessing the web on a mobile network, either through a phone or wireless card, is one of the primary reasons to optimize images on the web. I hadn’t really noticed it before I had a smart phone, but it does actually make a world of difference. It’s better to play it safe, because you don’t know how someone will be accessing your site.

  • http://freddygcano.com Freddy Cano

    Is there no way to do png24 with transparency using the optimize panel?