Creating and optimizing your first Retina image

Exclusive offer: get 50% off this eBook here
Instant Website Optimization for Retina Displays How-to [Instant]

Instant Website Optimization for Retina Displays How-to [Instant] — Save 50%

Learning simple techniques which will make your website look stunning on high-definition Retina Displays with this book and ebook.

$12.99    $6.50
by Kyle J. Larson | April 2013 | Open Source

This article by Kyle Larson, author of Website Optimization for Retina Display How-to, will help you create a high-density image and implement it using the HTML <img> tag. You will also learn the importance of consistent file names. It also explains techniques for optimizing images, what tools are available, and why it matters for speed. and using Photoshop and GIMP to edit images

(For more resources related to this topic, see here.)

Creating your first Retina image (Must know)

Apple's Retina Display is a brand name for their high pixel density screens. These screens have so many pixels within a small space that the human eye cannot see pixelation, making images and text appear smoother. To compete with Apple's display, other manufacturers are also releasing devices using high-density displays. These types of displays are becoming standard in high quality devices.

When you first start browsing the Web using a Retina Display, you'll notice that many images on your favorite sites are blurry. This is a result of low-resolution images being stretched to fill the screen. The effect can make an otherwise beautiful website look unattractive.

The key to making your website look exceptional on Retina Displays is the quality of the images that you are using. In this recipe, we will cover the basics of creating high-resolution images and suggestions on how to name your files. Then we'll use some simple HTML to display the image on a web page.

Getting ready

Creating a Retina-ready site doesn't require any special software beyond what you're already using to build web pages. You'll need a graphics editor (such as Photoshop or GIMP) and your preferred code/text editor. To test the code on Retina Display you'll also need a web server that you can reach from a browser, if you aren't coding directly on the Retina device.

The primary consideration in getting started is the quality of your images. A Retina image needs to be at least two times as large as it will be displayed on screen. If you have a photo you'd like to add to your page that is 500 pixels wide, you'll want to start out with an image that is at least 1000 pixels wide. Trying to increase the size of a small image won't work because the extra pixels are what make your image sharp.

When designing your own graphics, such as icons and buttons, it's best to create them using a vector graphics program so they will be easy to resize without affecting the quality. Once you have your high-resolution artwork gathered, we're ready to start creating Retina images.

How to do it...

  1. To get started, let's create a folder on your computer called retina. Inside that folder, create another folder called images. We'll use this as the directory for building our test website.

  2. To create your first Retina image, first open a high-resolution image in your graphics editor. You'll want to set the image size to be double the size of what you want to display on the page. For example, if you wanted to display a 700 x 400 pixel image, you would start with an image that is 1400 x 800 pixels. Make sure you aren't increasing the size of the original image or it won't work correctly.

  3. Next, save this image as a .jpg file with the filename myImage@2x.jpg inside of the /images/ folder within the /retina/ folder that we created. Then resize the image to 50 percent and save it as myImage.jpg to the same location.

  4. Now we're ready to add our new images to a web page. Create an HTML document called retinaTest.html inside the /retina/ folder. Inside of the basic HTML structure add the two images we created and set the dimensions for both images to the size of the smaller image.

    <body> <img src = "images/myImage@2x.jpg" width="700" height="400" /> <img src = "images/myImage.jpg" width="700" height="400" /> </body>

  5. If you are working on a Retina device you should be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You will notice how much sharper the first image is than the second image. On a device without a Retina Display, both images will look the same. Congratulations! you've just built your first Retina-optimized web page.

How it works...

Retina Displays have a higher amount of pixels per inch (PPI) than a normal display. In Apple's devices they have double the PPI of older devices, which is why we created an image that was two times as large as the final image we wanted to display. When that large image is added to the code and then resized to 50 percent, it has more data than what is being shown on a normal display. A Retina device will see that extra pixel data and use it to fill the extra PPI that its screen, contains. Without the added pixel data, the device will use the data available to fill the screen creating a blurry image. You'll notice that this effect is most obvious on large photos and computer graphics like icons. Keep in mind this technique will work with any image format such as .jpg, .png, or .gif.

