Web Designer Freelance Interview Question:

Tell me how do you deal with images for Retina, 4K, UHD and other high-resolution display types? How do you produce and interpret raster mockups made for high resolution displays (including most smartphones)? What's the most important thing to remember?

Submitted by: Muhammad

With the abundance of devices equipped with high pixel density displays, it's important to provide high resolution of some images on a website, and especially important for those with simple shapes and fine lines, such as logos, figures, schematics and product photos.

☛ When an image is used in HTML as an IMG tag, techniques such as PictureFill may be used until the new PICTURE tag is widely adopted by popular browsers. This way, different versions and sizes of images can be served based on the user's device size and pixel density.

☛ When used as a background image in CSS, media queries can be used to target different devices so the most suitable size of an image is served to each user.

☛ When creating or slicing Photoshop (or other) mockups made for smartphones or high pixel density devices, it's crucial to remember that the mockup is twice as large as it would be on the device. A device's 1200-pixel screen width is generally treated as 600-pixel wide. This means a 32-pixel high text in the mockup should be coded as 16-pixel height when writing the CSS file, and a 300-pixel wide image has a width of 150 pixels on the web page (of that device's screen). Effectively one should treat every two-by-two pixel square of the Photoshop mockup as a single pixel on the device.
Submitted by: Muhammad