Ultimate Guide to HTML5 Images
HTML-код
- Опубликовано: 1 июн 2024
- 💖 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 
Наука
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."
Honestly one of the best web dev channels
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!
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.
CLS? What's that?
@@blackpurple9163 Cumulative Layout Shift
@@blackpurple9163Cumulative Layout Shift (CLS) is basically important for SEO.
@@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
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!
I absolutely love this type of content, keep it going man ❤❤❤
Now that's the content we want to see, keep it up!
thanks bro ! your channel is my favourite to learn coding
he is always playful and smart. very good developer. with love from Belgium
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
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🤝
Great video - very useful !
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.
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.
You can use media queries for this, resizing the image as deemed fit.
You are the best, sir!
Thanks for the information ❤️
Ed you never miss.
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
Another trick used is having a very low rez version of the picture show up before the full one is loaded good video.
Amazing video , please make a tutorial for figma please, I love your design
Always nice to meet another fan of Hua's Doodle Dazzled Digital Universe!
Hahahaha
cool tut, loved
What do you think about using newer image formats such as WebP & Avif?
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?
I have a deep appreciation for this style of content, please keep it up! ❤❤❤
We love you Ed
I like to use caesium image compressor. It's amazing for compressing images.
As a Linux user I always use ImageMagik CLI for all my image resize, compression, crop....etc
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.
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.
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
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
onError event is a pretty important as well for rendering a fallback
bro actually worked holy shit
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
This is amazing
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.
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
Hi Ed! Are you still in the process of updating your Javascript course?
Nice🎉🎉
can i have a heart from you for the first time
wth O__O! I was making a photo gallery app, and needed help with image optimization ! How does Ed know
lmfao right! Same, he's just reading everyone's mind!
Let's say you are fetching and displaying an image from an API, how do you compress the image.
You do that on the backend before you store it on the CDN.
Picture of Dolphins mating on screen😂, don't think I don't catch that😂
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)
amazin
What is that stunning art website, give me the figma design of it pleaseeeeee!
❤
👏👏
I want the wallpaper on your desktop 😇
I only use Caesium to compress 99% of the image size without losing quality
Got here early
👍
Can you make chrome extensions in a video?
good one, but I wouldn't call it ultimate, the video contains like half of the img stuff
whoah, so you dont need react to render a page lkke this? thats bonkers
Bro Can you make Video About the Animated Monkey Avatar Login Form Please 🥺
wtf?
What's Twitter?
e-commerce
I thought this was an ultimate guide. I feel the video is lacking
TIP: Just copy image and paste on figma. No need for download