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 trialAshley Gomez
1,406 PointsWhy 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!
4 Answers
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 PointsWe are doing so to get the masked version of that image and optimize them for the web.
Unsubscribed User
Courses Plus Student 7,294 PointsI 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
Full Stack JavaScript Techdegree Student 11,910 PointsThanks Sarah!
Ryan Nee
6,728 PointsI 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
23,932 PointsThere'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.
Adam McGrade
26,333 PointsAdam McGrade
26,333 PointsI 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.