Designing Retina Web Graphics in Photoshop: Should You Work at 1x or 2x?

Photoshop 2x versus 1x

I’ve seen many web designers who work at 1x and I’ve read articles that say it’s best to design at 1x. But I think a more modern workflow is to work at 2x (Retina) size. In this article I’ll explore the various issues affecting our workflow, so you can understand why I recommend designing at 2x.

Let me clarify something before getting started. I’ll only talking about designing web graphics in Photoshop. Other apps like Sketch, Adobe XD, or Illustrator work totally differently, so this article will only focus on Photoshop.

If your unsure of what I mean by 1x and 2x, please read my post: Retina Web Graphics Explained.

Read More Right Arrow

Retina Web Graphics Explained: 1x versus 2x (Low‑Res versus Hi‑Res)

Photoshop 1x versus 2x Explained

I find that many designers (especially those coming from print) don’t really understand how resolution works on the web, so I’d like to explain it. These concepts apply to whatever design app you use (Photoshop, Sketch, Adobe XD, Illustrator, etc.) and understanding this will help you create properly sized web graphics.

Quick Explanation

If an image will be coded into a space of 300 pixels, you have to make:

  • A 300 pixel wide image (for 1x displays).
  • A 600 pixel wide image (for 2x displays).

In a webpage, both images will be coded so they appear physically the same size, but the 2x image has more pixels squeezed into that space (so it appears sharper and more detailed).

NOTE: The resolution you see in Photoshop (such as 72ppi) is ignored by web browsers and is therefore irrelavent. It does not matter what the resolution is set to (so just make it 72ppi). All that matters is the pixel width and height of your images!

Read More Right Arrow