Thank you! I was just preparing for a presentation about different image web formats and I really emphasized on SVG - didn't even know that WebP existed. So this was very useful - like everything else on this channel! :)
As usual Kevin, you share with us the right information. So much so that I had to pause the video after hearing about WebP and to have a play. I have some images that I created of a "Coat of Arms" image for the many books I have yet the background had to be a transparency. To my delight it's possible to reduce the image by almost 70%, and the bonus is it retains the transparency.
Haha! I was web only a week ago, and ignored it. Thought the site was just being a bit special. Then I see this video while I'm in the middle of building a site. Good stuff again Kevin :)
amazing as always kevin keep up the great work you have no idea how much you help us i wish you a good life sir 🥰 #softwareengineeringstudent from africa
I had a small transparent png logo. And treansformation actually made it weight even more. There I stopped. But in the most of the cases, it was about 50% less. Which is cool.
4:20 People, please don't use GIFs for animation. There's a 256 color limitation per frame, only fully on/off transparency support for pixels, and the compression is horrible. HTML5 has good video support (which can reduce filesize like ten-fold compared to GIFs), but for ease of per-frame editing I currently advocate animated WebP (at least GIMP doesn't support APNG which is also decent).
As of September 2020, Safari now has support for WebP... but only if you're on Big Sur. Of course, now we have AVIF, already supported in Chrome and Opera with experimental support in Firefox. So much for Apple's "innovation."
@@andrew_ray Yup which means that its never coming to any previous mac devices, even though they could literally just compile the same version of safari and ship it to those. Just in case I wanted a reminder why I hate apple so much
Absolutely love the video and the whole channel, thanks for sharing. I was wondering about that webp / jpeg2000 etc image formats after Google dropped the newest version of PageSpeed. My question is, if I'm working on a product that does have to work on all browsers - am I really limited to use just JPG and PNG? I'd love to give webp a try though.
Webp is a pain at the moment to work with because the new format is not known by many software packages. I have a graphical heavy website and I use JPG and PNG24 if I need a transparency. For the sake of a few kilobytes per image, and the hassle of working with webp, there is no appeal to webp for me right now. If it becomes more mainstream in the future, I might switch, but for now JPS's at maximum 12 quality setting, and PNG24 when I need it, and with internet speeds today, all works fine.
To be fair though you can make both jpgs and pngs much smaller than what Photoshop achieves, especially on large images. You can easily shave a third if you compress again. I use an app on Windows called Caesium, gets really good results. You can also build this into your workflow using Gulp etc.
Video is great as usual, thanx a lot. And my video topic suggestion is barba.js xD Probably im gonna spam that suggestion till you make a video about it. :)
I don't have any statistics on it, but it's out there! A lot of bigger companies that serve up a lot of images will do it, but usually with a backend setup that will automatically serve up webp for those who have browsers that support it.
Hey - amazing video than you! When saving my photo in photoshop, ill choose the ratio ( crop it) and then should I select 72ppi for wordpress?? And then drop it into Squoosh? You cant crop in Squoosh can you. Is that how you would do it?
I've just uses squoosh to convert a jpg into webP. After downloading I'm not able to view it on a mac plus I cannot select it in my Squarespace to use it as an actual image?? Is there another step you didn´t cover?
I built a Realty website automation system and was looking at webp for the images but in all my testing that images came out far larger no matter how well I tried to compress them while retaining somewhat decent quality. I'm not sure what else to do I've tried various command line tools and methods. In the end I decided to stick with jpeg.
I'm currently developing a new theme for my WordPress site only to come off Cross a background image that I need to swap out for the large one to the smaller one and setting the small one is default I think this might be easy until you try to do it on top of that I chose to use Bootstrap for main CSS framework I didn't find it natural way of doing this until I come across the research that I did for this little section background image swap it out for a small one I should use webP Have you got any videos where you dig into the sort of thing and swapping out images for a smaller one it seems so straight for a concept until you're trying to dig into it dug around to see if you had any videos about it but this is the only what I seem to have come across any chance you doing something about this in the future Sorry about my poor English I got dyslexia
I found WebP because Google's PageSpeed Insights told me my website is too slow. Matthew Broderick, can you tell us how to easily integrate with Photoshop for my design team?
Is there a way to disable webp? Png files lose their transparency and just replace it with a black background. I try to save the image files but there's no png option. Clicking and dragging to Photoshop or Clip Studio doesn't work. I'm using Firefox so idk what my issue is.
Yup, it's not the best way, which is annoying, because at those percentages, the quality usually drops. I'll be looking at more automated ways of compressing them at one point :)
So now... A year later... Webp is still not supported by graphics design products (Photoshop). I get the performance improvements, but I can't use an image format that takes my twice as long to create. Bah. Nothing can be easy.
It's a bit more complicated to use it in sass than in html sadly, as there is currently no good way to build in a fallback to either jpg or png with css at the moment.
It's a bit more complicated to use it in sass than in html sadly, as there is currently no good way to build in a fallback to either jpg or png with css at the moment.
It's a bit more complicated to use it in sass than in html sadly, as there is currently no good way to build in a fallback to either jpg or png with css at the moment.
i guess you create websites for clients - tell me how you do that? you are MASTER in html and css, but how to sell a website for the client when he wont be even able to change the article without CMS. nowadays more and more people create stuff only in wordpress, wix etc. clients just go into admin panel and change everything like in powerpoint. i hate this situation, cause i kinda feel like there is no web developement without wordpress like now...
It depends on the clients and a lot of other things. I've created custom WordPress themes in the past, and heavily modified themes in the past. I am sort of interested in making a custom SquareSpace theme as well, since it uses Liquid templating language, which I like. There are other CMS out there though, it doesn't have to be WordPress!
If you watch videos at 2x speed like me, today was completed in 5 minutes. I think webp will be great once supported, I am surprised it is so limited at the moment
I think a lot of people watch at 2x, I know I speed up most tutorial videos I watch as well :). I could be wrong, but part of the issue could be because it's a Google developed technology. I could be wrong on it, but I could see the others being hesitant because of that. With Firefox getting on board, I can only assuming Safari will have to at one point.
I created a page a few years ago which is aimed at scanning but I think gives an easy to understand background on several graphic file types. cowboyfrank.net/telephones/projects/Scanning.htm
Sorry if I'm talking a bit fast. Others tell me I talk to slow, so it's hard to balance. If you hit the gear icon, you can change the playback speed to make it slower, it might help!
jpg needs to be banned from the internet. Completely garbage compression that was more presentable during the era of CRT displays. Stop using JPG. There's no reason for it. PNG now has compression techniques (i.e. pngquant) that make them roughly as small in filesize.
That 5-Minute Friday thing... just stop. Quit doing those. You try so hard to speed through them you leave some (many?) of us trailing behind trying to understand what you are saying. I have found your videos very educational and I appreciate what you are doing for us. But I hate the speedy speech mode you get into when you think your videos are too long. If you make us watch the video again because we didn't catch what you said, then it ain't a 5-minute Friday anymore.
I understand the complain Jim. It's more needing to pick topics better suited to a 5-minute video, than it is to stop doing them I think. I'll be taking a short break over the holidays where I'm going to re-evaluate my content and hopefully make some improvements :)
I understand the complain Jim. It's more needing to pick topics better suited to a 5-minute video, than it is to stop doing them I think. I'll be taking a short break over the holidays where I'm going to re-evaluate my content and hopefully make some improvements :)
I understand the complain Jim. It's more needing to pick topics better suited to a 5-minute video, than it is to stop doing them I think. I'll be taking a short break over the holidays where I'm going to re-evaluate my content and hopefully make some improvements :)
![The HTML picture element explained [ Images on the web part 3 ]](http://i.ytimg.com/vi/Rik3gHT24AM/mqdefault.jpg)
![The HTML picture element explained [ Images on the web part 3 ]](/img/tr.png)
![[MV] A leap of faith...ความเชื่อใจครั้งสุดท้าย (From "Petrichor the series")](http://i.ytimg.com/vi/U1piZH2CNXA/mqdefault.jpg)
I've been watching all of your content recently, and now I know the reason why people call you "the king of CSS"; you really deserve it
Thanks for using my image! I’m a graphic/web designer too, so this video helped me out a lot!
Thank you! I was just preparing for a presentation about different image web formats and I really emphasized on SVG - didn't even know that WebP existed. So this was very useful - like everything else on this channel! :)
Great info! I'm looking forward to the upcoming videos on this topic... It's something I could benefit from knowing more about.
I dont like when people say a video is going to be 5 mins and it ends up being 10 mins. Otherwise, good video. thanks
As usual Kevin, you share with us the right information. So much so that I had to pause the video after hearing about WebP and to have a play. I have some images that I created of a "Coat of Arms" image for the many books I have yet the background had to be a transparency. To my delight it's possible to reduce the image by almost 70%, and the bonus is it retains the transparency.
11 seconds after uploaded and I'm already here liking the video before I even watch it 😂
When you know it's gonna be good, right 😏.. I do the same on some channels just to make sure not to forget.
Rune Jørgensen I agree. Kevin always puts out quality content. This is one of the few channels that I have my bell notifications on for!
Haha! I was web only a week ago, and ignored it. Thought the site was just being a bit special.
Then I see this video while I'm in the middle of building a site. Good stuff again Kevin :)
Best channel in TH-cam ... Kevin developers from the whole world thanks you !! :)
Thanks for all the great information. If you happen to read this, I am wondering about WebP and how well supported it is now in late 2023?
amazing as always kevin keep up the great work you have no idea how much you help us i wish you a good life sir 🥰 #softwareengineeringstudent from africa
I had a small transparent png logo. And treansformation actually made it weight even more. There I stopped. But in the most of the cases, it was about 50% less. Which is cool.
4:20 People, please don't use GIFs for animation. There's a 256 color limitation per frame, only fully on/off transparency support for pixels, and the compression is horrible. HTML5 has good video support (which can reduce filesize like ten-fold compared to GIFs), but for ease of per-frame editing I currently advocate animated WebP (at least GIMP doesn't support APNG which is also decent).
That moment you watch this video 11 months after it was published and now webP is also supported in Firefox (Safari is becoming the new IE though)
Apple is always late to the show.
Lol, yeah.
As of September 2020, Safari now has support for WebP... but only if you're on Big Sur. Of course, now we have AVIF, already supported in Chrome and Opera with experimental support in Firefox. So much for Apple's "innovation."
Safari is definitely the new IE, i fully agree.
@@andrew_ray Yup which means that its never coming to any previous mac devices, even though they could literally just compile the same version of safari and ship it to those. Just in case I wanted a reminder why I hate apple so much
Best 10 minutes I’ve spent today
thanks for clearing it up. It's so clear now I can see the bottom.
You are amazing!! Thank you for making this video
Absolutely love the video and the whole channel, thanks for sharing.
I was wondering about that webp / jpeg2000 etc image formats after Google dropped the newest version of PageSpeed.
My question is, if I'm working on a product that does have to work on all browsers - am I really limited to use just JPG and PNG? I'd love to give webp a try though.
Webp really is the best
Thanks for share website convert image to webp
thanksyou, love from indonesia
Webp is a pain at the moment to work with because the new format is not known by many software packages. I have a graphical heavy website and I use JPG and PNG24 if I need a transparency. For the sake of a few kilobytes per image, and the hassle of working with webp, there is no appeal to webp for me right now. If it becomes more mainstream in the future, I might switch, but for now JPS's at maximum 12 quality setting, and PNG24 when I need it, and with internet speeds today, all works fine.
Thanks for the material. But i wanna know: can Webp format be geotagged?
To be fair though you can make both jpgs and pngs much smaller than what Photoshop achieves, especially on large images. You can easily shave a third if you compress again. I use an app on Windows called Caesium, gets really good results. You can also build this into your workflow using Gulp etc.
Yup, webp still beats those though by about 30% in general. But using other compression methods for jpg does make a big difference
Video is great as usual, thanx a lot. And my video topic suggestion is barba.js xD Probably im gonna spam that suggestion till you make a video about it. :)
haha, it is on my todo list, but I've yet to play around with it yet
haha, it is on my todo list, but I've yet to play around with it yet
haha, it is on my todo list, but I've yet to play around with it yet
@@KevinPowell Thanx a lot. :)
Thank you! Didn’t know about webp!
Awesome stuff as usually ! How often are web devs use WebP Kevin?
I don't have any statistics on it, but it's out there! A lot of bigger companies that serve up a lot of images will do it, but usually with a backend setup that will automatically serve up webp for those who have browsers that support it.
Hey Kevin, why don't you do a mini series on fixing issues on google's lighthouse audits report... Awesome content by the way!
Thanks Lucho, I already have that on my todo actually :D. I just need to figure it all out first, hah.
Hey - amazing video than you! When saving my photo in photoshop, ill choose the ratio ( crop it) and then should I select 72ppi for wordpress?? And then drop it into Squoosh? You cant crop in Squoosh can you. Is that how you would do it?
The sample provided was for HTML markup, can you give examples for CSS background images (particularly for WebP).
Thank you.
tnx
I've just uses squoosh to convert a jpg into webP. After downloading I'm not able to view it on a mac plus I cannot select it in my Squarespace to use it as an actual image?? Is there another step you didn´t cover?
9:12 - is there a video where he is automating the whole process of using webp?
I built a Realty website automation system and was looking at webp for the images but in all my testing that images came out far larger no matter how well I tried to compress them while retaining somewhat decent quality. I'm not sure what else to do I've tried various command line tools and methods. In the end I decided to stick with jpeg.
That really surprises me, I've had good success with webp
Now there is AVIF which is an image format using the AV1 (AV One not avi). It is supposed to be better still but I have not tried it yet.
Browser support is better in 2021?
is there a way to convert images and have a copy of the converted image on your hard drive if so how
I'm currently developing a new theme for my WordPress site only to come off Cross a background image that I need to swap out for the large one to the smaller one and setting the small one is default I think this might be easy until you try to do it on top of that I chose to use Bootstrap for main CSS framework I didn't find it natural way of doing this until I come across the research that I did for this little section background image swap it out for a small one I should use webP Have you got any videos where you dig into the sort of thing and swapping out images for a smaller one it seems so straight for a concept until you're trying to dig into it dug around to see if you had any videos about it but this is the only what I seem to have come across any chance you doing something about this in the future Sorry about my poor English I got dyslexia
Not sure why so many are still using jpeg and webp when the awesome avif image format has had browser support since 2020.??
I found WebP because Google's PageSpeed Insights told me my website is too slow. Matthew Broderick, can you tell us how to easily integrate with Photoshop for my design team?
There's a plugin for photoshop developers.google.com/speed/webp/docs/webpshop
Is there a way to disable webp? Png files lose their transparency and just replace it with a black background. I try to save the image files but there's no png option. Clicking and dragging to Photoshop or Clip Studio doesn't work. I'm using Firefox so idk what my issue is.
Switch to lossless webp to keep transparency 😁
I just use tinypng. It seems like it gives me the smallest file size and the best quality.
Do not compete against time, deep dive examples are best. Not shallow informations
How to use webp inside WordPress?
Photoshop jpeg save for web needs a quality of about 40-45. Anything higher and insight can flag you for needing to compress images.
Yup, it's not the best way, which is annoying, because at those percentages, the quality usually drops. I'll be looking at more automated ways of compressing them at one point :)
Kevin Powell yeah, google is unrealistic and based its mobile speed algorithm on 3g...
You can get better compression than what PS does. I'll be looking at ways to automate it next week 😁
Its great to see like : dislike ratio
So now... A year later... Webp is still not supported by graphics design products (Photoshop). I get the performance improvements, but I can't use an image format that takes my twice as long to create. Bah. Nothing can be easy.
Whatever single person who came up with WEBP should be forced to use it for ALL their photos and diagrams without a decoding software.😡
I use compressed PNGs
Tell as how to use webp image in sass file.
It's a bit more complicated to use it in sass than in html sadly, as there is currently no good way to build in a fallback to either jpg or png with css at the moment.
It's a bit more complicated to use it in sass than in html sadly, as there is currently no good way to build in a fallback to either jpg or png with css at the moment.
It's a bit more complicated to use it in sass than in html sadly, as there is currently no good way to build in a fallback to either jpg or png with css at the moment.
i guess you create websites for clients - tell me how you do that? you are MASTER in html and css, but how to sell a website for the client when he wont be even able to change the article without CMS. nowadays more and more people create stuff only in wordpress, wix etc. clients just go into admin panel and change everything like in powerpoint. i hate this situation, cause i kinda feel like there is no web developement without wordpress like now...
It depends on the clients and a lot of other things. I've created custom WordPress themes in the past, and heavily modified themes in the past. I am sort of interested in making a custom SquareSpace theme as well, since it uses Liquid templating language, which I like.
There are other CMS out there though, it doesn't have to be WordPress!
google page speed always detects this and wants to use webp
Yup! I do wonder if it'll be standard one day. You can get really good jpg compression these days too though.
best to use png and svg
for icons, yup. For raster images (photos), I wouldn't put it inside an svg
4 yrs later I’m assuming adoption has skyrocketed?
.png is just a glorified bitmap image inside a .zip
That alpha channel though
Omg
webp is still not supported well enough.
Safari... ehh. After almost one year it still following IE 6 path.
If you watch videos at 2x speed like me, today was completed in 5 minutes. I think webp will be great once supported, I am surprised it is so limited at the moment
I think a lot of people watch at 2x, I know I speed up most tutorial videos I watch as well :). I could be wrong, but part of the issue could be because it's a Google developed technology. I could be wrong on it, but I could see the others being hesitant because of that. With Firefox getting on board, I can only assuming Safari will have to at one point.
I created a page a few years ago which is aimed at scanning but I think gives an easy to understand background on several graphic file types.
cowboyfrank.net/telephones/projects/Scanning.htm
Thanks for sharing that :)
Thanks for sharing that :)
Thanks for sharing that :)
svg
SVG us awesome, but not always the best choice. For icons and logos it's great!
hoo4
could u plz speak slowly ? as english is not my language so facing problem to get u !
Sorry if I'm talking a bit fast. Others tell me I talk to slow, so it's hard to balance. If you hit the gear icon, you can change the playback speed to make it slower, it might help!
@@KevinPowell thanks for your nice reply ! Im trying to getting u
jpg needs to be banned from the internet. Completely garbage compression that was more presentable during the era of CRT displays.
Stop using JPG. There's no reason for it. PNG now has compression techniques (i.e. pngquant) that make them roughly as small in filesize.
That 5-Minute Friday thing... just stop. Quit doing those. You try so hard to speed through them you leave some (many?) of us trailing behind trying to understand what you are saying. I have found your videos very educational and I appreciate what you are doing for us. But I hate the speedy speech mode you get into when you think your videos are too long. If you make us watch the video again because we didn't catch what you said, then it ain't a 5-minute Friday anymore.
I watch his videos on 2x speed.. no clue what are you talking about there :D
I understand the complain Jim. It's more needing to pick topics better suited to a 5-minute video, than it is to stop doing them I think. I'll be taking a short break over the holidays where I'm going to re-evaluate my content and hopefully make some improvements :)
I understand the complain Jim. It's more needing to pick topics better suited to a 5-minute video, than it is to stop doing them I think. I'll be taking a short break over the holidays where I'm going to re-evaluate my content and hopefully make some improvements :)
I understand the complain Jim. It's more needing to pick topics better suited to a 5-minute video, than it is to stop doing them I think. I'll be taking a short break over the holidays where I'm going to re-evaluate my content and hopefully make some improvements :)
@@KevinPowell You're so nice to reply thrice. ;)