There's more...

As an alternative to using the image width and height attributes in HTML, like the previous code, you can also give the image a CSS class with width and height attributes. This is only recommended if you will be using many images that are of the same size and you want to be able to change them easily.

<style> .imgHeader { width: 700px; height: 400px; } </style> <img src = "images/myImage@2x.jpg" class="imgHeader" />

Tips for creating images

We created both a Retina and a normal image. It's always a good idea to create both images because the Retina image will be quite a bit larger than the normal one. Then you'll have the option of which image you'd like to have displayed so users without a Retina device don't have to download the larger file.

You'll also notice that we added @2x to the filename of the larger image. It's a good practice to create consistent filenames to differentiate the images that are high-resolution. It'll make our coding work much easier going forward.

Pixels per inch and dots per inch

When designers with a print background first look into creating graphics for Retina Displays there can be some confusion regarding dots per inch (DPI). Keep in mind that computer displays are only concerned with the number of pixels in an image. An 800 x 600 pixel image at 300 DPI will display the same as an 800 x 600 pixel image at 72 DPI.

Instant Website Optimization for Retina Displays How-to [Instant] Learning simple techniques which will make your website look stunning on high-definition Retina Displays with this book and ebook.
Published: January 2013
eBook Price: $12.99
See more
Select your format and quantity:

Optimizing (Must know)

You may have noticed that the file sizes of Retina images are quite a bit larger than normal images. This is a point of concern, especially for mobile users. Although our data networks have rapidly increased in speed in recent years, it's still important to make sure our sites are optimized for slower connections.

There are a number of different techniques you can apply to make sure your images load quickly. This recipe will cover how to choose the best image format to use in various situations and how to use compression in several tools for images with smaller file sizes.

Getting ready

There are a number of image editing programs you can use to create graphics for the Web. In this recipe we'll cover using Photoshop and GIMP to edit images, but the principles should apply to most applications. If you do not have a good image-editing program that allows compression, GIMP is free to download at http://www.gimp.org/. If you'd like to optimize some images that you've already created there are some automatic compression tools available that we'll discuss as well.

Before you start trying to create optimized images, it's important to understand what file formats work best for various situations. The three main image formats you'll come across are GIF, JPEG (JPG), and PNG.

In most situations GIF is used for logos or low detail icons, JPEG is optimal for photos, and PNG is best for detailed graphics with transparency. Let's gather one image, that would work well for each scenario, to optimize.

How to do it...

  1. To get started let's work on optimizing a PNG image. Open any high color photo or graphic. The first thing we will do is posterize the image. This will reduce the number of color variations that the image contains.

  2. In Photoshop, go to Image | Adjustments | Posterize... in the menu bar. In GIMP go to Tools | Color Tools | Posterize.... This will open a dialog box allowing you to change the number of levels. Lowering the number will decrease the amount of colors used and reduce the size of the file. Start with a large number and slowly decrease it while watching the image preview. Find a level where the difference in the image isn't very noticeable.

  3. Next save the image as a PNG (PNG-24) via Export... in GIMP or Save for Web in Photoshop. In GIMP you can leave the compression level at 9.

  4. Now we'll optimize a GIF image. Open a logo, clipart, or similar image file in your graphics editor. In Photoshop choose File | Save for Web and then select GIF as your image type. On the right-hand side you'll see a drop-down list for Colors. Decreasing this number will result in a smaller image by removing similar colors. If you find it is removing a color that you don't want, you can select that color in the pallet below and click on the lock icon. In GIMP from the menu bar select Image | Mode | Indexed.... Try choosing a maximum number of colors less than 255. Choose a low number of colors that still looks good (try somewhere around 128 first). You'll find that some GIFs compress well and others do not, based on the initial amount of colors.

  5. Finally, we'll optimize a JPEG image. Open a photograph in your image editor. Choose Save for Web or Export.... Both GIMP and Photoshop will present a similar slider that will allow you to set the image quality. The more this number is reduced the more image data will be lost. Typically you can save an image somewhere between 70 percent and 80 percent without noticing much quality loss. When creating Retina images, you may find that you can compress some photos much more than a standard definition image and it still looks good in the browser. Experiment with these settings to see what works best. You can view the preview as you change the setting to see the final result.

