Instant Website Optimization for Retina Displays How-to

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.

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.

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" />

The background image example works based on the same concept as creating a normal Retina image. You are filling an area with an image that contains double the amount of pixels needed for a normal display. The background-size property tells the browser what size each tile of the background should be. The same principles apply to all background images, even if they are not a repeating pattern.

The background-size CSS property was added in CSS Version 3. This means it is not supported in older browsers such as Internet Explorer 7 and 8. In these browsers the background will be larger than intended, which is still functional but not ideal. To support these browsers, you'll want to only use Retina background images as part of a media query. We will cover this in more detail in the CSS Media Queries recipe.

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.

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/.

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:

To get started you'll want to gather four icons that are of the same size in your graphics editor. Look for icons that are large because your Retina image sprite will need to be 2x as large as the icons are displayed on screen. For our example, we'll be using icons that are 80 x 80 pixels.

Image sprites are large images that contain multiple smaller images. This image is then set to the background of an HTML element with a height and width equal to only one of the images in the sprite. This prevents all the images in the sprite from being displayed.

To determine which image in the sprite is displayed, background-position is changed. The first value of background-position is the X value and the second is the Y value. A negative X value slides the image to the left-hand side and a negative Y value slides the image up. To figure out the correct offset, count the number of pixels from the top-left corner (which is 0, 0) of your image to where the icon you'd like to display begins. Note that when any value in CSS is 0 you don't need to include px.

The Retina sprite works the same way, but the image is twice as large. To compensate for this difference, we set the background-size property to the dimensions of the smaller image. Now we have twice as many pixels inside of the same space for the Retina Display to create a sharp image.

The background-size CSS property was added in CSS Version 3. This means it is not supported in older browsers such as Internet Explorer 7 and 8. In these browsers the background will be larger than intended, which is not ideal. To support these browsers, you'll want to only use Retina background images as part of a media query. We will cover this in more detail in the CSS Media Queries recipe.

To get started we'll need to gather a couple of images. First, get a high quality image you'd like to use as a border. It should be a full square and could be a picture frame, torn paper, or some other repeating pattern. For our demo we'll be placing the border on an image, and any photo will work. After you've gathered these two graphics we're ready to build a Retina border image.

To create our border, first we set the border-width property in CSS to specify how wide the border will be on each side of our image. If we wanted different widths, we could list out each side starting at the top and continuing clockwise, ending on the left-hand side (for example, border-width: 5px 10px 15px 5px;).

Next we add in two border-image statements to create the border. The first includes the –webkit vendor prefix, which allows the code to work in older versions of iOS. The first part of the property sets the image URL. The following numerical value tells the browser where to slice the image. You can include a value for each side of the border just like the border-width property. We've used pixels, but this can also be a percentage. The final value in the property determines the method of generating the border (repeat, round, or stretch).

The trick to getting the Retina border to work is doubling the slice value. This is because the Retina image is twice as large as the original and has double the pixels. If you were using a percentage value instead of pixels you would leave the value the same for each border image.

To build our media queries we'll be using the images that we have previously created. These include a Retina and normal version of a background image, an image sprite, and a border image with a photo to wrap it around.

To use a media query in our CSS, first we created all the code we would need for our non-Retina images. After that we created the media query statement. The order is important because CSS is cascading, meaning that code is read top to bottom. If the media query preceded the other code, its rules would be overwritten by the code following it.

Our media query is composed of four parts. First, @media begins the media query statement. Then only screen specifies that the device being used must be a screen (another media type could be print). Next, we specify that the min-device-pixel-ratio must be equal to or greater than two. This targets the Retina Display (or any other similar display) because it has a pixel density that is two times greater than a standard display (some other devices use a ratio of 1.5). We also included the -webkit vendor prefix to make sure that our code works on older Safari browsers. To keep our code short we only included one vendor prefix, but if you want full support you may need other prefixes (-o, -ms, -moz). You can find out more about browser support at http://caniuse.com/. Finally, the brackets will enclose any style that we would like applied if these conditions are met.

When we write our styles within the media query we will be overwriting the code written previously, replacing a normal image with a Retina one. Any property that we don't specifically overwrite will remain from the above code. Each type of image has some specific considerations.

To create a background image, we overwrote our image file location with the @2x version. Then we set background-size to scale the large image down to the same size as the normal one. This allows the extra pixels to fill the Retina Display.

