- 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 .jpgfile with the filename myImage@2x.jpginside of the /images/folder within the /retina/folder that we created. Then resize the image to 50 percent and save it as myImage.jpgto 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.
<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.
Không có nhận xét nào:
Đăng nhận xét