Ultimate Guide to HTML5 Images

Подписаться 930 тыс.

Просмотров 29 тыс.

50% 1

💖 Show your support by checking out my courses!
developedbyed.com
-------------------------------------------------------------------------------------------------
HTML5 Images can be quite tricky to work with, I'm going to cover how to properly size, style and render your images to get the best performance and smallest file sizes out of them.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
📖Chapters
00:00 Intro
00:25 Image Tag
01:15 Resizing and Compressing
03:13 Styling an img tag
04:30 Picture Tag
07:37 Lazy Loading
11:32 Thank You
-------------------------------------------------------------------------------------------------
🎶 Dope music
Middle School, Henry Gritton - Delicate chll.to/3e99ba50
Plusma, Ben Bada Boom - Cabriolet chll.to/3c59a627
Birocratic, Saib, ØDYSSEE - Bonaventura chll.to/bd9bb090
#programming #css #webdevelopment

Наука

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

15 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@AseDeliri 10 месяцев назад

Another optimization you can set is decode=async along with your loading lazy attribute. From Mozilla Docs, "Decode the image asynchronously and allow other content to be rendered before this completes."

@mute-town2 10 месяцев назад

Honestly one of the best web dev channels

@juanmacias5922 10 месяцев назад

Thank you! I was just thinking about switching out my images to use webp and avif, after Chrome's Lighthouse screamed at me lol but seeing you can also compress images was very helpful!

@samobludni 10 месяцев назад

Thank you so much for this, I rarely turn myself on HTML basics, but this is so so neccecary and usefull...thank you one more time!

@rolf9285 10 месяцев назад

I'm missing the height and with on the img tag. You want to set them so that you don't get any CLS during loading of the page. This also helps improve your SEO score.

@blackpurple9163 10 месяцев назад

CLS? What's that?

@dmeredith77 10 месяцев назад

@@blackpurple9163 Cumulative Layout Shift

@raziuldev 10 месяцев назад

@@blackpurple9163Cumulative Layout Shift (CLS) is basically important for SEO.

@lokystaz 3 месяца назад

@@blackpurple9163 Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It's an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that the page is delightful

@emmanuelcastillo6954 9 месяцев назад

I absolutely love this type of content, keep it going man ❤❤❤

@Wwllmm_ 10 месяцев назад

thanks bro ! your channel is my favourite to learn coding

@PetrosZoric 10 месяцев назад

Now that's the content we want to see, keep it up!

@XGuD. 10 месяцев назад

Hey ed, Really appreciate your🤘🏻 hard work, honestly saying your topics are catchy i am regularly watching your videos, it helps me to fix my mistakes. There is one request. I want you to make one video on creating E-commerce application using MERN from scratch. This will help us to get an idea about how to create any app from scratch. Thank you🤝

@bozzhik 10 месяцев назад

you can use the picture tag not only for media queries. but also for downloading webp images that weigh less than jpg. and as a fallback jpg

@djfago6240 10 месяцев назад

he is always playful and smart. very good developer. with love from Belgium

@kubazary1408 10 месяцев назад

Great video! Thank you. I have a request for you. Your videos are engaging to watch. Could you create a video showing how to style images to make them responsive? I mean, for example, if we have a large image on the homepage, what CSS properties can we apply to make it look nice on every device? Maybe we also need to change the image from a 16:9 aspect ratio to a 9:16 aspect ratio on smaller devices. I'm looking for someone like you to create a detailed video about this. Thank you in advance.

@godwindaniel367 10 месяцев назад

You can use media queries for this, resizing the image as deemed fit.

@southcoastinventors6583 10 месяцев назад

Another trick used is having a very low rez version of the picture show up before the full one is loaded good video.

@Nitin-Pandita 10 месяцев назад

Amazing video , please make a tutorial for figma please, I love your design

@dotpenji 9 месяцев назад

Great job explaining image optimization and lazy loading! How can I efficiently handle responsive images in situations where I have various screen sizes and resolutions to consider, especially for background images in web design?

@user-bc8vt1kf6l 8 месяцев назад

I have a deep appreciation for this style of content, please keep it up! ❤❤❤

@_remma 9 месяцев назад

I like to use caesium image compressor. It's amazing for compressing images.

@marcframe7449 10 месяцев назад

onError event is a pretty important as well for rendering a fallback

@wesamnajjom6995 10 месяцев назад

Thanks for the information ❤️

@paulthomas1052 10 месяцев назад

Great video - very useful !

@CrispyCircuits 10 месяцев назад

There is actually a substantial group of people that use text only browsers, such as lynx, etc. Mostly a bit nerdy or unaware of these. Why are they used? Fast fast fast! They show the alt in place of the image. No waiting for the big browsers to load and unload. I also use title occasionally where it's helpful. (Not that often). Also, text only means no Javascript. Which is both good and bad. element is helpful there.

