Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Adobe Illustrator for Web Design Save for the Web Image Optimization and Saving For Web

Ashley Gomez
Ashley Gomez
1,406 Points
Posted by Ashley Gomez
Ashley Gomez
1,406 Points

Why do we save the images from the wireframe?

I don't quite understand why we're slicing the images and saving them separately from the wirefram when we already have the same image that we imported into the wireframe. Can anyone clarify? Thank you!

Adam McGrade
Adam McGrade
26,333 Points
Adam McGrade
Adam McGrade
26,333 Points

I kind of wondered the same thing. I guess one reason for doing this would be if you were a designer that needed to hand your design off to a developer to do the coding. By slicing the images from the wireframe you would be providing them with optimised images in the correct dimensions, making it easier for them to code up the design.

4 Answers

Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

We are doing so to get the masked version of that image and optimize them for the web.

Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 7,294 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

I second Hammad's answer, in that you need the image to be the exact size and ppi, for the website. I would also recommend checking out Photoshop's Generate Image Assets capability. By building your wireframe in PS, then naming the layers as you would name a file (e.g. blueHeader.jpg), when you generate assets, it will automatically save the images for the web. It is an awesome feature.

Hammad Ahmed
.a{fill-rule:evenodd;}techdegree
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 Points

Thanks Sarah!

Ryan Nee
Ryan Nee
6,728 Points
Ryan Nee
Ryan Nee
6,728 Points

I personally believe that the way the instructor demonstrates saving these raster images is the wrong way to save them, especially for a responsive site. Creating final image assets from Illustrator seems risky to me compared to starting the the original image file and saving it through Photoshop. You can technically do this in Illustrator, but it seems likely to reduce image quality.

JPGs are a very fickle format with a lot of risk of data degradation if you're not careful, and I don't understand why anyone would use Illustrator as an unnecessary middleman between the original image and the internet.

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

There's a good course on here called Responsive images by Nick Pettit.... https://teamtreehouse.com/library/responsive-images

Good websites that are optimized efficiently have different crops of the same image, that are used for different screen resolutions to optimize the bandwidth.

I suppose if you have a file for every single crop of the photo, you would have a folder filled with tonnes of images. A nice benefit of the instructors method is that it keeps the photos nice and clean, centralized in only one file.