The syntax is similar to Media Query for establishing responsive layout. We can conditionally deliver optimized graphic for specific screen resolutions using Media Query.

A Guide To: Better And Sharper UI Icons With Web Fonts.

There are a few ways to add Vector Graphic on the Web, we can either use SVG, Fonts, or also Canvas previously discussed in: It’s an older app but has no issues running on macOS Mojave.

Unlike Raster image, Vector graphic is not dependent on pixels, so it will be displayed fine and sharp on any screen resolution. Retina Display Menu is a simple menu bar app that lets you select a custom resolution from a drop-down list. Recommended Reading: Better And Sharper UI Icons With Web Fonts Using Vector Graphicįirst of all, if the images do not require realism or a complex color scheme, using Vector graphic is probably your best option. Images can have any height you need, to create an aspect ratio you’re comfortable with. For full-width slideshows (that automatically stretch to the full size of the browser), I recommend going for 2560 pixels in width, which is the standard resolution width for 27 and 30 monitors.

So, in today’s post, we will look into how to deliver specific image that are optimized for high-resolution screens. a) Image sizes for full-width slideshows. However, this affects the way on designers and developers deliver the images on these devices, as images that are not optimized for high-resolution screen will look less than stellar. With million of pixels, Retina display delivers more vibrant, more detailed and sharper images on the screen. Apple set a new standard in device screen resolution with Retina display.

Web image resolution for retina display