{"id":17652,"date":"2021-11-15T13:17:52","date_gmt":"2021-11-15T19:17:52","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17652"},"modified":"2021-11-15T13:17:52","modified_gmt":"2021-11-15T19:17:52","slug":"serve-images-in-next-gen-formats","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/","title":{"rendered":"Lighthouse Optimizations &#8211; Serve Images in Next-gen Formats"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;<b>Serve Images in Next-gen Formats<\/b>&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1637003271191{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;Why use Next-gen Image Formats?&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"font-size: 16px;\">If you have experience developing websites, you are aware of the image formats you have available to you and their advantages. PNG and JPEG files are some of the most widely used image formats still used on websites today. However, newer image formats, like AVIF, JPEG 2000, JPEG XR, and WebP can provide better quality and compression benefits, which helps to reduce download time and data consumption. This is especially important for users on mobile devices. Let us look at the benefits of these image formats. <\/p>\n<p>[\/vc_column_text][vc_custom_heading text=&#8221;Benefits of Next-gen Image Formats&#8221; font_container=&#8221;tag:h3|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<ul style=\"font-size: 16px;\">\n<li><strong>AVIF. <\/strong>AVIF stands for AV1 Image Format. It was introduced in 2019. It is a royalty-free format that can provide developers with better compression and smaller image file sizes, without degrading quality. It also supports HDR (High Dynamic Range) which provides a better range of brightness, color, and contrast for displays that have this feature. Additionally, many popular companies, like Google, Apple, and Facebook support this new format.<\/li>\n<li><strong>JPEG 2000.<\/strong> JPEG 2000, or JP2, was introduced in 2000. This file format provides for high compression with lossless and lossy techniques. Compared to JPEG, one of the main advantages of JPEG 2000 works well with natural photos and visual content. However, you do not want to convert a JPEG image to JPEG 2000 as it will result in an image with a larger file size.<\/li>\n<li><strong>JPEG XR.<\/strong> JPEG XR, or JPEG Extended Range, was released in 2009. It offers enhanced support for HDR images, multiple color formats, and compression techniques. However, it has not been widely adopted, compared to other file formats.<\/li>\n<li><strong>WebP.<\/strong> The WebP format was introduced in 2010. WebP is an open-source format and designed specifically for websites that support lossy and lossless compression, as well as animations, as a good replacement for GIFs.<\/li>\n<\/ul>\n<p style=\"font-size: 16px;\">One thing to consider before using any of these image formats is what is the application you are using it for and which browser, or browsers will be involved. Some of these image formats work better in specific browsers, so make sure to identify which browsers most of your users are using. Additionally, there are plugins and conversion tools that will convert different image file types, but make sure to identify which is best for your needs.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=&#8221;60&#8243; margin_bottom=&#8221;0&#8243; css=&#8221;.vc_custom_1636595147911{margin-bottom: 15px !important;}&#8221;][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595227743{padding-top: 60px !important;padding-bottom: 60px !important;padding-left: 10px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17233&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>Lighthouse<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595173585{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17284&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>PageSpeed Terms<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595196399{padding-top: 60px !important;padding-right: 10px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17281&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>YSlow<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;Serve Images in Next-gen Formats&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1637003271191{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;Why use Next-gen Image Formats?&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text] If you have experience developing websites,&hellip;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17260,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.6 (Yoast SEO v19.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Lighthouse Optimizations - Serve Images in Next-gen Formats | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Want to learn more about using next-gen image formats like AVIF, JPEG 2000, WebP, and others? Learn more about what this Lighthouse audit means!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Lighthouse Optimizations - Serve Images in Next-gen Formats\" \/>\r\n<meta property=\"og:description\" content=\"Want to learn more about using next-gen image formats like AVIF, JPEG 2000, WebP, and others? Learn more about what this Lighthouse audit means!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let&#039;s Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/\",\"name\":\"Lighthouse Optimizations - Serve Images in Next-gen Formats | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-15T19:17:52+00:00\",\"dateModified\":\"2021-11-15T19:17:52+00:00\",\"description\":\"Want to learn more about using next-gen image formats like AVIF, JPEG 2000, WebP, and others? Learn more about what this Lighthouse audit means!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lighthouse Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lighthouse Optimizations &#8211; Serve Images in Next-gen Formats\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - Serve Images in Next-gen Formats | Dotcom-Monitor Tools Blog","description":"Want to learn more about using next-gen image formats like AVIF, JPEG 2000, WebP, and others? Learn more about what this Lighthouse audit means!","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:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - Serve Images in Next-gen Formats","og_description":"Want to learn more about using next-gen image formats like AVIF, JPEG 2000, WebP, and others? Learn more about what this Lighthouse audit means!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let&#039;s Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/","name":"Lighthouse Optimizations - Serve Images in Next-gen Formats | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-15T19:17:52+00:00","dateModified":"2021-11-15T19:17:52+00:00","description":"Want to learn more about using next-gen image formats like AVIF, JPEG 2000, WebP, and others? Learn more about what this Lighthouse audit means!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/serve-images-in-next-gen-formats\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Lighthouse Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/"},{"@type":"ListItem","position":3,"name":"Lighthouse Optimizations &#8211; Serve Images in Next-gen Formats"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17652"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=17652"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17652\/revisions"}],"predecessor-version":[{"id":17654,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17652\/revisions\/17654"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17260"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}