Designer News
Where the design community meets.
↵
Designing Retina Web Graphics in Photoshop: Should You Work at 1x or 2x?(danrodney.com)
over 6 years ago from Dan Rodney, instructor, web developer, designer
Dan Rodney, over 6 years ago
I'd never design at 3x for web (my article was solely focused on web design). It doesn't match retina screens we design on and there's no need for 3x on the web.
Darrell Hanley, over 6 years ago
There absolutely is a need for 3x on the web because the phones are still at 3x resolution regardless of whether they're viewing a website or an app. Again, this is why it would be easier, and more accurate, to design at 1x resolution and export for your various target resolutions, or more conveniently design and export svgs.
I disagree 100%. I've looked at 2x and 3x phones and the graphic quality looks the same (and I have good eyesight). I think anything beyond 2x is a waste of people's time having to download uselessly large graphics (for no noticeable improvement). The web is about balancing performance and benefit. I see no real benefit above 2x that's worth the performance hit. I respect people's time and data plans too much to give anyone a 3x graphic.
Which is why they should be SVGs to begin with, in which case you might as well design in 1x.
SVG is great for vector graphics, but you still need pixels for photos (and thus need to decide on 1x, 2x, 3x). Once everyone has 2x devices and we don't bother creating 1x anymore, what will be the point in designing at 1x? I'm suggesting (what I consider) a more modern workflow that's looking past 1x. Its days are numbered. Mobile and tablet are already all 2x. We're still waiting for desktops to complete the move to 2x (although that will likely take years). Photoshop is not a great tool for SVG design (which is why I do prefer Sketch, and maybe some day Adobe XD), but for now some people are stuck using Photoshop and they have to make the best of it. When using Photoshop they'd typically use Illustrator to export most of the SVGs.
Andy Stone, over 6 years ago
"I disagree 100%. I've looked at 2x and 3x phones and the graphic quality looks the same"
Why even scale up to 2x at this point? There is a 50% difference in quality between 2x and 3x—and it is definitely possible to tell with detailed illustrations/photography on an iPhone Plus or G Pixel.
If you don't want people downloading uselessly large graphics, keep it at 1x for photos that don't matter. Dirty secret: we do that for some photos that lack detail and don't really benefit compared to the MB tradeoff.
Ninja Edit: thanks for putting the time into writing the article, but you will hit a lot of resistance (especially on this site) pushing for Photoshop in web graphics. I wish you luck.
I can't see a difference between iPhone (2x) or iPhone Plus (3x) at normal viewing (and I have good eyesight). Surely there's more resolution there, but normally I can't see it.
You bring up a good point about keeping some things at 1x. Especially with photos you can't always see much of a difference so you don't always need 2x. Sometimes 1x is enough, or you can do something between 1 and 2x. If you really compress your 2x photos though, you can often end up with the extra resolution but the filesize isn't too much bigger than the 1x.
I knew people here aren't fans of Photoshop... but I also know some people have to use it. I never meant this to seem like an endorsement of using Photoshop (but maybe even submitting it here seemed to imply that). I thought it would get people talking, and I think discussions like this are great. Thank you for a thoughtful and polite response :)
And I didn't want to debate what program you should use (I also like Sketch). That's an entirely different topic. Some people use Photoshop and I wanted to address this to those people.
Actually, you'd be better off designing @3x if you really went down the raster path. Many of the phones released over the past 3 or so years are at 3x resolution, a notable example being the plus line of iPhones. Your 2x resolution assets will not upscale without quality loss. I would argue that ultimately, you'd be better off designing in a vector program like Sketch of Illustrator and exporting your assets as svgs wherever possible if designing for the web.
Also by designing at 2x resolution, you're liable to make errors in your design like making odd sized assets or grid layouts.
If you're designing for an app, then 2x is a non-starter anyway since you'll need 3x assets for iOS anyway, and would be strongly encouraged to create 1.5x and 3x assets for Android.