srcset and sizes attributes - [ images on the web | part one ]
116.4 هزار بار بازدید -
6 سال پیش
-
Using srcset allows us to
Using srcset allows us to load in different versions of the same image based on the size of the viewport, or the pixel density of the user's device. This is really helpful as it's one relatively easy way to go about reducing bandwidth for users on lower end devices while ensuring that users on high-end devices get nice, crisp images.
One cool thing with this is, it's all done with html, but the downside of it is that it can bulk up your markup a little bit, and we all like having clean markup. The other strange thing is, if you use the sizes attribute, you are actually going to be including media queries in your html... which is kind of strange. But it makes sense that this is all done in the markup and not the CSS with how the spec works, it just creates this weird thing where the markup actually partially relies on the CSS, which is not something we normally ever have to worry about.
Link to my code: https://codepen.io/kevinpowell/pen/Mz...
This video involved quite a bit of research on my part, below are the resources I used if you'd like to do more reading on the subject:
https://ericportis.com/posts/2014/src...
https://css-tricks.com/responsive-ima...
https://developers.google.com/web/ilt...
https://developer.apple.com/design/hu...
https://medium.freecodecamp.org/a-gui...
---
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: How to automatically refresh your bro...
---
Support me on Patreon: Patreon: kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
One cool thing with this is, it's all done with html, but the downside of it is that it can bulk up your markup a little bit, and we all like having clean markup. The other strange thing is, if you use the sizes attribute, you are actually going to be including media queries in your html... which is kind of strange. But it makes sense that this is all done in the markup and not the CSS with how the spec works, it just creates this weird thing where the markup actually partially relies on the CSS, which is not something we normally ever have to worry about.
Link to my code: https://codepen.io/kevinpowell/pen/Mz...
This video involved quite a bit of research on my part, below are the resources I used if you'd like to do more reading on the subject:
https://ericportis.com/posts/2014/src...
https://css-tricks.com/responsive-ima...
https://developers.google.com/web/ilt...
https://developer.apple.com/design/hu...
https://medium.freecodecamp.org/a-gui...
---
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: How to automatically refresh your bro...
---
Support me on Patreon: Patreon: kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
6 سال پیش
در تاریخ 1397/09/14 منتشر شده
است.
116,493
بـار بازدید شده