Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Slicing PSD and retina-ready images

Hi, I've been researching information about how to get retina-ready images on sites. I understand that you really need 2x size images (so if you want to set the image to be 100px x 100px you really need a 200px x 200px image) and how there are ways to serve a 2x image only to retina screens. Where I get confused is how to deal with this in a PSD design that I receive and need to slice and code. If a designer gives me a layout that I need to slice how do I slice images that are twice as big as I need them? Do they need to set up their PSD to be twice the size that they want it to be so I can slice it at that larger size (from something I read this may affect the quality of the image as it scales down)? Or do they put in images that are at 150dpi (instead of 72) so when I slice I get a higher resolution image that I can then make larger (although this doesn't seem to work - seems like I can't control the dpi on slicing, I still end up with a 72dpi image)? Or is the only option to have them handle the final images separately, either in their own individual Photoshop files that I can change size and resolution on or that they prepare and provide me with as the properly sized file. I'm especially thinking about when they want to add filters and effects to images and not just use an original file. Any tips or clarifications appreciated, I feel like I'm missing something obvious here!

6 Answers

I always get my designs made at 2X. I can keep it at 100% for retina swaps or when I save for web move it to 50% for normal devices.

If you are referring to using the slice tool in PhotoShop then coding it with DreamWeaver then this is a massive no no. I mean literally never, this is an old technique. Sites should now be recreated with HTML, CSS then you can add images and serve up higher res ones for Retina devices

No, I don't use Dreamweaver, I'm coding everything myself and using Sublime Text, but I'm working on something where the designer gave me a PSD file for the design including photos so the only way to get the photo/image assets is to slice them out of the PSD to use (they did not give me originals and they have applied filters/effects within photoshop). This is how they normally work so I'm wondering how to instruct them in the future to set up their designs so I can ultimately get image assets that will work well on Retina.

And thanks, Chris, doing that was one of my first thoughts I just didn't know if it was the right way. I came across this article when trying to find information: http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs They mention that working at the larger size and scaling down can affect the quality of the image at the lower scale, but maybe that's only noticeable on small things like icons (which I'd handle in a different way anyway like SVG, CSS, icon fonts, etc). Mostly I'm worried about photographs and more complicated graphics that won't work with SVG, which usually are bigger so maybe the issue he mentions isn't much of a problem.

I code email so i cant do everything in CSS like most normal people, but taking 2x down to 1 has always produced clear and precise images for me.

Thanks, funny a "fuzzy" image in an email I coded is what started this whole conversation! Email coding is challenging to say the least!

Here is the code I use to swap them out.

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-650@2x.png) !important;
        background-size: 325px 115px;
        width: 325px !important;
        height: 115px !important;
        }
    td[class="headercell"] img { 
        display: none; 
        }
    }
}