2x images

2x images are twice the width and twice the height images. The basic idea is to make the image twice the width and height that we actually need. We'll then add that image to our HTML. Then we'll use CSS to constrain the image to the actual size that it will be on the screen. The way I like to do this is the same way I like to handle flexible images in responsive design: I like to make sure that the images will have a containing element with a set width and height value. Then, I make sure the image itself has its max-width set to 100%. Both these requirements are already in place. All my images typically have a container, and in CSS, and all my images have their max-width set to 100%.

Creating a retina size image (2x)

...