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
@aldainaustria21795 жыл бұрын
Thanks for using my image! I’m a graphic/web designer too, so this video helped me out a lot!
@Alessandro-nq3tm5 жыл бұрын
Best channel in KZbin ... Kevin developers from the whole world thanks you !! :)
@RussDnB4 жыл бұрын
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 :)
@westfield905 жыл бұрын
Best 10 minutes I’ve spent today
@KyleMerl5 жыл бұрын
Great info! I'm looking forward to the upcoming videos on this topic... It's something I could benefit from knowing more about.
@adrianfiedler35204 жыл бұрын
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)
@geralt364 жыл бұрын
Apple is always late to the show.
@ne98353 жыл бұрын
Lol, yeah.
@andrew_ray3 жыл бұрын
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."
@intsfanatic3 жыл бұрын
Safari is definitely the new IE, i fully agree.
@magnusanderson66813 жыл бұрын
@@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
@withOsamaNatto3 жыл бұрын
You are amazing!! Thank you for making this video
@ivanyosifov26297 ай бұрын
9:12 - is there a video where he is automating the whole process of using webp?
@sebastianpozo83052 жыл бұрын
Thanks for the material. But i wanna know: can Webp format be geotagged?
@lancemarchetti8673 Жыл бұрын
Not sure why so many are still using jpeg and webp when the awesome avif image format has had browser support since 2020.??
@richardpeterson23575 жыл бұрын
is there a way to convert images and have a copy of the converted image on your hard drive if so how
@jessepadilla59195 жыл бұрын
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?
@LexTNeville5 жыл бұрын
There's a plugin for photoshop developers.google.com/speed/webp/docs/webpshop
@crooker24 жыл бұрын
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.
@t20sgrunt365 жыл бұрын
Photoshop jpeg save for web needs a quality of about 40-45. Anything higher and insight can flag you for needing to compress images.
@KevinPowell5 жыл бұрын
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 :)
@t20sgrunt365 жыл бұрын
Kevin Powell yeah, google is unrealistic and based its mobile speed algorithm on 3g...
@KevinPowell5 жыл бұрын
You can get better compression than what PS does. I'll be looking at ways to automate it next week 😁
@Owenoooo4 жыл бұрын
How to use webp inside WordPress?
@evyatarsilberschatz4605 жыл бұрын
Omg
@Ilidan19854 жыл бұрын
Safari... ehh. After almost one year it still following IE 6 path.
@Wizardof6 ай бұрын
Whatever single person who came up with WEBP should be forced to use it for ALL their photos and diagrams without a decoding software.😡
@javierdelcid27594 жыл бұрын
hoo4
@yassmaboby2965 жыл бұрын
could u plz speak slowly ? as english is not my language so facing problem to get u !
@KevinPowell5 жыл бұрын
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!
@yassmaboby2965 жыл бұрын
@@KevinPowell thanks for your nice reply ! Im trying to getting u
@TFPadmin5 жыл бұрын
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.
@andreibileca53395 жыл бұрын
I watch his videos on 2x speed.. no clue what are you talking about there :D
@KevinPowell5 жыл бұрын
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 :)
@KevinPowell5 жыл бұрын
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 :)
@KevinPowell5 жыл бұрын
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 :)
@TFPadmin5 жыл бұрын
@@KevinPowell You're so nice to reply thrice. ;)
@krozareq3 жыл бұрын
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.
@kristianabakratcheva88985 жыл бұрын
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! :)
@BleepingWorld Жыл бұрын
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
@RaWMajkeL5 жыл бұрын
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.
@ildarius Жыл бұрын
4 yrs later I’m assuming adoption has skyrocketed?
@hudamaulanaismail3384 ай бұрын
thanksyou, love from indonesia
@Morrile15 жыл бұрын
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.
@maaattW2 жыл бұрын
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?
@mrduycua5 ай бұрын
Thanks for share website convert image to webp
@TheSockeye5 ай бұрын
Webp really is the best
@soniablanche56724 жыл бұрын
.png is just a glorified bitmap image inside a .zip
@paweld4 жыл бұрын
That alpha channel though
@nevinkuser98923 жыл бұрын
Browser support is better in 2021?
@juliocodes5 жыл бұрын
11 seconds after uploaded and I'm already here liking the video before I even watch it 😂
@rujor5 жыл бұрын
When you know it's gonna be good, right 😏.. I do the same on some channels just to make sure not to forget.
@juliocodes5 жыл бұрын
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!
@richardleetulio74415 жыл бұрын
google page speed always detects this and wants to use webp
@KevinPowell5 жыл бұрын
Yup! I do wonder if it'll be standard one day. You can get really good jpg compression these days too though.
@abdollahmemar9170 Жыл бұрын
tnx
@quantumx99249 ай бұрын
Thank you.
@erykkryszewski58035 жыл бұрын
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...
@KevinPowell5 жыл бұрын
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!
@Spfnym4 жыл бұрын
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).
@luchoandrade45735 жыл бұрын
Hey Kevin, why don't you do a mini series on fixing issues on google's lighthouse audits report... Awesome content by the way!
@KevinPowell5 жыл бұрын
Thanks Lucho, I already have that on my todo actually :D. I just need to figure it all out first, hah.
@PaulBoland4 жыл бұрын
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.
@Konstantah8885 жыл бұрын
Awesome stuff as usually ! How often are web devs use WebP Kevin?
@KevinPowell5 жыл бұрын
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.
@lisap561510 ай бұрын
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?
@jaimelaureano66492 жыл бұрын
The sample provided was for HTML markup, can you give examples for CSS background images (particularly for WebP).
@Am_ro123 жыл бұрын
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?
@shaunpalmer95583 жыл бұрын
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
@charleshines25062 жыл бұрын
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.
@somnvm373 жыл бұрын
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.
@andrewrea27993 жыл бұрын
I just use tinypng. It seems like it gives me the smallest file size and the best quality.
@antero76805 жыл бұрын
Tell as how to use webp image in sass file.
@KevinPowell5 жыл бұрын
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.
@KevinPowell5 жыл бұрын
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.
@KevinPowell5 жыл бұрын
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.
@romtekch49584 жыл бұрын
webp is still not supported well enough.
@Tymon00005 жыл бұрын
I use compressed PNGs
@zerocontentTV5 жыл бұрын
Thank you! Didn’t know about webp!
@TheHermitHacker5 жыл бұрын
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.
@KevinPowell5 жыл бұрын
That really surprises me, I've had good success with webp
@duskyer23915 жыл бұрын
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.
@KevinPowell5 жыл бұрын
Switch to lossless webp to keep transparency 😁
@mjuaj15 жыл бұрын
thanks for clearing it up. It's so clear now I can see the bottom.
@techtipsuk5 жыл бұрын
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.
@KevinPowell5 жыл бұрын
Yup, webp still beats those though by about 30% in general. But using other compression methods for jpg does make a big difference
@SumanRoy.official5 жыл бұрын
Its great to see like : dislike ratio
@cowboyfrankspersonalvideos88695 жыл бұрын
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
@KevinPowell5 жыл бұрын
Thanks for sharing that :)
@KevinPowell5 жыл бұрын
Thanks for sharing that :)
@KevinPowell5 жыл бұрын
Thanks for sharing that :)
@SumanRoy.official5 жыл бұрын
best to use png and svg
@KevinPowell5 жыл бұрын
for icons, yup. For raster images (photos), I wouldn't put it inside an svg
@geennaam97445 жыл бұрын
svg
@KevinPowell5 жыл бұрын
SVG us awesome, but not always the best choice. For icons and logos it's great!
@KayahanKahrman5 жыл бұрын
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. :)
@KevinPowell5 жыл бұрын
haha, it is on my todo list, but I've yet to play around with it yet
@KevinPowell5 жыл бұрын
haha, it is on my todo list, but I've yet to play around with it yet
@KevinPowell5 жыл бұрын
haha, it is on my todo list, but I've yet to play around with it yet
@KayahanKahrman5 жыл бұрын
@@KevinPowell Thanx a lot. :)
@hopsta5 жыл бұрын
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
@KevinPowell5 жыл бұрын
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.