Consequently, the high res image on a low res display is wasteful. The physical size is the same but if we served a 480px image on the higher density display, it wouldn’t look very good so we need a way to adapt to higher resolutions. For example, a 4 inch display with a resolution of 480px by 480px is not the same as a 4 inch display with a resolution of 960px by 960px. Same size different resolution refers to providing images for higher density displays. Srcset defines the list of images and related size the browser can choose from. The srcset and sizes attributes allow us to offer images of varying sizes that the browser can select as the best choice. We can use the element and incorporate two additional attributes. In this situation we want to display the same image but an appropriately sized version depending on the display. Same size, different resolution and same image, different size. The resolution switching problem can be thought off in two scenarios. Whether cellular network bandwidth or cpu processing cycles there’s an impact to the user that isn’t on the screen. Worse, the image has consumed resources that it didn’t need to. There’s no benefit for the user to receive an image with a resolution that needs to be scaled down. Put another way, we don’t want to send high resolution images to low resolution screens or send low res images to high res screens. The resolution switching problem can be thought of as presenting an image of appropriate resolution given a device’s display density, viewport size or other size constraint.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |