4/11/2023 0 Comments Responsive image resizeLet’s take a look at a resolution switching example: We can’t rely on them looking bad to tell us when we need to change image sources. So long as we’re downscaling flexible images, they will always look good. At least art direction provides us with some hints about how many image sources might be needed. What about resolution switching breakpoints So knowing that an image falls under the art direction use case can give us some clues, but it doesn’t answer all of our questions about the necessary image breakpoints. You can see an example of this in the Shopify homepage that we looked at in Part 8.ĭespite the fact that the image only has one major art direction change-from the full image to the cropped one-Shopify still provided six image sources to account for file size and display density. We may find that we still need to have multiple sources that don’t map to the art direction switch. What if one of the art directed images covers a large range of sizes. However, this may only be part of the picture. Or I guess we can, but if we do so, we’re not really addressing the fundamental reasons why we wanted responsive images in the first place. So we can’t simply reuse our responsive layout breakpoints for our images. We want to provide multiple image sources because of performance concerns, different screen densities, etc. With the exception of art direction, the main reason why we need multiple image sources has nothing to do with where the images look bad. For our layouts, we follow Stephen Hay’s advanced methodology: We resize the browser until the page looks bad and then BOOOOM, we need a breakpoint. The answers to these questions lead to different breakpoints than the criteria we use to select breakpoints for our responsive layouts. Where and when should the various image sources be used?.How many image sources do I need to provide to cover the continuum of sizes that this image will be used for?.When I think about image breakpoints, I’m trying to answer two questions: Responsive image breakpoints are similar, but slightly different. In our responsive layouts, breakpoints refer to the viewport sizes at which we make changes to the layout or functionality of a page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |