You should attempt to reduce the amount of HTTP requests, because the fewer you make, the shorter your visitors wait for content to finish loading. Your visitors may be accessing your web content on a 3G connection, where speed is limited. Figure I-1 A server delivering the correct resolution image based on display pixel densityīecause high-resolution images are of a larger filesize, a concern you should address is the amount of resources a user must download to finish loading each webpage. The concept is the same as supplying high-resolution assets in a Cocoa app: devices with Retina displays load high-resolution images, while devices with standard displays load standard-resolution images. The benefit for users is that your website looks great regardless of whether it is viewed in Safari on their Mac or on their iOS device, but most importantly it prevents wasted bandwidth because Safari chooses the appropriate image size to load based on the display, as illustrated in Figure I-1. Safari is able to determine the pixel density of the user’s screen and selects the most suitable version of the image for the user to download. To banish blurry images on a Retina display, you need to supply a high-resolution version of each image on your website. Text and form elements maintain high definition, but images look subpar because they lack sufficient image data. Since a Retina display contains four times the amount of pixels compared to a non-Retina display, Safari automatically enlarges the width and height of all HTML elements by a factor of two. The text on your site might look crisp, but the images aren’t as sharp as you would like them to be. You may have noticed that images on your website aren’t as sharp as other elements when viewed on a Retina display. Next About Proper Image Delivery on the Web
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |