Тёмный

Easily change images WITHOUT any CSS or JS 

Kevin Powell
Подписаться 907 тыс.
Просмотров 422 тыс.
50% 1

The picture element is awesome 🙂
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

 

1 ноя 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 273   
@brianmmdev
@brianmmdev Год назад
I love how you called me out right up front, background & media query is exactly what I would have done. This is neat!
@thomas1588
@thomas1588 Год назад
Oh no! I would have used something perfectly viable to solve this problem! Let me learn something new, while also having to create a different image for every viewport!
@minnow1337
@minnow1337 Год назад
@@thomas1588 Well maybe you want to use different res versions on different devices for faster load speeds and better site performance. Or your designer already gave you two differently cropped images and they’re either ghosting you or you don’t care enough to ask for the source image
@haves_
@haves_ Год назад
What browsers version support ??
@thomas1588
@thomas1588 Год назад
@@minnow1337 why use a worse image? Also why is it less performing than a media query, which is like 10 lines of code total, instead of allocating even more space in a DB or on your site?
@minnow1337
@minnow1337 Год назад
lower resolution images take up less memory and are faster and cheaper to transmit from your servers to the client. if they’re on a smaller device like mobile which also tends to have lower bandwidth they will have a better experience without noticing the lower resolution. Bandwidth tends to cost a lot more than image storage space as a site scales. You could also have a cloud function between the client and the DB which scales down the image from a higher res version before sending. I’m not sure if the compute costs would be lower than the storage costs though, you could keep a cache on the server side for images that are often used at a lower resolution
@snailedlt
@snailedlt Год назад
This is great! And it also lets you select images based on browser theme by adding: media="(prefers-color-scheme: dark)"
@NathanHedglin
@NathanHedglin Год назад
O.O
@cortarelva
@cortarelva Год назад
I have this exact situation right now at work and im going to make use of the picture tag so fast it will make my lead dev`s head spin around
@naimas8120
@naimas8120 Год назад
HOW DID IT WENT FOR YOU 😄
@idk12147
@idk12147 Год назад
​@Cassini Jr. Lol
@johnyepthomi892
@johnyepthomi892 Год назад
@@naimas8120 he was accused of being too on *Spec*
@Kimi-xp2th
@Kimi-xp2th 6 месяцев назад
​@@naimas8120go*
@gautamjuyal
@gautamjuyal Год назад
frontend mentor has some of the best beginner friendly practice projects. Like if you've solved this challenge.
@KevinPowell
@KevinPowell Год назад
Full video on this coming soon 🙂
@gautamjuyal
@gautamjuyal Год назад
@@KevinPowell thank you for the awesome content Mr Powell. Eagerly waiting for the video. :)
@Ulvis_B
@Ulvis_B Год назад
@@KevinPowell what browsers support?
@triteraerlangga7917
@triteraerlangga7917 Год назад
but... (min-width: 600px) still a CSS syntax... hehe just kidding, you did a great job, Kevin! thanks for sharing new knowledge
@igordasunddas3377
@igordasunddas3377 Год назад
Your channel is still absolutely underrated! Thank you!
@BNakato
@BNakato Год назад
I just did this challenge the other day and got the image working with messy media queries. Will try this method.
@naimas8120
@naimas8120 Год назад
You're literally the God of CSS, unlocking CSS abilities within the HTML tags itself 😭
@zimzimph
@zimzimph Год назад
That's HTML5 for you I think. It has a lot of tags for different things and the aim is to reduce your usage of div
@soppilif
@soppilif Год назад
omg... picture tag i had used in the past but somehow having forgotten it ever since. So nice to have those shorts to get reminded of useful things!!
@BrendanMcGinley
@BrendanMcGinley Год назад
This is not only exactly what I need, it's a better version than I could have hoped for and what I'd been planning to use. Thank you!
@isocity-info
@isocity-info Год назад
Internet Explorer 6: Fairy Tale 😤
@j810116
@j810116 Год назад
It's wonderful to know this! Thank you!🤩
@AJman14
@AJman14 Год назад
This also works for image format fallbacks! Serve an AVIF image with Jpeg as a backup for older browsers.
@ko-Daegu
@ko-Daegu Год назад
an old browser that's probably doesn't support this tag
@AJman14
@AJman14 Год назад
@@ko-Daegu An old browser will still use the img tag that is within the picture tag, meaning it is fully backwards compatible.
@hash5one600
@hash5one600 Год назад
Omg! - What a great tip! - Thank you for taking the time to share this with us. :)
@_ANDRZ_
@_ANDRZ_ Год назад
I like the way you explain each concept, pretty easy to follow 😃
@milesingrams
@milesingrams Год назад
Cannot wait for this to have a container query ability! That would make it even more useful!
@arnelGo-fj7qc
@arnelGo-fj7qc Год назад
Wow! Short videos that instantly relieve my headache.
@samuelukachukwu7358
@samuelukachukwu7358 Год назад
Never a dull moment with you. Thank You!
@sidheshwartiwari9834
@sidheshwartiwari9834 Год назад
Thank you so much Kevin 🙏🏻
@ekowanin8935
@ekowanin8935 Год назад
I was contemplating which one to use, I was leaning towards the picture but now I’ve seen you use picture I feel so much better 🤣
@arikiri_698
@arikiri_698 Год назад
Omg I was literally working on this exact challenge! Thank you for the info!
@riacharda
@riacharda Год назад
Damn! You're dropping great nuggets out here!
@git-tauseef
@git-tauseef Год назад
Wow 🥺 just solved my problem was searching for it....
@heroe1486
@heroe1486 Год назад
+ it also permits you to do server side image optimization and thus only send smaller images to the browser when needed
@chillhub8073
@chillhub8073 28 дней назад
Great man!
@lifealliancegroup
@lifealliancegroup Год назад
AWESOME, THANK YOU KEVIN!!!
@boredomindex3353
@boredomindex3353 Год назад
Gonna try it today. Thanks, mate!
@pixiedev
@pixiedev Год назад
great I'll use this in my portfolio for project images.
@kabirsinghmehrok
@kabirsinghmehrok Год назад
Loved it!
@azmirshah8089
@azmirshah8089 Год назад
I need to save this video. It really helpful. Thank you.
@mista_odie
@mista_odie Год назад
Thanks, Kevin. That'll be a game changer for HERO SECTIONS 👍
@sudarrshang8922
@sudarrshang8922 6 месяцев назад
This is extremely semantic, fulfilling the purpose of semantic html usage.
@ajlmusic
@ajlmusic Год назад
I love it. Thank you sir!
@DarrenbyDesign
@DarrenbyDesign Год назад
This is brilliant
@precious8326
@precious8326 7 месяцев назад
gotta love kevin!
@psychedelicbastard
@psychedelicbastard 11 месяцев назад
very helpful tip! thank you for this!
@dhanlitozi184
@dhanlitozi184 Год назад
exactly what I need
@EiderJChavesC2
@EiderJChavesC2 Год назад
I need to try this code. Thank you for sharing.
@kakyoin4535
@kakyoin4535 Год назад
I knew this tag before. This is so helpful
@Cell_Cumeker
@Cell_Cumeker Год назад
I learned this right after learning about images in the course I'm studying
@YOUTUBESUKHMAN
@YOUTUBESUKHMAN Год назад
wow never had thought about that
@devkasunlakshitha
@devkasunlakshitha Год назад
This is cool. Thank you so much ❤
@lewisone
@lewisone Год назад
Learning an insane amount of tricks from you. I seem to always do everything the hard way. lol.
@mohammedissam3651
@mohammedissam3651 Год назад
I know it but didn't know how to use it , thank you sir.
@caiooliveira6918
@caiooliveira6918 Год назад
Yep, I just needed that, gonna comment and like to help your video! Thanks!
@hianshul07
@hianshul07 Год назад
nice, this is the project i did few weeks back
@webunveilers
@webunveilers Год назад
great. in four years a relly gem i found like you
@ibrahimfaisal-1245
@ibrahimfaisal-1245 8 месяцев назад
Hello Brother This is very useful as a beginner. Thank you
@NNNedlog
@NNNedlog Год назад
Thanks a lot for this sir
@lowlay964
@lowlay964 Год назад
wow! Thank you!
@LightOffArchives
@LightOffArchives Год назад
Seems really useful, thanks
@akshaythakur8376
@akshaythakur8376 4 месяца назад
Its a great suggestion
@jorgegamboa5408
@jorgegamboa5408 Год назад
Awesome ❤
@JGoMotion
@JGoMotion Год назад
Haha... That perfume bottle picture looks familiar 🤣. New to all this and definitely worked with this problem.
@crxtzonceu6292
@crxtzonceu6292 Год назад
i saw that on frondendmentor challenge😂
@customcode01
@customcode01 5 месяцев назад
It's really helpful
@sivasankarjammula9632
@sivasankarjammula9632 9 месяцев назад
Great one❤
@samsung32901
@samsung32901 Год назад
This is amazing
@ascodes3461
@ascodes3461 Год назад
Thank you soo much man!!!
@zerubabelyonas5643
@zerubabelyonas5643 Год назад
Solved the same problem in Frontend Mentor, background-image and media query is my go to but this one looks much easier
@kyrill19
@kyrill19 Год назад
Kevin rocks, so good!!
@rizqyhbb
@rizqyhbb Год назад
This is gold!
@tenc6491
@tenc6491 Год назад
Very informative. Thanks.
@Aaron-sy5yx
@Aaron-sy5yx Год назад
You just saved me. Been wondering how to solve my background issue for mobile
@anasouardini
@anasouardini Год назад
what a coincidence, I've just read this yesterday on css-tricks, the post was about dark themes. they gave an example where if the user is preferring a dark theme the picture tag would load a different image that is made for the dark theme. I think you should make a video about this.
@EasyFileConversionTuts
@EasyFileConversionTuts Год назад
wow didn't know that, thanks alot
@uzcoder9544
@uzcoder9544 Год назад
Wonderful 😮
@9622AX
@9622AX Год назад
Many Thanks for that!
@un_vexXs
@un_vexXs Год назад
That's actually very useful
@rickseth9207
@rickseth9207 Год назад
WAIT WTF I AM WORKING ON A PROJECT RN AND THE WHOLE THING IS BASED IN PERFUMES and somehow you showed a perfume's pic from unsplash I cam across it so many times, thats actually such a cool coincidence.
@omarkarim9298
@omarkarim9298 Год назад
Great as usual
@rickyanthony
@rickyanthony Год назад
I love HTML 5; it's modern power. I hope that the specs makes it possible to use less and less css and also not worry about compatibility.
@markxavior
@markxavior 5 месяцев назад
Excellent
@aidennelson3171
@aidennelson3171 Год назад
Nice, thanks! May God bless
@cuongkien363
@cuongkien363 Год назад
thank you !
@0xtz_
@0xtz_ Год назад
Oooooh amazing 👌, thanks
@zengeki23
@zengeki23 8 месяцев назад
WAAAH?! WHAT sorcery is this?!
@DamonMedekMusic
@DamonMedekMusic Год назад
How have I never heard of picture element ever!?
@alex-suciu
@alex-suciu Год назад
picture tag is so underrated, yet so easy to use.
@ruleaus7664
@ruleaus7664 Год назад
How do I select the image in the source tag? I already tried making the media query the same for both the media attribute and the at-rule, then using a source, image, or picture element selector. None of those work, so I'm stumped. Syntax checks out.
@brunorabelogoncalves1936
@brunorabelogoncalves1936 Год назад
Oow....awesome!
@JeetKRamnani
@JeetKRamnani Год назад
Amazing
@Karrnfr
@Karrnfr Год назад
Cool Thanks kevin
@RealElites
@RealElites Год назад
Nice!
@gemfire400
@gemfire400 Год назад
Thanks!
@username_creates6991
@username_creates6991 Год назад
Omg where was this a month ago when I needed this 😭 can you explore clip paths? I wanted to make a clip path for a section but I wanted to make this path different depending on whoch quary it goes ... Which was so much work looking for it in css... Idk how would you do this? I wanted to make each section wavy with my pwn paths from illustrator.
@varshakapil8224
@varshakapil8224 Год назад
Wonderful 👍
@GR_BackingTracks
@GR_BackingTracks Год назад
Mind blown
@SkillsVsDegree
@SkillsVsDegree 3 месяца назад
When storing images in db, is it recommended to shrink the size? If so how to do it?
@killser13
@killser13 Год назад
You saved me.
@mavrosyvannah
@mavrosyvannah Год назад
Nice. Thanks.
@bonnes04
@bonnes04 Год назад
You're the master
@ShadowDrakken
@ShadowDrakken Год назад
I mean, that's technically still CSS ;)
@Mirza_Rad
@Mirza_Rad Год назад
Phenomenal
@roufhasan
@roufhasan Год назад
Frontend Mentor challenge😅 thanks for showing it❤️
@Traybair
@Traybair Год назад
Awesome
@dadou9590
@dadou9590 29 дней назад
Note to do mobile first cause once the bigger image is loaded, it won’t load the smaller one. It will keep the bigger one. Srcset always keep the heaviest image it has loaded
@jkiamafish
@jkiamafish Год назад
In school my instructor said not to use the picture element because it impacts the initial loading time for the page and causes mobile browsers to process elements that may be left out of a responsive design. But I may be remembering it incorrectly, I’d have to check my notes.
@david1801
@david1801 Год назад
That's so neat
@mohammedsufiyan5164
@mohammedsufiyan5164 Год назад
Whats the font family used. Its look awesome
@monuchouhan8311
@monuchouhan8311 Год назад
Thanks, thats cool
@Tibogen
@Tibogen Год назад
WOW! What a cool "function" :D
Далее
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 25 тыс.
How to put an HTML website online (on the Internet)
29:37
КТО ЭТО😱
00:41
Просмотров 399 тыс.
Simplest CSS reset to prevent headaches
0:59
Просмотров 164 тыс.
How to create a responsive table using HTML and CSS.
13:05
This Advanced Flexbox Trick Is Amazing!
0:57
Просмотров 468 тыс.
Number-only inputs aren't so straight-forward
0:59
Просмотров 746 тыс.
Avoid making this mistake in your CSS
1:00
Просмотров 234 тыс.
Simple single-page smooth scrolling
1:00
Просмотров 198 тыс.
HTML Tutorial for Beginners: HTML Crash Course
1:09:34