 Hello everyone, I am Indian and I will be talking about progressive JPEGs and HTTP2 and how they sort of work really well together. They are totally different technologies but sort of interplay very well when you use them together and just want to talk about that. So a bit about myself, I like web performance and web security, I am working on a startup called Dexsecure, we build tools to automate speeding up of your websites. So this actually was some of the research that we did during while working on this. So I just wanted to talk about progressive images first. So let me just give you a brief introduction to what each thing is, what progressive images are and what HTTP2 is and then let's go on with the talk. So the easiest way to explain this is actually with a video. So the one you see over here is the progressively encoded image and one you see on the right is what you would see normally, it's called baseline encoding. So definitely both these images that they look the same then but when I reload both the pages together, you can see that the way that they load looks different. So here the size of the images are almost the same but here the images, both the images are around say 40% loaded, 40-50% loaded but here what happens is that lower quality version of the image is shown to the user first and it's progressively enhanced. This is what you would see in most web pages, when you open a web page and your internet connection is slow, this is what you see in a page, the images loads chunk by chunk. So this is basically a different way of encoding images, cool part about it is that it looks better even when part of the image is downloaded. So that's the one over one of that. So basically sequential images are the one you saw on that side, it's delivered top down chunk by chunk, progressive images are delivered scan by scan. So it means what it means is that first a low quality scan is sent forward to the browser, the browser decodes it and as it gets more and more information you start getting a better resolution of the image. The cool part about progressive images is that most progressive images are around 10% smaller than the equivalently encoded baseline images which is cool so they also look better but they are also mostly smaller in size. They are exactly the same so once both images have been loaded you won't be able to tell a difference between which is progressive and which is baseline encoded so it's a lossless transformation. There are some caveats to it so before you go ahead and implement there are some things that you need to take care of, I've just mentioned two here, one is that it takes more time to decode so when you are sending these images to say low-powered mobile devices you need to take care because the browser is actually decoding every scan as it comes so it's more work for the browser and some older browsers don't understand this format, it's still a JPEG, it's a valid JPEG but what happens to old IE browsers and stuff like that is that you get a much worse experience because the browser waits for all the data to come and then the boom the image comes like that so be careful when you encode it. It has this. HTTP2 so the brief introduction to HTTP2 is that it's the next version of the transport protocol, it's the main difference between HTTP2 and previous versions is that all requests and responses are sort of multiplexed in one single connection so in previously what used to happen is that the browser used to have limits on how many connections can be opened to a single domain so if you are say Facebook.com at most six requests can go to Facebook.com at a single time and then the next six used to go and then the next six. What's cool with HTTP2 is that it's just one connection and it's all a binary format it all requests and responses are interleaved into one single connection and it goes on from that. Let me just show you some demos of how this works so yeah this is the standard demo that people show when it's an exaggerated demo showing the power of HTTP2 so the one is here is HTTP1 that's HTTP2 it's all mixed with yeah so this is you can see like each image gets downloaded on HTTP1 connection it's six requests go at the same time so this is what it looks when there are a lot of image requests going on HTTP1 connection. What happens here is that you see that a bunch of all the requests almost all the requests go at the same time and they sort of are downloaded parallely so if you look at the waterfall diagram this how it looks like so this is the standard this is why it's called the waterfall six six requests at the same time go to the server and it gets downloaded like that so this is the HTTP2 see the so many requests go at the same time to the server so that's the brief gist of what HTTP2 does so yeah so the basic idea is that why how progressive images and HTTP2 are sort of linked together is that let me just go to the demo it's probably easier to show so this is page just simple page that I set up with like 10 images all our baseline encoded and the domain is served on a HTTP2 connection so let me just clear the cache and reload the page can see that can see how it loads sequentially so that's that's how it looks like when the images are sequentially encoded now I'll show you the same demo but with progressive encoded the images look exactly the same but when you encode progressively what happens is that you can see this image is just probably like 20% or 30% downloaded but as the page loads you are able to see much more of the image so you don't see like strips everywhere you get like low resolution pictures of the versions of the picture everywhere and they are enhanced so with HTTP2 it's all the more important that you encode your images in this way because all the problem the not the problem the feature of HTTP2 is that all requests go at the same time so each individual image is going to download slower because everyone all these 100 requests are going to compete for bandwidth so instead of showing a version where so this happened fast because this happened sequentially but that's the main different the main thing is that half downloaded progressive images look much better than half downloaded sequential images so that's the basic thing so I also run a test to show the actual difference between both the pages so the main thing that this optimizes for the load times and stuff might almost be the same because the size of the images are same but look at the visual progress so you can see that with HTTP2 it's all the more important to encode your images like this because you can see it's consistently higher than the other version so there is another feature of HTTP2 that you can take a look at it's much more advanced when it comes to images so there's a feature called HTTP2 push with this means that typically what happens is that a browser sends a request and the server sends your response right but in HTTP2 the server can say that okay I know you're going to need this response just take it so the server can push resources to the client even without the client asking it so typically normally what this is used for is like if you know that new visitor is coming on to your site and these are some hidden resources in your web page for example say your AngularJS bundle loads an image and the browser can't discover that image right up front so it's probably if that image is important to your site it you can push it with your say JavaScript bundle that's one example where HTTP2 push is used but a cooler part where it can be used is that I remember that I mentioned that progressive images are delivered via scans so you can see if like some you have like two important hero images that you want to download so you can push these for the first scan layers of these two different images down to the client so you have much more control over how the image loads which part of the image loads and so on so these are the some of the new things that you can take control to make sure that your users get a good experience so right now pushing of individual layers is supported only by very few servers shimmer cat is example of one server which you can use to do that yeah that's about it so you can play around with these two pages and see what's the difference between the experience of using normally encoded image and a progressive image run different tests in different browsers and see how it works any questions of push is it or HTTP2 so okay so push the problem there are different again it's not a silver bullet you can't just push all the resources that you think the client might need one reason is that the client might already have it in his cash so if you just say that okay I'm going to always push this image regardless of what happens it's just wasted bandwidth so there are some solutions to get around this look upon cash digits digits and so on so the main thing is we still haven't figured out as an industry what exactly to push and when it's not exactly straightforward you can't just codify it as a rule and say okay this what you need to push it depends on your application measure test and see it on different devices and this landscape is changing very fast so keep testing in different browsers every month or so like three four months Firefox implementation of HTTP2 was very bad but now it's like better than Chrome and stuff like that so just keep testing before you just do it that's there with any performance optimizations that you try to do so the HTTP2 push is not that different okay thank you so much