@lokystaz 3 месяца назад

As a Linux user I always use ImageMagik CLI for all my image resize, compression, crop....etc

@PicSta 10 месяцев назад

What do you think about using newer image formats such as WebP & Avif?

@realfejiro 10 месяцев назад

Ed you never miss.

@houssembenothmen7250 10 месяцев назад

i think the best for img in csas for default values to use max-width: 100% some images won't be fit for big containers and forcing it at 100% might make it pixelated

@bancroftberlin 10 месяцев назад

Always nice to meet another fan of Hua's Doodle Dazzled Digital Universe!

@developedbyed 10 месяцев назад

Hahahaha

@kapteinkonyn3450 10 месяцев назад

You are the best, sir!

@mikkyonuma5781 10 месяцев назад

Dev you have been of a great help to me in the last few years as a self-taught developer. Right now I need a job. It has been a real issue for me. I have been a developer of self, building projects for clients as a freelance but I really want to go out of this shell and work in real life company. This is a great problem for me. Please I need your help.

@vishweshwarbhat8736 10 месяцев назад

bro actually worked holy shit

@nikilragav 10 месяцев назад

is there a way to move those media queries @6:37 for choosing which image source to use into CSS? I don't like the html having sizing info

@matti.2937 10 месяцев назад

wth O__O! I was making a photo gallery app, and needed help with image optimization ! How does Ed know

@juanmacias5922 10 месяцев назад

lmfao right! Same, he's just reading everyone's mind!

@stupidfilip23 10 месяцев назад

We love you Ed

@mamasiddiqove 10 месяцев назад

cool tut, loved

@blackpurple9163 10 месяцев назад

Animating images under certain conditions like when you reach a breakpoint and another image is to be rendered, like in your case it went from horizontal dolphin in desktop mode to vertical one in tablet and lower, in the case if the div containing it could rotate it'd look fun, more lively instead of just simply changing the image, or add blur or pixelation/mosaic effect when the images swap, would it be possible to do with minimal code? I use react js

@utkarshjha1969 10 месяцев назад

that would be unnecessary since device width do not change, so it will be either one image or another. There is no way for a user to change their device width apart from a desktop user changing the size of the window, which is unlikely. Breakpoints are used to define what happens at what screen size , how it happens does not matter because it will always be on either one side of the breakpoint, they will not be transitioning from one side to other. On the other hand it is very much possible, just rotate the div or add a filter using some svg or any other effect and set transition and duration for that effect, and voila you have ur required transition when size changes which 99% of the audience wont see haha

@pidginblock 10 месяцев назад

This is amazing

@nikilragav 10 месяцев назад

I disagree that phone uses a lower quality. Lots of phones have significantly higher pixel density / are more likely to be "retina" (pixel indistinguishable) at the typical viewing distance compared to computer monitors.

@hinoki.mp4173 2 дня назад

Hello, very useful video! I was following the steps and I don't get why the picture tag gives an automatic resizing to my images. Is it something to do with the fact that I'm using bootstrap? maybe it impresses default sizes to the tag? I'm still figuring it out, if someone has the answer, I would appreciate it. Thanks for the tutorial!

@ryaneden4604 10 месяцев назад

Hi Ed! Are you still in the process of updating your Javascript course?

@almospal4480 10 месяцев назад

I have a question next js related. How can I do the same thing what you did with the picture tag but now with Image? for some reason it does not work. probably bc the picture element is just a wrapper of the img and not the Image it self.

@almasakhmetov3121 10 месяцев назад

What is that stunning art website, give me the figma design of it pleaseeeeee!

@babayaga6172 10 месяцев назад

Sir how to optimize nextjs images i am so frustrated when i used them width is required or fill layout or even we give width and height it yelling about priority but i don't need because i want lazy loading i am so obsessed with this

@emmanuelowino4291 10 месяцев назад

Nice🎉🎉

@crim-son 10 месяцев назад

Picture of Dolphins mating on screen😂, don't think I don't catch that😂

@blaqbrane8166 10 месяцев назад

Let's say you are fetching and displaying an image from an API, how do you compress the image.

@dimitartanev97 10 месяцев назад

You do that on the backend before you store it on the CDN.

@wootwoots 10 месяцев назад

NB : img should be used with " " and not a div as parent container 😡. You dont need to set a height of auto for an img, as long as its width 100% and whatever object-fit you want to use. the width of the parent is enough to constraint the img, and keep the image ratio. (as long as you ofc don't set a height to the parent, even tho generaly you want to avoid set height to anything, unless really necessary)