 I'm going to walk around I think sorry so yeah okay hello that's very bright so I might stand here if you don't mind so good evening how's everyone good good okay excellent so I try to do this upside down so before I start who heard about this paradigm fresh body fit mind he did anyone else okay so it's good because what we're going to do now is an exercise so in light of this please stand up you see that's I know you didn't get pizza but you know we're making healthier healthier decision so the exercise is going to be very simple okay all you need to do I'm going to show you my back you need to raise up your arms both of them so that your elbow is in line with your eyes like like that okay and now put your palms together repeatedly come on come on clap clap clap clap clap clap clap okay if you're still thinking what's going on thank you even with a very small crowd this works very well last time I did it it was it was a conference in India I had 600 people doing that that was like and then all of them were like well okay so on a more serious note so what I'm going to talk to you about today is image management image performance and image optimization okay so that's going to be the topic for discussion and I'm going to share I think I have three statistics with you the first one and I highly recommend probably can't really read that but I highly recommend that you take a look at that resource which is the web almanac project who has heard about the web almanac project before good okay learning moment number one so the web almanac report is essentially a yearly report that is written by essentially you know open source contributors volunteers etc and it's based on the HTTP archive datasets so all the data that Google collects if you opted in into the data collection of course all of that is then basically crunched by all these individuals and their individual chapters for the web almanacs it's a very very big report it has chapters on media it has chapters on HTTP JavaScript CSS accessibility gem stack and it has like I think 20 plus chapters focusing on very specific topics and so this statistic comes from the the media chapter and by the way anyone can decide to write a chapter so you can be there a contributor as in an author a reviewer or a data analyst okay so I just recommend that you check this project out so this comes from the the media chapter from 2022 which is the the latest one essentially so 99.9% of all the websites out there today make a request to an image of some sort which pretty much is telling us that you know every website makes a request to an image so images are everywhere and that's why it's really important to understand what image optimization can do and how that works here's another one so I do work for a company called Cloudinary so we have our own sort of media reports what we do is we basically allow anyone to store their media assets on our platform so those are images and then you can transform them optimize them and deliver them okay and this is from 2022 as well so every month the our job so I call it image CDN so that's Cloudinary processes 199 billion requests for images okay and that's per month okay so that's a lot of image data going through Cloudinary and just so that we talk about diversity as well a little bit so usually we think you know mobile phones we think desktop we think tablets Cloudinary also sends 2.7 million images to Sony Bravia TVs okay so maybe next time when you think about should I optimize for mobile and desktop maybe add a Sony Bravia TV into that list as well and more important this obviously the title of this talk is you know pictures worth a thousand kilobytes but you know the saying a picture is worth a thousand words the reason why that thing exists and here's some you know very clever person doing some research it's a very long URL but essentially 50% of our brain is is capable of processing information from images okay so I can basically convey information to you a lot faster by using an image versus just showing you text okay and so it's really important to make sure that these images that you use in web applications arrive to to the users in the right shape in the right format so that they can enjoy the website the website is performant etc etc etc so I don't know how many of you know on real Vatican okay again highly recommend that you follow this person he is a I think he works for web page things speed something something huh no that's that's not his actual name by the way it's just like a nickname okay but that's how you will find him on LinkedIn Twitter everywhere GitHub etc so he's he does a lot of tweets around web performance and in 2021 he said the following the image element turned 25 in 2020 it both engages users with delight and in rages developers and I think it's a very nice way of putting how we work with images right the image element itself is very easy to use but getting images right in your application can be very very difficult and so I looked up the HTML specification from 1995 and this is you know the description of the image element we're not going to go through these but what I'm going to show you is that in 1995 the image element has these four attributes right a line old is map and source and of course you know the SRC or the source attribute is where you put in your image URL that you want to display on the site so this is great this is you know 23 years ago but not 20 whatever years ago and this is 2020 to 2023 this is how the image element could look like right this is a lot more complex there's a lot of stuff in here and all of these were added for a reason okay so this this could be a valid image element there's a source else alt width height source set sizes loading decoding style etc etc etc okay so we're going to talk about what these options mean and why you should be considering using them so adding images to website is easy is it yes no is it okay I'll prove you wrong adding it is easy adding it in the right way right format etc can be very very tricky because there's a lot of things that you need to understand so that your your website performs well because here's the thing often when we talk about web performance we think JavaScript right oh I'm going to lazy load my components and do this we always focus on JavaScript JavaScript is not the largest resource in in a web application it's images and videos right even even if you have a very complex and large web application which is I don't know two megabytes of JavaScript if you have 10 500 kilobyte images that's far going to be it's going to be by far larger than the JavaScript okay and then not loading those correctly not serving up in there it's not serving that but not serving them up in the right format is all going to cause various issues for you okay so that's why adding images is easy but adding them or optimizing them in the right way is very very difficult or can be difficult so these are the things that you need to think about right what image format should I use based on the image format you need to also consider the actual content of the image right because it doesn't really you can't apply the same optimizations and same transformations for a highly complex image versus just a simple image of a t-shirt for example okay because you get color bleeds you can add all sorts of visual artifacts and defects in your images which you don't want to have what are the devices that you're targeting maybe you say okay I'm just going to generate web p web p is not supported in all the versions of Safari so by default you may sort of exclude a large portion of your users do you want to do responsive images how do you want to deliver those images how do you want those images to be decoded by the browser so these are all questions that you need to think about so the good news is that there are a lot of tools available okay so there's an online tool which it also so I should have put that in the libraries category as well so scooge.app is one tool that you can use to sort of optimize your images and it also has now has a CLI so it's installable by MPM you can use a desktop client like image opt-in to you know pull in all your JPEG files and say oh we use the the quality of these image files to you know quality 75 or something sharp gym those are all MPM packages that you can use to programmatically do image optimization and of course you can use image CDNs as well to do this job now so what are the key concepts we're going to talk about some of these but not all of these so what you need to understand is the differences between image formats okay how is a JPEG different from a PNG and how is a different from a web P and how is a different from an AVIF or a GIF okay that's you need to understand that you need to also understand user devices what is our direction what is device pixel ratio what is a viewport you then need to understand how your images affect your core web vitals the largest content of the web and the first input delay the cumulative layout shift what happens when you have a responsive design how do you create responsive images and what techniques you have for loading images or loading image placeholders so we're going to talk about some of these this is a I think we call it a better yeah better card of codex at clouding we created this you know this better card which basically shows the various image formats that are out there actively being used on the web JPEG Excel support has been removed from Chrome so this JPEG Excel can only be used in very small very particular browsers but not in the main ones but you can see that you know just looking at this you can see that you know JPEG it has been around since 1992 web P 2010 AVIF 2019 and obviously this is just a screenshot from the battle card it's a it's a very large one-page PDF document but there are a lot of things that you can compare when it comes to the image formats you know fidelity for example compression how fast you know with an AVIF we be encoded and decoded versus say a JPEG okay and FYI encoding and decoding and AVIF takes a long time if the image is very very large okay so in fact some image CDNs like clouding we actually if the image is too large so it's I think it's either more than 4,000 to 6,000 pixels we will not generate AVIF because it would take a long time or a longer time that it's already not acceptable for any application to use it then I also had a look at the again the web online project just to see a breakdown of the image formats on the web so by far JPEG is the most widely used one obviously because it is understood by all the browsers then it's PNG, GIF, WebP, SVG, icons and you see AVIF didn't even make the well it's it's in there but you couldn't do a label to it because it's such a small portion of this pie okay now I'm going to say this don't use GIFs just don't okay on websites just please don't why it's very big it's very inefficient and you can do the same if you convert a GIF file into an MP4 or to a WebM file and the end result is going to be a lot more performant and if you use the video element with the autoplay loop muted attributes you it will look like a GIF and and if you compare this I did this comparison so I had a GIF which was eight seconds long and it was like an animation from a sports game it was 18 megabytes the same video was 800 kilobytes okay so on the better codec we saw something about fidelity so fidelity is a very important concept to understand when it comes to image optimization so fidelity is about trying to trying to preserve the details of the original image as as close as possible okay what do I mean by that so I have an example where we have one image which is a low fidelity AVIF and then we have a high fidelity JPEG so maybe think of this JPEG as the original one I don't know how well this is going to be visible but the low fidelity means that in the low fidelity version of the AVIF you lose the fine details of the wall I don't know if that comes through all the the projector but you see here you can sort of see the bricks whereas there you see a smooth red wall okay now yes the AVIF would load in let's say in one second and this would load in two seconds you have achieved something that loads a lot faster but is that good enough for you is are you okay to lose the details of the optimized image so that's why I mean that you have to understand that you know generating a low fidelity AVIF may lose some of the details from the image here's another example not related to the web but just if you're curious look up this thing called the Xerox incident so what happened this is from country member Austria Germany or Switzerland where a company was scanning in all their you know their financial documents and stuff and in the Xerox scanner back in the day there was an image encoder okay that did all this work and it was a low fidelity image encoder I'm forgetting the name of it so can you see so that's the original this is what the scanner then I'll put do you see what's wrong okay yeah three and and one okay so that's what you you have this is what you scan and then send to someone you either made or lost money or something happened some things off already okay so there's actually a low in in I think it's in I don't know if it's in the dark countries so Germany Austria and Switzerland or Europe wide but the there are certain image codex and image encoders that they cannot use in scanners because of this incident that happened I don't know how many years ago okay so so what does this all mean to us the web developers okay so I have an example which is you know totally made up totally legit business called backs for sale okay so let's say you're the developer and you know that you have to optimize your images because your boss wants the site to be really fast he wants you know everyone to be able to see the products in one second and then you know that's of course that of course is going to lead to you know a great experience for the users and of course better sales and better profit right everyone's going is going to be a snappy website people who buy stuff great and you in order to do that you create low fidelity images right so you create these smaller AVIFs that load faster the problem is that because of the low fidelity property of the image you going to you won't be able to preserve the original color and depending on the business you won't be able to preserve the sort of the fabric to find details of the fabric which could essentially mean that you shoot yourself in the foot that you know you're going to have some unhappy customers who are going to get the product and they say well this look black and now it's green or this look green and now it's actually black right so they're going to send the products back now I have a video which never works and that's one but what I'm focusing on is you don't know that you're supposed to do that because you just say okay AVIF and I maybe load a higher quality version of the AVIF but still low fidelity right it's still going to be different so the video never works on a projector I'm sorry but what is supposed to happen this bag has some very fine detail on the fabric and it's black and then I'm going to start a video but it is never visible on the low fidelity version of the AVIF the color changes to this very dark green and it loses the texture of the bag it's almost like a smooth leather black which is it's not and then I don't know if there's a way to distribute the slides then you will see it on your machine because it's more visible it's going to like flicker between the two colors and you will see that when it's green it's kind of smoother and the original has these little lines in the material okay so another very important topic especially in the past you know six to twelve months is cobra vitals anyone heard about cobra vitals a couple of you okay so what are cobra vitals cobra vitals are essentially are three metrics okay that were introduced by Google that allow any website or any developer to adhere or to create a website that that provides good user experience and Google categorizes good user experience into three categories right one is responsiveness one is sort of like readability although they call it stability I think they called it the third one was loading time or something related to that I can't remember the exact things that they did but what they've done they created three metrics okay largest contentful paint first input delay and cumulative layout shift and when they first announced this they announced it three four like you know many many years ago and everyone was like okay metrics whatever and then a couple of months years later Google said something that shocked everyone and they said okay if you scroll if you score bad in any of these categories that is now going to directly impact your search page ranking and that's when everyone was like oh wait what co-core web what what like how and so I'm not going to get into this because the talk is not about you know the core vitals and what they do but essentially if you have a bet so each of these would have like a good and acceptable and a wrong or incorrect matrix so first input delay I think is 0 to 100 milliseconds is good 100 to 300 is acceptable and 300 milliseconds and above is is not good so if you in that 300 milliseconds plus category that is going to impact your search page ranking other than the usual you know whether you use HTTPS how relevant your content is to the search how fresh the content is so on and so forth so that's when people start to listen so images also play a very critical part in core by vitals right so first input delay if it's a first input delay is about you trying to you're trying to do an action on the website so a classic example is you know you go to website either on your mobile and your laptop there's a search box you click it you type something nothing happens two seconds later your text appears that's a bad experience it means that there is something some sort of JavaScript running in the in the background which means that the browser can't process your input okay so in that case you're going to get a very bad score but the thing is if you have very large network requests IE very large images that you send through then you may be blocking your JavaScript to be downloaded you may be blocking something that would increase your first input delay okay this is not very typical but it could happen okay so if your image if you have I don't know a two megabyte image and that is going to be downloaded by the browser before the JavaScript that is responsible for some sort of event handler you would be pressing you know your button nothing's going to happen so just be mindful of this cumulative layer shift again very simple to sort of understand a typical example you you know you're on your phone you read an article and then in between the paragraphs or in between the sentences an advert just comes in and then it shifts the content very annoying right cumulative layer shift is penalizing that cumulative layer shift means or it measures how much the content shifts on the page and that's why when you work with images you are required to set the width and the height so that the browser knows how much space it needs to block out on the page so that the content does not shift okay and then you can also use aspect ratio with CSS to block the space for the images and there are some other strategies in here but the most important one and the most difficult one to solve apparently according to Google is the largest contentful paint okay or the LCP so LCP very simple to measure is how long the largest element on a given page took to load and in modern sort of UX design usually the largest element is an image of some sort right it's going to be a hero image or or an image right it's never going to be text although they also measure text and the the thing is that largest contentful paint and the metric for it's and I'm forgetting the I think it's 0 to 2.5 seconds is good 2.5 to 4 or 5 is okay that's the orange and then 5 seconds or 4 seconds and above you're in the red zone you need to definitely fix it but that number that calculation is actually made up of these four sub-optimization so in order for you to optimize your LCP metric you need to optimize four individual things time to first buy it resource load delay resource load time and trying to reduce your element render delay okay so optimizing any of these would yield a better largest contentful paint score or a better overall score for LCP so I'm just very quickly going to go through this how much time five minutes okay we started at half past no one I'm okay okay tell me when you're bored anyone has any plans before 10 okay so reducing time to first bite so what is time to first bite you hit you go to the browser you type in example dot com you send the request to the server index of the HTML comes back and when the very first byte is received by the browser that's the time that we measure and your goal is to load the the initial HTML page as soon as possible and this is where there's a very important discussion which I'm just going to focus on this last point which is generating so you know static rendering of your HTML versus server-side rendering there's a lot of discussion these days about server-side rendering right server-side rendering react and server-side rendered this server-side rendering is actually not good for your time to first bite okay why you send the request to a server the server is then going to now server render something so this you know is doing something and then it's going to send the HTML back whereas if you pre-build your HTML at build time it means that when you go to a site you request the HTML it's there it's just the server just needs to send it back or the CDN just needs to send it back okay so it's going to be a lot faster there are the tricks and tips in here I'll let you look up those if you want to so that's number one so reduce time to first bite resource load delay so resource load delay is a delta between the time to first bite and the browser starting to load what your LCP candidate is in other words your goal is to try to load let's say the LCP is an image your goal is to try to load the image asset as soon as possible okay ideally right after when the browser has received the HTML like the the LCP candidate should be probably the second or the third resource that you load on the page okay do you know what a preload scanner is browser preload scanner okay so how do browsers work come on yes so so what the browser does right the browser opens up an HTML page it's going to part line by line okay so if the LCP image is in line 30 it needs to parse 29 lines before it gets to that and starts to download that so if there's a JavaScript there's a CSS before it that's when you get the network diagram in your Chrome DevTools right it will load the HTML the script the CSS and then your image that's already too late you want that image to be loaded at an earlier point in time and so what you can do in HTML you can help what is called the preload scanner so what is the role of the preload scanner so if every website today would work how we just explained it the web would be really really slow so every modern browser in fact this was first done in IE like a very old version of IE so this is actually Microsoft's doing which is very good so the preload scanner pre-scanned so there's a separate process in the browser that pre-scans your document and it's going to look up things like JavaScript files CSS files images and it's going to assign priorities to those based on what it thinks the importance of these assets are okay and that's why if you ever open up DevTools and you go to the network requests and you have a column called priority you will see highest high medium low lowest okay that is done by the preload scanner but most of the time it's okay but sometimes you know the browser doesn't know that that image is really important for you so you need to help it so the way you do that is not on my slides you need to research no the way you do that so there's a I wonder why it's not on my slides though there is a fetch so there's a link element right the one that you used to low star sheets etc so if you say link with the fetch priority attribute and you set it to high and you give it the href of your image the browser will download that asset it's going to be the second thing they download okay because it will say okay that is very important I need to download as soon as possible okay so it will start if we find the image we start downloading the image and now we go to the third optimizer the sub optimization which is resource load time which is very simply put the amount of time it takes for the resource to arrive okay and this is when again image optimization plays a very important role because the smaller the image size is the faster is going to arrive you know the faster we can transfer it over the network one I always forget it's always a side note it's side note okay it's not side note so it's very important to understand that you know sometimes so LCP you know if you don't have any images on the page you will still get an LCP score because LCP also measures text and this is very important to understand that if you have custom fonts third-party fonts that you load and you apply using CSS the time that you get the font you apply etc will impact your LCP okay so if your LCP is taxed then make sure that you load your fonts in the most efficient manner as possible but we're going to now focus on images so essentially you want to send an optimized resource through the network okay that's that's your your ultimate goal so there was a point about loading images by an image CDN on the previous slide and that was an asterisk so this is the explanation for that so usually serving an image from a from the same source from the same origin it's going to be faster right so if you have example.com slash index.html and your images example.com slash hero.jpeg that's going to work faster compare it to if you have that image on an image CDN because then there's a separate network lookup the network request DNS lookup etc so you have to go the browser has to go somewhere but on the flip side image CDNs come with a lot of features okay apart from optimization and transformations and so you need to wait whether the benefit of using that CDN with the extra features is actually better than serving the images locally now that's up to you to sort of decide what you want to do but in this time I'll show you what I mean by that okay so image has now arrived lost and fourth element render delay which is the last sub-automization so that's the time when you have received the resource and the browser rendering that resource or the browser's capability to be able to render that resource on the screen okay your goal is to reduce that time so the browser has it you want to display it as soon as possible and this is what we need to talk about my second favorite thing which is lazy loading okay because everyone in the same way how we talk about server side rendering these days a lot of people talk about lazy loading and usually the mantra is lazy load your images yes but if you lazy load your LCP hero image you're again doing that right you're shooting yourself in the food because you have now artificially extended your LCP time because you're telling the browser yeah that image can wait you know you can render it whenever don't don't ever ever if the only thing that you remember is never ever lazy load an image that is considered to be an LCP image okay because this is going to be loaded whenever the browser thinks it's ready to load it you want to load it as soon as possible okay I've seen I've seen a website I can't remember what the website was every single image on the site had the loading lazy attribute on it I checked the site the LCP was an image element and it had a terrible score exactly for that right you don't want to lazy load that yeah yeah there are lots of places where you can do that lighthouse is a good start but there's a better way to do that if again if there's time I'll if I'm given time I show you how to do that okay I'll show you this example because that's I have that doesn't matter image optimization checklist so this is yeah this is related to that so lighthouse is built into your DevTools very good start it can you know show you some performance scores and you know it can show you some warnings some errors some optimization stuff you can actually also check what the LCP's candidate is etc etc that's a good start okay you do that once it's going to unveil some issues for your site but then that's it because otherwise the metrics that you get from lighthouse are meaningless why there is the page speed insights so the difference of page speed insights if you it's free to use is by Google you enter URL you're going to get a report that looks exactly like lighthouse but there's going to be a section on top which is going to be called rum section real user metrics and what a page speed insights does is going to measure how your users your real users or how the experience was for your real users for the past 28 days and that is the metric that you should look at you should always try to look at real user metrics because if I run a lighthouse report on this machine and on that one and on that one we're going to get three different results three different scores different milliseconds different this why because it's local to the machine it's different network settings different CPU different memory different everything page speed insights collects data from me from you from everyone and it's going to present that data and so if I see that okay the LCP in the past 28 days was in the in the red zone I have a problem the real users visiting my site have a very big experience now I can go back to lighthouse and try to figure out why that is optimize it but that should be the data that you go to that should be the data that you use and other things like this web page test there's yellow labs there's debug there there are lots of you know performance measurement tools and most of them also have this reuse a metric data okay which is very very important there's I don't know how many of you've seen it but in DevTools in Chrome as of version 100 and X there is a an experimental panel called performance insights so that is the sort of new version so Chrome is going to remove I think the performance or the whatever panel soon and this one is going to replace it it gives you a much better overview of the performance of your site in fact for for the LCP it will actually show you the four sub calculations that I just mentioned is going to kind of draw it out on a on the bar chart and say okay this is time to first buy this is the element render delay etc so I highly recommend that you check that out then yes optimizing images so bulk optimization is when you have 100 JPEG files you put it into an optimization tool and you say give me quality 75 of these JPEGs that's a good start it's going to give you you know smaller images but that's not good enough why because there are images that could do with less or more optimization okay that could be you know one image could be reduced by 40 percent the other one could be 10 percent the other one could be 90 percent right the image optimization tools will not analyze the image image CDNs on the other hand would analyze the image and it would make the optimizations based on the content of the image different versions for different browsers again if you were to do this on your own you would have to figure out a way to see okay does this browser support yes it does send the weapon does it support AVIF maybe send the AVIF does it not do does it not support any of that while send the JPEG do it if you want to I wouldn't but because it's very you know it's a cumbersome thing to do image CDNs do that automatically again lazy load images but not LCP and if you want to show something to users really really quickly there's a technique called LQIP which is low-quality image placeholders which you can use so couple of examples that's the performance insights panel by the way I think yes so you run this and then you will get this sorry this is the performance insights panel that's lighthouse I think you probably can't read this but you know this is the LCP breakdown time to first byte resource load delay resource load time element render delay you look at this and you're like okay I need to look into that because that takes a lot of time right that's that's six seconds out of the total of seven seconds that it took to load the LCP image or the LCP candidate okay so this this is from Chrome DevTools performance insights yikes okay I don't know I have that there can you do all of this at once yes you can so so much I want to say okay let's focus on just this part okay the style attribute so what you see here I'm going to show you a couple of examples in just a second but what you see here is a what I call the low-quality image placeholder so what we do here just just focus on the source and the style elements so the way this works is that because you have a heavily optimized SVG so this file is about I think 2.3 kilobytes in my example I just create a two color vector SVG of the original image and I add it using CS the style attribute which means this will load really really fast okay and then when the browser has finished loading the original image which is on top right the the SRC attribute that's going to be replaced with this okay so what you achieve with this is that you're going to show something for users which is kind of a visual representation a very simplified visual representation of what they're going to see and then when the browser processes and downloads the file boom is just going to replace it so that's the whole idea behind low quality image placeholders and there are various ways that you can load these images yes and sorry the loading lazy so that that's the attribute loading is equal to lazy the default behavior is loading equal to eager so there's a default behavior of the browser if you add that then you apply lazy loading to the images and you know you can now do that in just HTML it has no need to install a third party dependency and do some some crazy magic okay I'll explain this in a second I think this is a video yeah so this is a video recording of what's going to happen that's the original but when we refresh the page we're going to get the 2.8 kilobyte SVG right so you see something is going to load there so let me play this oh it keeps on playing right okay so you also what happened it won't look because I think I recorded it twice let's just go there okay so that's the SVG and then obviously that's 2.8 kilobyte versus 181 okay so yeah here there's just one point that I wanted to make so picture element in the picture element you can use multiple source elements with a full back of an image element this is useful if you don't want to use an image CDN and you have created an AVIF or WebP and a JPEG of the same image using this thinking about the browser again the line by line code execution if you open this HTML page in a browser that supports AVIF then it will load the AVIF file and ignore everything else if it doesn't know what that is it's going to check the next line WebP do I understand it it will display it and if it doesn't you just fall back to the image element okay which also means that the order of the source items does matter okay I don't have that slide but when I think it was last year in 2021 when we analyzed the using web or Manac data we analyzed the source elements for the video the order was mp4 and webm that was the most used combination so the intent is good because developers generated the webm and an mp4 the webm is web movies like you know it's like of the animated for the video version of WebP it's a lot the compression is a lot better okay so if an mp4 file is say a megabyte the webm would be 800 or 700 kilobytes so that's good but if you put mp4 before webm in the source what happens browsers we just did the mp4 they will never actually get to the webm and this was the most used combination in 2021 or 2022 it should be the other way around the other point that I want to make is that if you have this setup and if you have the you know the loading and the decoding attributes added to your image source loading and decoding cannot be added to the source element however loading lazy and decoding would be inherited by the source elements so even though I added loading lazy to the image element the avi fn webp whichever gets loaded will also be loaded lazily by the browser okay oh my favorite this is the sort of pro tip okay so going back to which way is back is this way back okay so going back to this example here you see the source set so this is I have my colleague here I spend like half a day looking at this and I went crazy so the source set means so look at the source set and look at the sizes so what I'm saying is that if the browser is 600 pixels or less I want to load the W 400 image which is a 400 pixel image if it's above I want to load W 800 which is 800 meaning that you know if you this is responsive designs that's responsive images right as you make the browser in the larger I just load a larger image and so I loaded this and no matter what I did I always got the W 800 loaded every single time and I was like I you know it in in DevTools there's a way to to see the the width of the browser in pixels and it was it was 600 and less and it didn't change anything it always loaded W 800 always loaded with 800 and I thought so do you know why this is it's what it's what he said I'll show you so in I'm going the wrong way right so in DevTools so here's the thing in DevTools if you have DevTools or like that you would never notice your three dots but when you click that it will show you a setting that says add or display the device pixel ratio which turns out to default to 2.0 what does that mean it means that because I'm using a retina screen device pixel ratio means that the browser will try to load twice as many pixels into the same space ie not 400 but 400 times 2 which is 800 so thank you Google DevTools okay that's the default and it's very hidden so all I had to do was change that to 1.0 and then 400 800 everything just worked okay very annoying it's anything that is so anything that yeah but but it's only retina displays anything it's just you know retina displays a apple you know trademark name for this but any laptop tablet mobile phone that is yeah I don't know how other companies call it but it would apply to most modern devices you do yeah but when you test that you're that should be pointed out to me in my face that hey by the way we default to dpr2 because when you open that scroll down it will actually say 2.0 brackets default and I'm like thank you and finding that took me a long time okay well that's the example I don't know why this moved here so there's a fresh priority that I mentioned right fresh priority high preload that image as image okay and this will tell the browser to load the image as soon as possible but I'm going to show you a demo real quick okay let's let's actually do this I'm going to take this here and I need to find the demo which was deployed to netlify I should have opened this I do apologize Serene Genie is the one that we're looking for and I'm going to open this in Chrome DevTools DevTools okay so let me just pop this back in here so what you see here is what I call the baseline okay so there's obviously you know the image gallery and blah blah blah doesn't really matter okay so the baseline is going to be really really slow okay you can see it's it's really slow and then all together is done that's even slower but that should be faster I don't know why that is but let's do the trick of throttling can you actually see that sorry so let's total down the network to fast 3g and try to open the homepage and this is when the problem starts okay and look at these okay that's the problem because we're loading images that are megabytes and megabytes in size which is not something you want to do okay and if I go to the all-together side again we're on a 3g connection is done okay because the images are a fraction of the original sizes so there are a couple of things in here and I'm I would be more than happy to drive more time or are you bored of me already we're up soon okay so I'll try to share this with you as well but basically it goes from the the baseline to the all-together by using the different optimization steps right one is the time to first byte one is the so all these four sub-optimizations are mentioned each of those menu items would go through that and there's also like a lazy loading example just to show you how the lcp is affected by you adding lazy loading okay two things I'll show you one is how do you see what the lcp is so you need to do is go to performance and here's another pro tip for you if you do any tests like a lighthouse test or performance test with the dev tools docked like this the view your viewport is literally from here to there that's what you're going to measure okay so if you want a real measurement you do this out because now it's going to look at that whole page as a viewport okay very very important you do performance measurement and then under timings there's a again let me just zoom in a bit under timings there's going to be a couple of labels and one of them is going to be lcp that's how you find your lcp time and then if you click on it you're going to then also see which element is considered for the lcp calculation on the page and then if you click this you're going to be taken to the source code and then you can see that hey this was the image obviously that was the largest thing right so it's we could have figured this out but that's the largest thing that we have there okay well you can you can make the image smaller and the text like you can but you can't tell Google that hey measure that instead it's it's always automatic it will it will look at the page and it will say okay that's the largest element that's what we're going to calculate okay so you can of course make this little smaller and make this text bigger than it's may change but it's always done by by Google okay so how was this optimization achieved so let me just take this copy can I click this yes okay so let me just show you this quick do you mind if I if I sit down it's just going to be an image right that's what we started and if you go to the network panel this image is 12 megabytes and it is okay so I've done I took this image to load megabytes of images ha welcome to unnamed hopefully totally masked out luxury Swiss watch company real company famous company each image in that gallery is two plus megabytes okay why they shrink they get a 1250 pixel by 1670 pixel image and shrink it down to 190 pixels okay real problem I was on a website I was doing some research and I found a 17 megabyte PNG I can't remember it was a New Zealand or a South African e-commerce website 37 megabytes for and it was also watch an image of a watch okay so real problem it's out there I tried to load this website just to see that gallery even on like a full blown Wi-Fi it took me at least you know 15 20 seconds and then imagine clicking into that seeing six seven images of that watch like who would buy from this like they're fit like they're well-known okay this is a real well-known a brand okay a couple of resources you can you know check these when you get the slides and that's all thank you for listening do you have any questions I'll differ that too no problem thank you for listening again if there's if you're any questions that's my website portfolio from there the links to social link them whatever you know feel free to to get in touch I'll be happy to talk to you about image and video performance thank you and you want to connect back oh but you need the question okay I think JPEG XL does that right so JPEG so JPEG XL is and this politics involved right now okay so JPEG XL is was supposed to be the new JPEG okay it's it's based on the JPEG standard it has been worked on by the JPEG committee one of my colleagues at Cloudinary is part of that committee he's done a lot of work they released it it beat everything in every dimension it beat AVIF web P low-fitted the hive it doesn't didn't matter compression speed uncompress it doesn't matter and now Google removed it from Chrome Firefox removed it from fire I don't know why they claim that because it is a what was that claim Google they just said oh it's like well okay Google has and owns web P okay I just leave it at that okay okay so it exists you can you can just look it up JPEG XL it does a lot of things that all images of web should do but there's resistance from Brazzavenduz for various political reasons that should not be discussed at this meetup oh and Apple has you know the HEE IC I don't pronounce hike he whatever there's you know there's lots of AVIF stuff happening the problem with I tell you what the problem is with these formats so web P AVIF and HEE hike he I don't know yeah well how do you pronounce hike you know HEE IC anyway so these three image formats were derived from video codecs and therein lies the problem so even though they are very efficient in encoding if you have so if you compare and I have a demo where I don't want boy anymore so if you load the same image as JPEG and AVIF the AVIF is going to load a lot faster but you will see blank and a boom the full blown version whereas with JPEG you will see if it's progressive JPEG you will see a blurred version and a clearer version and then the final image okay and that depends what you want right if you if you're happy with blank boom fine use AVIF but be aware of this limitation this limitation comes from the fact that they were derived from video codecs okay so what happens is you upload the image okay then we store it and then let's say this is the first time you do any set of transformations then we do it within our server and then that transformation is then pushed out to the CDN so which is and we are what is called a what do you call it multi CDN vendor whatever multi multi CDN we work with ECMI fastly Cloudflare all of them and then we in we you don't know which one we use because we're going to use the most optimal one multi vendor CDN I think it's called right anyway and then we push it out to the CDN network and so if this if you request the same set of transformations I can effort to queue to width 400 you never come back to us we just serve it from the CDN closest to your location and then we have options where so you can do eager transformations where when you upload the image you tell us these are the transformations I want to use and when you upload the image we do those transformations we push that to the CDN so by the time you request it it's already on the CDN okay what do you mean so sorry I'm not sure if I so so the browser compression for images what image like can you sorry clarify that a yeah why wouldn't the browser optimize it yeah because yeah so yeah yes the browser needs to receive the image like it could do it but it was still need to so if it's a two megabyte image it will still need to receive it via network request right and it could optimize it but then it's another set of seconds that you had to have delay because yeah okay thank you