{"id":21540,"date":"2017-05-31T21:00:20","date_gmt":"2017-05-31T21:00:20","guid":{"rendered":"http:\/\/devoxx_image_optimization_the_how_to"},"modified":"2023-08-12T10:17:28","modified_gmt":"2023-08-12T17:17:28","slug":"devoxx_image_optimization_the_how_to","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to","title":{"rendered":"Devoxx: Image Optimization. The \u201cHow to\u201d."},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><div style=\"position:relative;padding-bottom:50%;padding-top:30px;height:0;overflow:hidden;\">\n  <iframe style=\"position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\"\n        src=\"https:\/\/www.youtube.com\/embed\/MuH0wBX8uHs\" frameborder=\"0\" allowfullscreen>\n  <\/iframe>\n<\/div>\n<p><em>This talk was given at DevoxxUK by <a href=\"https:\/\/twitter.com\/jonsneyers\">Jon Sneyers<\/a><\/em><\/p>\n<h2>Talk Summary<\/h2>\n<p>Images are a crucial part of any website or app. In this talk we\u2019ll give a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, and PNG formats and some of the newer formats: <a href=\"https:\/\/developers.google.com\/speed\/webp\/\">WebP<\/a>, <a href=\"https:\/\/jpeg.org\/jpegxr\/\">JPEG XR<\/a>, <a href=\"https:\/\/jpeg.org\/jpeg2000\/\">JPEG 2000<\/a>, <a href=\"https:\/\/bellard.org\/bpg\/\">BPG<\/a> and <a href=\"http:\/\/flif.info\/\">FLIF<\/a>. We also briefly look at vector formats, in particular SVG and icon fonts. We will cover the strengths and weaknesses of each format and how to use them effectively.<\/p>\n<p>Selecting the right format and compression quality settings for an image is not a trivial task. It has become even more challenging when progressive and responsive web design are thrown into the mix, as well as user-uploaded images. Optimizing your images is important though, since on average, about two thirds of website bandwidth goes to images. We will give you some pointers on how to do this manually, and more importantly, how to automate the process.<\/p>\n<p>Jon Sneyers is a member of Cloudinary\u2019s R&amp;D team, and works on its image processing backend. Cloudinary is a cloud-based image management solution that manages 15 billion images; its backend processes thousands of images per second. It is used by over 100,000 web developers. Jon is an expert in image formats for the web. He created the Free Lossless Image Format (<a href=\"http:\/\/flif.info\/\">FLIF<\/a>), which achieves better lossless compression than any other format.<\/p>\n<p>Jon has a PhD in computer science from the University of Leuven (Belgium) and he currently lives in Brussels.<\/p>\n<p>Slides available <a href=\"https:\/\/www.slideshare.net\/KatrinaAzucena\/devoxx-uk-2017-image-optimization-the-how-to\">here<\/a>.<\/p>\n<h2>The \u201cHow to\u201d<\/h2>\n<p><strong>Jon Sneyers:<\/strong>\t\nWelcome, everybody, to my quick talk about <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">image optimization<\/a> and how to do it. Just a little slide about me: I am from Belgium. I work at Cloudinary, which is a image management solution end-to-end. We manage about 15 billion images. We do thousands of image encodings per second, so we are kind of experienced in dealing with images. It\u2019s what we do. I\u2019m also one of the guys who invented a new image format called the <a href=\"http:\/\/flif.info\/\">Free Lossless Image Format<\/a>.<\/p>\n<h2>Why does it matter?<\/h2>\n<p>Why does <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">image optimization<\/a> matter? 65% of an average website is images, in terms of bytes. Moreover, most of these images are part of the content of the website, just like the HTML. Unlike, say, the style sheets or the JavaScripts or the fonts, which are things that don\u2019t change very often, images do change very often, so there\u2019s not much opportunity for client-side caching of it.<\/p>\n<p>A lot of the bytes that get transferred and a lot of the things that slow down your website or your mobile application for that matter are images, so if you\u2019re optimizing things, it\u2019s the first thing you should look at.<\/p>\n<h2>Vector images<\/h2>\n<p>There are different kinds of images. One type of image is vector images, which are scalable by design. These kind of images consist of drawing instructions: drawing lines, drawing curves, maybe filling them with some color.<\/p>\n<p>These type of graphics can be scaled to any display resolution because they don\u2019t have the concept of pixels, so this is very suitable if you have your material in this representation and you can use an image format like SVG: scalable vector graphics, which is supported by all browsers. If you have material like this, and typically it will be things like icons, text, or plots, maybe drawings or logos, stuff like that, it could be a very good idea to use it.<\/p>\n<p>However, a lot of the images we deal with are not of this kind and you cannot just convert any type of image to a vector image.<\/p>\n<h2>Raster images<\/h2>\n<p>Most of the time we are dealing with <a href=\"https:\/\/cloudinary.com\/glossary\/raster-files\">rasterized images<\/a>, pixel images that are based on some rectangular grid of pixels, which is also what your screen does. Every pixel has some numeric value for the different color channels, typically red, green, and blue.<\/p>\n<p>This representation can be used for any type of image, not just logos and text, but the main downside, of course, is that it\u2019s not scalable. I mean, you can always scale down an image reasonably well, but scaling it up is going to look blurry at best. I will focus, of course, on pixel images, and I will talk a bit about different kinds of image formats that are available. Here\u2019s a timeline, more or less, of the internet and of image formats for the web.<\/p>\n<p>The boxes in red are pixel image formats. The ones in green are vector formats. Let\u2019s start with the ones everybody knows, which are JPEG, PNG, and GIF or GIF, I don\u2019t know. These formats are universally supported. You can use them on any browser on any platform. That\u2019s the main benefit of these formats: universal adoption.<\/p>\n<h2>GIF<\/h2>\n<p>Let\u2019s start with the oldest one, which is GIF. It dates back to the late \u201880s. Still, currently it\u2019s the only universally supported format for animated stuff.<\/p>\n<p>If you have something animated and you want it to work everywhere, the only option still, sadly is GIF or \u201cJIF\u201d. Either way, it\u2019s limited to a palette of only eight bits of color, so 256 colors. And it\u2019s limited in terms of transparency, in that you can only have fully transparent pixels or fully opaque pixels, but not semi-transparency. These limitations mean that you cannot really represent colors very well, so you will have to do some kind of <a href=\"https:\/\/cloudinary.com\/glossary\/color-quantization\">color quantization<\/a>, color <a href=\"https:\/\/cloudinary.com\/glossary\/dithering\">dithering<\/a>, which will make your images look worse.<\/p>\n<p>But within these limitations, it\u2019s a lossless image format, so there\u2019s nothing lossy going on, except of course maybe you have to first reduce the number of colors.<\/p>\n<h2>JPEG<\/h2>\n<p>JPEG, on the other hand, is, by design, a lossy format, and it\u2019s specifically designed for photographic images. It doesn\u2019t support transparency because your camera doesn\u2019t produce transparency, and it\u2019s always lossy. Even a quality 100 JPEG is going to be slightly lossy.<\/p>\n<h2>Progressive Rendering<\/h2>\n<p>One of the neat features of JPEG is that it supports progressive rendering, which means that if you are loading on a slow connection, a JPEG file which has <a href=\"https:\/\/cloudinary.com\/glossary\/progressive-rendering\">progressive rendering<\/a>, it will look like the image on the right, which gives you a decent preview of the full image very quickly. The very beginning of the file already gives you a nice preview. Whereas, if you have a non-progressive JPEG, it will load from top to bottom, which means that on a slow connection, it can take a while before the bottom part becomes visible.<\/p>\n<p>The progressive one is incrementally refining the quality of the image, but you can see it already looks as if it is completely loaded while it\u2019s actually still loading at the moment, but you cannot really see that. It\u2019s going to stop loading now. Yeah. The progressive one is slightly smaller than the non-progressive one. That\u2019s typical. I recommend using progressive JPEG, but there is some controversy. Not everybody agrees with me on that. I think it\u2019s usually a good idea.<\/p>\n<h2>PNG<\/h2>\n<p>Then there\u2019s the PNG file format, which was designed to replace the GIF format, mostly because there were some patent issues with GIF. It does a really good job at replacing GIF in the sense that it offers better compression than GIF. It does have support for semi-transparency and full color, but it doesn\u2019t support animation, sadly, so in that respect, it doesn\u2019t replace GIF, and that\u2019s probably the only reason why GIF is still around today.<\/p>\n<p>There is an animated variant of PNG called APNG, and it is supported in Firefox, Safari, and Chrome, so it is starting to become more and more of an option. It\u2019s only recent versions of Chrome, so not yet.<\/p>\n<h2>How to pick the right format?<\/h2>\n<p>So how to pick the right image format. The first question is \u201cDoes your image have to work on all browsers?\u201d If it doesn\u2019t have to work on all browsers, you can do much more interesting stuff, but if it has to work on all browsers, then the first question is, \u201cIs it an animation or not?\u201d<\/p>\n<p>If it\u2019s animated, you have no other choice than to use GIF. If it\u2019s not animated, then there\u2019s no reason to use GIF. If it has transparency, then, again, you have no other choice than to use PNG because JPEG doesn\u2019t support it, but the bulk of the images on the web are still images that are not using transparency, and in that case it depends on the kind of image: which format is right. If it\u2019s a photographic image, typically JPEG will be the best choice. If it\u2019s non-photographic, PNG might be a better choice.<\/p>\n<p>So it is a bit tricky to make this decision automatically, but this is more or less what you would have to do. Okay. Those are the universally supported formats. Now let\u2019s look at some of the more recent formats that do not have universal support. Let\u2019s first look at these. If you look at the support table, none of these formats have universal support. You have <a href=\"https:\/\/jpeg.org\/jpegxr\/\">JPEG XR<\/a>, which is supported only on Windows, <a href=\"https:\/\/jpeg.org\/jpeg2000\/\">JPEG 2000<\/a> only in Safari. Then there\u2019s <a href=\"https:\/\/developers.google.com\/speed\/webp\/\">WebP<\/a>, which is supported on Chrome and Android in general also.<\/p>\n<p>It\u2019s probably going to be supported soon, also, in Firefox and hopefully in Safari, so it is starting to get more adoption. Then there\u2019s some even newer formats that haven\u2019t got any browser support whatsoever.<\/p>\n<h2>Newer formats<\/h2>\n<p><a href=\"https:\/\/jpeg.org\/jpeg2000\/\">JPEG 2000<\/a> is a improved version of JPEG. It adds some missing features like support for transparency. It has a lossless mode. It supports a higher bit depth for more accurate color representation. Sadly, it didn\u2019t really catch on, at least on the web.<\/p>\n<p>There are some niche cases where it is quite popular like medical imaging, but on the web it\u2019s not used very much, and of course that\u2019s mostly because only Safari supports it.<\/p>\n<p><a href=\"https:\/\/jpeg.org\/jpegxr\/\">JPEG XR<\/a>: more or less the same story. It\u2019s an improvement of JPEG, also supports transparency, a higher bit depth, slightly better compression than JPEG, but the difference is not that huge, and it\u2019s only supported in Internet Explorer, so quite similar to <a href=\"https:\/\/jpeg.org\/jpeg2000\/\">JPEG 2000<\/a> in a sense.<\/p>\n<p>Then there\u2019s <a href=\"https:\/\/developers.google.com\/speed\/webp\/\">WebP<\/a>, which is a really interesting format. It was developed by Google. It\u2019s based on the WebM video codec, so VP8, which means that it has some limitations, but usually it\u2019s superior to JPEG in terms of compression quality, so it\u2019s a highly recommended format. It comes in two variants. There\u2019s lossy variant, which basically improves upon JPEG: adds support for transparency and so on. And there\u2019s a lossless variant, which is a replacement for PNG and tends to be superior to PNG. It also supports animation, so it can replace GIF.<\/p>\n<p>Then there\u2019s some even newer formats. I won\u2019t go into much detail. <a href=\"https:\/\/bellard.org\/bpg\/\">BPG<\/a> is based on H265, the video codec. It is currently the best available format in terms of lossy compression, so it will give you the best quality for a given file size. Sadly, it has some patent issues and it has no browser support, so it\u2019s not really practical to use right now, except maybe in an application not on a website I guess.<\/p>\n<p>Then there\u2019s the <a href=\"http:\/\/flif.info\/\">Free Lossless Image Format<\/a>.. The same situation: no native browser support, but this is a lossless format, and it\u2019s currently the best available option for lossless compression, and it doesn\u2019t have any patent issues.<\/p>\n<h2>Responsive Web Design<\/h2>\n<p>Just some brief words about responsive web design. 10 years ago it would be acceptable to have websites like this. Actually, this is an example from last week, so you can still find these kind of websites, where you\u2019ve designed the website for a fixed view-port width.<\/p>\n<p>You just say to people, \u201cIf you don\u2019t have this screen resolution, it\u2019s your problem.\u201d That\u2019s, today, no longer acceptable. We have a variety of devices which people use to browse the internet. People are viewing websites on very large televisions. They are viewing websites on phones and on smartwatches even. So the variety of screen resolutions is becoming huge. If you look at the top statistics of screen resolutions, you can see that the most popular resolution is actually much smaller than what used to be common 10 years ago.<\/p>\n<p>It\u2019s just 640 by 360, but a bit down the list you get full HD or maybe even higher, so it\u2019s a huge range of resolutions. The question becomes how to deliver the right image to the right person because you cannot actually give the same image to everybody. It doesn\u2019t make sense to send a 4K resolution image to a smartwatch, so you have to make sure that your images get the right dimensions in terms of resolution, taking into account things like DPR.<\/p>\n<p>You also have to take into account the physical size of the device. If you are showing an image on a very small device, you might want to zoom in to the interesting bits of the image, not show the entire thing down-scaled. So you need to do some kind of cropping usually to deliver slightly different variants of the same image to different people. Also, you have to take into account the browser and the capabilities in terms of image formats so you can make use of the best format that is available.<\/p>\n<p>In the near future, there are going to be other ways in which different images are going to be served to different people. For instance, wide gamut displays are becoming more and more of a thing, and you might want send different versions of an image depending on this as well. Finally, bandwidth considerations are also important to take into account. In order to deliver the right image to the right person, you need to make a lot of variants of your images.<\/p>\n<h2>Cloudinary: \u201cImages Solved\u201d<\/h2>\n<p>Doing this manually, it\u2019s basically becoming impossible, so one way to solve this is to use dedicated <a href=\"https:\/\/cloudinary.com\/glossary\/image-cache-server\">image servers<\/a> like Cloudinary, which I work for. Basically you just upload your original images once in the highest resolution you have available and you let the image management service do all the rest, so convert it to the right sizes, automatically crop it, automatically select the right formats, and so on and so on.<\/p>\n<h2>Summary<\/h2>\n<p>To summarize just a few take-home lessons, images are incredibly important for the performance of your website and mobile applications, but it\u2019s tricky to get it right. You probably don\u2019t want to spend too much development effort into trying to solve these problems yourself and reinvent the wheel, so I would suggest to automate this process. Use one of the existing services to take the hassle out of it and let people who know what they\u2019re doing do their thing. That\u2019s just my suggestions. Any questions? Yeah?<\/p>\n<h2>Q&amp;A<\/h2>\n<p><strong>Speaker 2:<\/strong>\nWhat are the issues related to progressive JPEG, the controversy?<\/p>\n<p><strong>Jon Sneyers:<\/strong>\t\nThe controversy is mostly about \u2026 In a progressive JPEG, you first get a blurry version of the image and it gets better and better. According to some people, this can give you a bad first impression of the website because the image looks bad and you don\u2019t wait for it to fully load. Whereas, in a non-progressive you see the image load, so you know the pixels you can see, they are at the highest quality already. So it\u2019s a psychological issue I guess. There are some different opinions about what is best. There\u2019s also performance things like progressive JPEGs take a bit more memory to decode. I think most people would agree that progressive JPEG is the right thing to do. Any other questions?<\/p>\n<p><strong>Speaker 2:<\/strong>\t\nWhat kind of optimizations do you do on the images, like stripping metadata for example?<\/p>\n<p><strong>Jon Sneyers:<\/strong>\nYeah, stripping metadata is obvious. In lossy compression, there\u2019s many ways to compress an image. You can select quality settings, but there\u2019s various knobs you can turn. What we try to do is automatically find out which quality settings can give you the smallest size in terms of bytes but still give an image that looks good because you cannot just save everything as, say, a quality 70 JPEG. That\u2019s not going to work. Some images will have artifacts while other images, they might look fine as a quality 50 JPEG. So it depends on the image and you need some clever heuristics to figure out how far you can go basically.\nSpeaker 3:\tDo you do that then?<\/p>\n<p><strong>Jon Sneyers:<\/strong>\t\nYeah.<\/p>\n<p><strong>Speaker 3:<\/strong>\t\nHow about with smaller images, the zooming? Actually, some kind of gravity or something like that to zoom in.<\/p>\n<p><strong>Jon Sneyers:<\/strong>\nYeah. The question is \u201cWhat about the cropping, the zooming in?\u201d We also have algorithms for that. For instance, based on face detection and other kinds of heuristics we zoom in on the parts that are most likely to be the focal area of the image so you can automatically crop without you knowing in advance where you want to crop. We can figure out what part you want to keep and what you want to crop out.<\/p>\n<p><strong>Speaker 4:<\/strong>\t\nCould you comment on what you do better than your competitors like Imgix or Kraken, technically speaking, not in terms of pricing or any of that?<\/p>\n<p><strong>Jon Sneyers:<\/strong>\t\nYeah. I don\u2019t know about pricing. Technically, I think we have the most complete solution. In terms of functionality, we have the most features. Like the automatic quality selection, automatic cropping, I think we have much more advanced features in that respect than what Imgix has to offer, for instance. I\u2019m not saying you have to use us.<\/p>\n<p>I\u2019m just saying, don\u2019t try to do it yourself because it\u2019s messy, it\u2019s difficult, and you will waste a lot of time reinventing stuff and reimplementing things in a probably less scalable and less robust way because there\u2019s all kinds of issues, especially if you have user-uploaded images: there is also security risks involved, maliciously crafted input images and so on. We had the ImageTragick problem some time ago, so it can be dangerous to do your homegrown solutions stuff. Okay. Thank you.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[227,321],"class_list":["post-21540","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-performance-optimization","tag-webp"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Devoxx: Image Optimization. The \u201cHow to\u201d.<\/title>\n<meta name=\"description\" content=\"In this talk Jon gives a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, &amp; PNG formats &amp; some of the newer formats: WebP, JPEG XR, JPEG 2000, BPG &amp; FLIF.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Devoxx: Image Optimization. The \u201cHow to\u201d.\" \/>\n<meta property=\"og:description\" content=\"In this talk Jon gives a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, &amp; PNG formats &amp; some of the newer formats: WebP, JPEG XR, JPEG 2000, BPG &amp; FLIF.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-31T21:00:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-12T17:17:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Devoxx: Image Optimization. The \u201cHow to\u201d.\",\"datePublished\":\"2017-05-31T21:00:20+00:00\",\"dateModified\":\"2023-08-12T17:17:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"keywords\":[\"Performance Optimization\",\"WebP\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\",\"url\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\",\"name\":\"Devoxx: Image Optimization. The \u201cHow to\u201d.\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"datePublished\":\"2017-05-31T21:00:20+00:00\",\"dateModified\":\"2023-08-12T17:17:28+00:00\",\"description\":\"In this talk Jon gives a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, & PNG formats & some of the newer formats: WebP, JPEG XR, JPEG 2000, BPG & FLIF.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Devoxx: Image Optimization. The \u201cHow to\u201d.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Devoxx: Image Optimization. The \u201cHow to\u201d.","description":"In this talk Jon gives a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, & PNG formats & some of the newer formats: WebP, JPEG XR, JPEG 2000, BPG & FLIF.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to","og_locale":"en_US","og_type":"article","og_title":"Devoxx: Image Optimization. The \u201cHow to\u201d.","og_description":"In this talk Jon gives a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, & PNG formats & some of the newer formats: WebP, JPEG XR, JPEG 2000, BPG & FLIF.","og_url":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to","og_site_name":"Cloudinary Blog","article_published_time":"2017-05-31T21:00:20+00:00","article_modified_time":"2023-08-12T17:17:28+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to"},"author":{"name":"","@id":""},"headline":"Devoxx: Image Optimization. The \u201cHow to\u201d.","datePublished":"2017-05-31T21:00:20+00:00","dateModified":"2023-08-12T17:17:28+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"keywords":["Performance Optimization","WebP"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to","url":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to","name":"Devoxx: Image Optimization. The \u201cHow to\u201d.","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"datePublished":"2017-05-31T21:00:20+00:00","dateModified":"2023-08-12T17:17:28+00:00","description":"In this talk Jon gives a brief history of image formats for the web, discussing both the universally supported GIF, JPEG, & PNG formats & some of the newer formats: WebP, JPEG XR, JPEG 2000, BPG & FLIF.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Devoxx: Image Optimization. The \u201cHow to\u201d."}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21540"}],"version-history":[{"count":13,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21540\/revisions"}],"predecessor-version":[{"id":30892,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21540\/revisions\/30892"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}