Creating an image sprite is similar to the background image. We first overwrite the image with the high-resolution version and then set the background-size to shrink it back down. Note that we didn't need to set the height and width because the values used above are still correct. Each icon in the sprite needs to have its own positioning so the browser knows what part of the image to display. These background-position values need to be stated after the end of the media query, otherwise they will be overwritten and you will only see the top-left part of the image.

To add a Retina border, first we overwrite the image with a @2x version. Then we need to double the amount of pixels we are slicing. If you are using percentages you don't need to adjust the value. Also note that we're using the same border-width property so it doesn't need to be included in the media query.

You'll find that media queries are a good solution when you have only a few specific images that you need to replace. On large sites with many images you'll want to use one of the other Retina solutions described in this book.

Media queries can also be used to target specific screen sizes or device types. For example, to target a small screen you could use the code @media screen and (max-width: 480px). This can be used to have your site adapt well to a variety of screen sizes. This technique is called responsive web design, and it is a great alternative to creating different sites for mobile and desktop users. For more information on this topic, I recommend reading Ethan Marcotte's article on responsive web design at http://www.alistapart.com/articles/responsive-web-design/.

To get started we'll be using the Retina and standard resolution background images we created in the Retina background images recipe. You'll need a large Retina background pattern and one half its size.

To test out the CSS image-set, we first used a div tag with a set height and width to hold our background image. Then we applied a normal background property with a single image. This was created as a fallback for browsers that do not support the image-set property.

Then we added a second background property with -webkit-image-set() wrapping our two images. We used the -webkit browser prefix because image-set has not been finalized yet. This way we avoid any potential issue that could arise if there are changes to the final specification when it is released.

Within the image-set tag, we add the normal URL structure for both our background images separated by a comma. After each URL we include a value to specify the density of each image, the first being 1x and the Retina image being 2x.

Notice that when using this specification you don't need to include the background-size property that was necessary for other Retina background images.

It's very important to keep in mind that the CSS image-set specification has not been finalized yet, and this code will not work on every high-definition device. I felt that it was important to include it here because, once the final version is agreed upon, this could be the preferred method of implementing Retina images in the future. It is recommended only for testing or if you feel that a high percentage of your users have upgraded their browsers and it is fine to allow others to see the standard resolution images.

The first element we created in our CSS code was the button. We started out by creating an optional wrapper called buttonArea, just to give the button some spacing so that it would look better in the browser. The button itself starts out with a few background settings. The first is a fallback for browsers that don't support gradients. Then we added a couple of background properties with linear-gradients. The first one includes the -webkit vendor prefix for browser support since this property isn't finalized at this point, although it is included in most new browsers. To support additional browsers, you'll also want to include their vendor prefixes (-o, -moz, -ms).

linear-gradient works by setting a color and its location. 0 percent is the color at the top of the button and 100 percent is the color at the bottom. This simple gradient will create a transition between these two colors. If you'd like to, you can create complex gradients with multiple values and also change the direction. You can find CSS gradient generators online that will help you when writing this code.

Next, we added the border-radius property to round the edges of the button. Changing this value will affect the amount of curve, letting you create rounded corners or a fully rounded edge like we did in this example.