How it works...

Each type of image works slightly differently and has a different method of compression. It's important to choose the optimal image format based on the contents of the image in relation to the strengths of each format.

GIF images are best for simple illustrations and icons because they support transparency but only display a maximum of 256 colors. They will compress well if you have large areas of the same color and use very few colors. In most cases, GIF will be your least used image type.

JPEG images are often used for photos because they support millions of colors and compress well. JPEGs are lossy, which means you can lower the quality of the image in exchange for a smaller file size. When compressing a JPEG it is a good idea to keep the original because, once compressed, the image data is gone. JPEGs do not allow transparency.

PNG images combine some of the benefits of GIFs and JPEGs. They work well for photos but are best suited for graphics with transparency. PNGs have high quality transparency without the jagged edge you may find in a GIF image and work better with many colors. They are based on a lossless compression, which retains the image data so you will not be able to compress photos as much as a JPEG.

When starting an optimization plan, it's best to start by focusing on images that most users will have to download. These include graphics that are used in your template and your most visited pages. You can also sort your site's images folder by size and optimize your largest images first. In some cases, you may find that your images can be compressed enough to serve only your Retina image without worrying about your site loading slowly. This is by far the simplest Retina solution. For an example of this, read Daan Jobsis' article at http://blog.netvlies.nl/design-interactie/retina-revolution/.

There's more...

In addition to being able to manually optimize your images, there are a number of tools that will automatically optimize images based on algorithms. These may not always be the most compressed an image could get, but when looking to save time this can be a better option.

There is a variety of software that will help you with compression, such as the following:

Tips for creating repeating backgrounds

When using repeating background images, it is best to make the image the smallest possible tile. For example, a repeating grid pattern could be made with only two connected lines of a square. Try creating your graphic and placing a duplicate next to it to figure out the smallest portion of the pattern needed.

Summary

In this article, we learnt how to create a high-density image and implemented it using the HTML <img> tag. We also learnt the importance of consistent file names. It also explained the different techniques for optimizing images, what tools are available, and why it matters for speed. We also covered how to choose the best image format to use in various situations and how to use compression in several tools for images with smaller file sizes.

Resources for Article :


Further resources on this subject:


Instant Website Optimization for Retina Displays How-to [Instant] Learning simple techniques which will make your website look stunning on high-definition Retina Displays with this book and ebook.
Published: January 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Kyle J. Larson

Kyle Larson is a self-taught web designer and front-end developer who has been passionate about the power of networks since he got his first modem at the age of 10. He studied art and design at the University of Minnesota while working for http://www.techies.com/, a job search start-up.

Kyle is currently a Senior Web Designer, designing for a variety of brands, at Milestone AV Technologies in Minnesota. He also does freelance work with Emergent Networks and a variety of small businesses. When he's not buried in a web project, Kyle blogs about what he learns at http://www.kylejlarson.com/.

Books From Packt


HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

PHP and MongoDB Web Development Beginner’s Guide
PHP and MongoDB Web Development Beginner’s Guide

Joomla! Search Engine Optimization
Joomla! Search Engine Optimization

Drupal 7 Mobile Web Development Beginner’s Guide
Drupal 7 Mobile Web Development Beginner’s Guide

 iOS 5 Essentials
iOS 5 Essentials

Python 3 Web Development Beginner's Guide
Python 3 Web Development Beginner's Guide

 Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Z
M
D
1
n
F
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software