O'Reilly logo

Instant Website Optimization for Retina Displays How-to by Kyle J. Larson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using code instead of images (Must know)

Finding images that can be replaced with code accomplishes two goals at the same time. It will make your site load faster, and any graphics created using CSS will be high-definition. CSS3 introduced many new properties that can be used to create simple shapes and apply effects to elements and text.

When these CSS styles are applied they will fill all the pixels that are available on your device, so you don't need to worry about creating Retina versions. The code remains the same for all devices, which saves development time and loads quickly for your users. In this recipe we'll create a button and a few shapes using only code to demonstrate the different methods that can be used to create graphics with CSS. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required