The box-shadow property creates a drop-shadow on the element. The values for this property from left to right are the horizontal offset, the vertical offset, the blur radius, and the color. The first two properties change the distance of the shadow from your element, and the blur radius will determine how sharp your shadow appears. To create a shadow inside of your shape you can add inset before your other properties (box-shadow: inset 1px 1px 4px #666).

The next two elements were added to finish off the last details of our button. The cursor property makes sure that the button looks clickable when the user hovers over it, and the padding gives us some space between our text and the edges of the button.

The remaining styles in our button are to format the text. The main property to note here is text-shadow. This works the same as the box-shadow property by setting the offsets, blur, and color of the shadow.

Next we created a few shapes using CSS. We've added the margin values to the shapes to space them apart from each other. The diamond was built using a square and then rotating it with transform. Transforming uses a rotation value to move the element on its axis (360 being a full circle). When using this property, you'll want to include vendor prefixes to include support for all browsers as this property is not finalized yet.

To create a circle we created a rectangle and then gave it border-radius. For this to work the radius value must be the same as the sides of the square.

To create our triangle we're making a box with no width or height and using borders to create the shape. Make the two perpendicular sides to the direction you want the arrow to point transparent. This will create the angle and then apply a border to the opposite direction to fill it in. You can also apply the transform property to point the triangle any direction.

Now that you know how to create these different shapes you can try applying the effects we used on the button to enhance them. For example, you could use a shadow on a circle to create a callout on a product, or a gradient on an arrow to indicate a drop-down navigation element.

To get started we'll need a font to work with. You shouldn't just use any font you may have on your computer, as it may not be permitted for use on the Web. If you have specific fonts you'd like to use, it's best to check with the foundry and see if it's available as a web font. For this example we'll use http://www.fontsquirrel.com/ to select a free font kit with all the formats needed for full browser support.

Go to http://fontsquirrel.com/fontface to find a font kit that you'd like to use. These kits include all the formats that you'll need and a code sample of how to implement them. Alternatively, you could use their @font-face generator tool to create a kit from a font that you upload. For this example I've chosen to use the font Bevan within the slab serif section. Download the font kit and unzip the files.

The @font-face tag allows us to define a font that we can use in our styles. The first property, font-family, creates a name to use for the font that we're going to define. Next we code the locations of the font files we're going to use. The initial src is for compatibility with old browsers. Then in the second src property we list out all the different formats for compatibility with as many browsers as possible. Browsers will take whichever font format they are able to display.

Next we create styles to apply to our header tags. To begin our font-family property we list our new font, BevanRegular, which we named in the @font-face statement. Make sure you wrap the name within quotes. Then you can list additional fonts as fallbacks in case the browser isn't able to understand the fonts we provided.

Instead of having to find font packages online or deal with purchasing and converting fonts, you can use a font service. Font services host a variety of fonts on their servers and allow you to use them, for a fee or for free, by adding some JavaScript and CSS to your site. These services also take care of updating fonts, having versions available for different browsers, and licensing.

The disadvantage of using these services is that you're unable to host them on your own servers so there is a possibility of downtime. The advantages and convenience may outweigh this minor concern.

If you are interested in trying a font service, there are many to choose from. Some of the most popular services include https://typekit.com/, http://www.google.com/webfonts, and http://fontdeck.com/. These services all have different font options and different price models, so it's worth checking a few out to find the right fit for your site.

To get started we need a dingbat font to work with. For this example, we'll be using the Modern Pictograms @font-face kit, which can be downloaded from http://www.fontsquirrel.com/fonts/modern-pictograms. Download the kit with all the font formats available to ensure compatibility with older browsers.

To start creating our RSS icon we set up @font-face rules for the font kit we downloaded (refer to the previous recipe on embedding fonts for additional information). Then we created a class to format the button. We started out by creating the structure with an orange background, rounded corners, width, and height.

Next, we added the settings for our new dingbat font. I've added a line-height attribute here to make sure the icon is set in the middle of the button. Finally, we created a div with the rssButton class and added the ^ character to it, which is the RSS icon dingbat.

The benefit of using a font instead of an image is that fonts are vector graphics. This means that the font will scale to any size because it is based on code rather than pixels. A user can zoom to any level on their device and the icon will still appear sharp. You can also reuse this icon at any size or color on your site without having to worry about creating additional images.

To get started we'll need to create a few graphics. Within your graphics editor, create a 32 x 32 pixel image for your favicon. This is typically a logo or an image that you feel represents your site.

Next create an app icon that is square and at least 144 x 144 pixels. A vector graphic is ideal for this icon so you can easily resize it without having to worry about the image quality. You have the option of rounding the corners of the icon yourself, or you can let the device round the corners for you. For this example we'll round the icon ourselves.

The corner radius of your rounded square should be 25.263 pixels to match Apple's icon styles. The formula to figure out the radius for any icon size is: 10/57 x icon size = radius. There are also a number of iOS icon templates that can be found online to help you get started.

Finally, create a startup image at 1536 x 2048 pixels. This image will be used for iPad and iPhone and needs to be resized, so working with vector art is ideal. This image will be displayed when the user launches your site, if you allow it to be run as a web app.

The first item we created was a favicon to show in bookmarks and the browser title. Normally favicons are 16 x 16 pixel files named favicon.ico that are uploaded to the root directory of your site. The Retina ICO file is double the amount of pixels. Browsers will automatically look for this filename within the root directory of your site.

Next we set up our site to run as a web app and gave it the necessary images. The apple-mobile-web-app-capable value for the <meta> tag tells the device that your site can function in full screen. If you're going to use this setting make sure you have all the appropriate navigation built in so the user doesn't need the back button. When the web app is saved to the home screen it will use the images that we specified in our code.

The first set of images we added create an app icon for our site. The browser will take the largest of these icons that it is able to display. These icons accommodate both iPhone and iPad screens. By including these in your code you can provide any filename for the images or location. If you save them with the filenames we used and save them in the root directory of your site, you wouldn't need to put in the code because the browser will look for them there.

Finally, we added some startup images. These will be displayed while your web app is loading. The sizes we added accommodate the three variations of iPhones (regular, Retina, and iPhone 5) and both iPad screen types in landscape and portrait. It's important to rotate your landscape images 90 degrees clockwise (so they are in a vertical orientation) before saving them, so they will load correctly. We implemented these using a media query to display the correct image based on the devices' specifications and orientations.

On the iPhone 5 you may find that your web app won't load in full screen. This issue is due to the viewport value of the <meta> tag. If you have a width set in this tag it will prevent the iPhone from properly scaling the app. Remove that setting and the issue should be resolved.

To get started we'll need a graphics editor that works with SVG. If you have Adobe Illustrator or CorelDRAW you can use those applications to create an image and save it as an SVG. If you don't have one of these editors, I recommend using the open source editor Inkscape to create your SVG. You can download it for free at http://inkscape.org/.

The first SVG image that we created in our graphics program generated an XML-based file. If you'd like to, you can open it in your code editor and take a look at it. To add it to our page we used an object element. The object element is supported in all major browsers that display SVG images (Safari, Chrome, Firefox, IE 9+, Opera, and more). The disadvantage of this method is that it doesn't allow scripting in old versions of Internet Explorer.

If you'd like to use scripting with your SVG image you can use the <embed> tag. The embed tag (<embed src="vector.svg" type="image/svg+xml" />) still works with the same set of browsers, but if you're using an HTML4 or XHTML doctype at the beginning of your page it is invalid code. This code is allowed if you are using HTML5. More information on this topic is available at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML.

Next we created some SVG shapes directly in our page. In most cases you'll want to have your SVG stored as a separate file, but this is a good way to see how the code works.

First, we added the SVG element and referenced its specification. Then we created a circle and defined the x-axis center (cx), the y-axis center (cy), the radius (r), stroke, stroke-width, and color (fill). The two axis values are not required, but they will help position the shape on your page.

Next we created a rectangle with some similar properties. The axis values (x and y) are based on the top-left corner of the rectangle unlike the circle, which is based on the center point. Notice that in the rectangle we used a hexadecimal value for the color. You can add colors by name, hex code, or RGB just like in CSS.

SVG is not supported in some older browsers, primarily Internet Explorer (below Version 9). If you're concerned about supporting these browsers there are a few solutions available. You could detect support using Modernizr (modernizr.com), use Google Chrome Frame (http://www.google.com/chromeframe?prefersystemlevel=true), or use the Raphael JavaScript Library (raphaeljs.com).

To begin we added the jQuery library to our code. This will make it easy to resize our canvas if the device is high-density. Then the first step to create our drawing was adding an HTML5 canvas element. We gave this element an id of myCanvas, so that we could manipulate it using JavaScript, and set its height and width.

Next we added some JavaScript code to draw within our canvas element. The first line of our script created a variable named c to reference the canvas element. Then we created variables to store the pixel ratio (to determine if the device is high-density) and the size of our canvas. Then we needed to create a variable to call the canvas element's getContext() method and set it to 2d so we can draw within the canvas.

Next we created an if statement to check if the devicePixelRatio value is greater than 1, meaning it is a Retina device. If this statement is true, we expand the HTML canvas size and then return it to the normal size in CSS. Then we set the scale of the context to be twice as large. This gives us double the amount of pixels within the same area.

Then we created another if statement to check if the user's browser supports canvas. By adding this you could choose an alternative for older browsers such as loading a static image in the canvas element's place.

Within our if statement we started by creating a rectangle. Using the context variable (ctx) that we created previously, we can start adding drawing methods and properties.

To start creating a rectangle we set the fillStyle property with the color we wanted it to be. Then we used fillRect to create a rectangle filled with that color. We added four values to this drawing method: x position, y position, width, and height. Now we have a green rectangle within our canvas.

Next, we added a circle to our canvas. To begin, we defined a new variable for a second context. This allows us to change the styles that will be applied to the shape. If we wanted the same style as our rectangle we could have continued to use the same context. We set a new fillStyle property and then added a strokeStyle property to set a dark grey stroke around our circle. Next we created a circle using arc(). The values we added to the arc specify the x position, y position, radius, start angle, end angle, and direction flag (true for counter-clockwise and false for clockwise). We used the Math module to calculate the radians for the circle. Then we applied our color fill and stroke to finish the circle.

Finally, we created some text in our canvas. To begin, we defined a third variable for this context. Then we added a shadow using similar settings to defining a drop-shadow in CSS. Then we set a fillStyle property (to color the text), a font size, and a font family. The last item in our if statement was fillText containing the text and x and y offsets.

Canvas is an HTML5 element, which means that some older browsers do not support it. The main browser you'll need to watch out for is Internet Explorer (below Version 9). If you need support for older browsers you should include a fallback for your canvas.

To get started, we'll need a photo to use for our test page. If you've been following along with the previous recipes you can reuse your myImage.jpg photograph, or if not, any large photograph will work. I'll be using my original photo, which is 1400 x 800 pixels.

To get started, we included the jQuery library to make it easy to select all the image elements on the page that we want to replace with high-resolution versions. This example is only replacing a single image, but the code can be applied to any images you add to your page.

Next, we added two HTML <img> tags. Make sure to specify the width and height of the images so when we replace the image with the Retina version the size remains the same. In the second <img> tag we included class="retina" because our JavaScript will use this class to determine which images to replace with a high-resolution version.

Then we created a JavaScript function to load our Retina images. Our script started with an if statement to check if the window.devicePixelRatio is equal to or greater than two, so we only run the script if the user is on a Retina device.

If a Retina device is being used, then we create three variables. The first variable, called images, is set to contain all the images with the retina class. Then we created two additional variables, imageType and imageName, to store the image's extension (for example, .jpg) and the filename without the extension.

The next section of code is a for loop, which continues to run until all the images with the retina class (that were stored in our images variable) have been updated. The first line of the loop sets imageType to the image's extension, which are the final four characters of the filename. Then it sets imageName to the initial part of the filename, without the extension. Now that we have the image name split into two variables, we're ready to add in our Retina image.

The next line of the loop adds @2x to the imageName property and then completes the filename by adding the extension. For this code to work, you'll need to name all your high-resolution images the same as your normal images, but add @2x at the end of the name like we've done here. Finally the src value of the <img> tag is set to our new high-resolution filename.

When using this script you'll need to make sure to only add class="retina" to the images that you have supplied a high-resolution image for. If you add it to an image without a corresponding @2x image you'll have a broken <img> tag. You could also use this script without that class to simplify it, but you would have to be very careful to ensure that you have two versions of every image on your site.

There are a couple of downsides to this JavaScript based Retina image implementation. First, if the user has JavaScript disabled they will only see the regular images. Second, Retina browsers may begin to download the small images first before they are replaced, which may use extra bandwidth. This wouldn't be much of a concern on a small page with few images, but it could cause issues on larger sites.

To get started, download Jeremy Worboys' Retina Images project at http://retina-images.complexcompulsions.com/. For this project to work you'll need a server that is running PHP. If you're using another language you may be able to find a similar script or use Jeremy's code as a reference to create your own solution.

We'll also need an image to test. You can use the myImage.jpg and myImage@2x.jpg images we used in earlier recipes. If you don't have these images use a large photo at 1400 x 800 pixels for myImage@2x.jpg and resize to 50 percent for myImage.jpg. Save them both inside the images folder within the /retina/ folder.

Jeremy's code works by detecting the devicePixelRatio in JavaScript to determine if the user has a Retina Display. Then it sets a cookie with this data so that the PHP code can reference it. If the user has JavaScript disabled, the CSS code within the <noscript> tag creates a fallback reference. Make sure this code is above the stylesheets in your page so that any images that they contain are processed correctly after the cookie has been set.

We made sure to set the height and width attribute of the non-Retina image in our HTML <img> tag so that it is sized correctly when our high-definition image is served. You'll need to ensure this is set for all images and that CSS images have a background-size set. Any image you want served in high-definition will need to have the same filename as the original image with the addition of @2x as we've done here. They will also need to be in the same folder so the script can find them.

When the image is requested from the server the .htaccess file we added (or modified) will use the retinaimages.php file instead of serving it directly. This PHP code checks if the cookie for a Retina device is set and that there is an @2x version of the image. If these are both true, the high-definition image will be served. If it is not true, then the regular version is served.