{"id":83536,"date":"2022-10-07T22:11:50","date_gmt":"2022-10-07T20:11:50","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/"},"modified":"2020-09-16T23:46:22","modified_gmt":"2020-09-17T02:46:22","slug":"feedback-from-the-summer-2019-image-optimization-survey","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/","title":{"rendered":"Feedback von der Umfrage zur Bildoptimierung im Sommer 2019"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Audience\" >Audience<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#WebP\" >WebP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#SVG-and-vector-images\" >SVG and vector images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Other-image-formats\" >Other image formats<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Lazy-loading\" >Lazy loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Background-images\" >Background images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Transparency\" >Transparency<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Low-Quality-Image-Placeholders-LQIPs\" >Low Quality Image Placeholders (LQIPs)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Performance\" >Performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Sizing\" >Sizing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#High-quality-and-high-resolution-images\" >High quality and high-resolution images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Browser-capability\" >Browser capability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#CDNs-and-image-services\" >CDNs and image services<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#CMS-platform-and-framework\" >CMS, platform, and framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Costbenefit\" >Cost\/benefit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#SEO\" >SEO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#The-role-of-images-on-the-web\" >The role of images on the web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#Tooling-guidance-standards-and-best-practice-frustrations-and-requests\" >Tooling, guidance, standards and best practice: frustrations and requests<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Comments from survey respondents about various image optimization techniques\n        <\/p>\n<p>\n          <time>Nov 22, 2019<\/time><\/p>\n<\/header>\n<p>This post lists the freeform feedback that Google Web DevRel received in its Summer 2019<br \/>\nimage optimization techniques survey.<br \/>\nResponses were solicited through <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\">Web Fundamentals<\/a> and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/chromiumdev\">@ChromiumDev<\/a>. The motivation for the survey was to find out why<br \/>\nmost sites don&#8217;t follow image optimization best practices even though they seem like a relatively<br \/>\neasy way to improve performance. The response data isn&#8217;t listed here because there were flaws<br \/>\nin the survey methodology.<\/p>\n<h2 id=\"audience\"><span class=\"ez-toc-section\" id=\"Audience\"><\/span>Audience <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>If you&#8217;re a web developer, you might find this post useful for discovering new image optimization<br \/>\ntechniques, or details on how other web developers have solved a problem that you&#8217;re facing, as<br \/>\nwell as the costs, benefits, and limitations of each technique.<\/li>\n<li>If you&#8217;re an image service or image CDN provider, this post might help you find new market<br \/>\nopportunities.<\/li>\n<li>If you&#8217;re a framework, build tool, or CMS developer, this post might give you ideas on new<br \/>\nfeatures to implement.<\/li>\n<\/ul>\n<h3 id=\"webp\"><span class=\"ez-toc-section\" id=\"WebP\"><\/span>WebP <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w-aside w-aside--note\">\n<p>Why&#8217;s this important?<br \/>\nImage formats such as WebP can result in smaller files and better quality than older formats such as JPEG and PNG.<br \/>\nThere are several techniques for using modern formats with fallback for older browsers.<\/p>\n<\/div>\n<ul>\n<li>\u00abI do like WebP but it isn&#8217;t yet fully ready. Moreover, our WordPress doesn&#8217;t support WebP. One of the most popular photo editing apps, Photoshop, also doesn&#8217;t support WebP out of the box. So we can&#8217;t rely on 3rd party apps or services for image compression.\u00bb<\/li>\n<li>\u00abMake WebP usable on Safari.\u00bb<\/li>\n<li>\u00abI would love to use WebP if I could export them from Photoshop\/Figma\/Sketch and all browsers supported it.\u00bb [Note: Sketch does support WebP]<\/li>\n<li>\u00abNext gen formatting solution would be great.\u00bb<\/li>\n<li>\u00abStop pushing WebP so hard when browser support is poor, and consider the need for PNG instead of JPEG for screenshots.\u00bb<\/li>\n<li>\u00abGoogle Docs doesn&#8217;t support WebP.\u00bb<\/li>\n<li>\u00abWe would use WebP exclusively, but are concerned about browser compatibility.\u00bb<\/li>\n<li>\u00abFirst fix browser compatibility and update legacy browsers or add legacy fixes, then people will be more inclined to adopt to new image types like WebP\u2026\u00bb<\/li>\n<li>\u00abEncourage plugin\/theme developers to consider providing support to WebP and other next-gen image types, so that non-developers don&#8217;t need to fiddle with it.\u00bb<\/li>\n<\/ul>\n<h3 id=\"svg-and-vector-images\"><span class=\"ez-toc-section\" id=\"SVG-and-vector-images\"><\/span>SVG and vector images <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abIf possible I&#8217;m using (animated) SVG. gatsby-image fixed a lot of this. But when you dig into what they&#8217;ve done, it&#8217;s completely unrealistic that a normal website should have to build out something like that to get images to work right. The browser should take on more of this responsibility.\u00bb<\/li>\n<li>\u00abWould it be possible to document how to create SVG animations with <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/airbnb.io\/lottie\/#\/\">lottie.js<\/a>?\u00bb<\/li>\n<li>\u00abWe try to use big resolution JPEG pictures with low sizes in our website most of the time to avoid loading times. We also ensure to use SVGs when necessary to provide quality for responsive design.\u00bb<\/li>\n<li>\u00abWe try to use optimized vector graphics for all but pics if possible.\u00bb<\/li>\n<\/ul>\n<h3 id=\"other-image-formats\"><span class=\"ez-toc-section\" id=\"Other-image-formats\"><\/span>Other image formats <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abWe [need to] better educate people to stop using GIF.\u00bb<\/li>\n<\/ul>\n<h3 id=\"lazy-loading\"><span class=\"ez-toc-section\" id=\"Lazy-loading\"><\/span>Lazy loading <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abPlease keep the user in mind when considering features such as lazy load, because for many it&#8217;s annoying.\u00bb<\/li>\n<li>\u00abMake the lazy load attribute work with background-image please.\u00bb<\/li>\n<li>\u00abWe love that lazy loading of images is finally becoming a native feature.\u00bb<\/li>\n<li>\u00abFrameworks should do better asset processing out of the box.\u00bb<\/li>\n<li>\u00abWe have converted from lazy loading a long time ago.  User reports of millions of images and sites \u00abNOT LOADING\u00bb.  That was understanding our team summarized it as.  It&#8217;s hard for a non-technical users to describe issues.\u00bb<\/li>\n<li>\u00abI&#8217;m keen to get a better understanding of using Intersection Observer API for lazy loading rather than using traditional techniques.\u00bb<\/li>\n<li>\u00abThis well works for me: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/pwafire.org\/developer\/codelabs\/progressive-loading\">pwafire.org\/developer\/codelabs\/progressive-loading<\/a>.\u00bb<\/li>\n<\/ul>\n<h3 id=\"background-images\"><span class=\"ez-toc-section\" id=\"Background-images\"><\/span>Background images <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abI usually load images as backgrounds in CSS.\u00bb<\/li>\n<li>\u00abThe <code>&lt;img&gt;<\/code> tag is problematic and difficult to control fine-grained details about, especially with user-submitted content. We use <code>&lt;div&gt;<\/code> and background-image styling much more often as it allows us to use background-size, background-position, and prevent right-click saving of the image.\u00bb<\/li>\n<\/ul>\n<h3 id=\"transparency\"><span class=\"ez-toc-section\" id=\"Transparency\"><\/span>Transparency <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abIt&#8217;s 2019. How are JPGs still without alpha transparency?\u00bb<\/li>\n<li>\u00abI only really use PNGs for photographs when I need a transparent background.\u00bb<\/li>\n<\/ul>\n<h3 id=\"low-quality-image-placeholders-(lqips)\"><span class=\"ez-toc-section\" id=\"Low-Quality-Image-Placeholders-LQIPs\"><\/span>Low Quality Image Placeholders (LQIPs) <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abWe use LQIPS and it&#8217;s a great technique to keep visitors engaged without loading high quality images really early.\u00bb<\/li>\n<\/ul>\n<h3 id=\"performance\"><span class=\"ez-toc-section\" id=\"Performance\"><\/span>Performance <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abWe actually had a recent performance issue with images. As a user scrolls down on our site, we show the next 60 cards which include a thumbnail. Due to the 6 connection limit on the same domain, the thumbnails were being blocked as well as the next AJAX request to get the next 60 cards if a user continues to scroll down.\u00bb<\/li>\n<li>\u00abWe would love to use HTTP\/2 but most of our customers use IE11! We are therefore exploring domain sharding \/ loading AJAX JSON data requests off a different domain.\u00bb<\/li>\n<\/ul>\n<h3 id=\"sizing\"><span class=\"ez-toc-section\" id=\"Sizing\"><\/span>Sizing <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w-aside w-aside--note\">\n<p>Why&#8217;s this important?<br \/>\nThe <code>srcset<\/code> attribute provides alternative image sources. You specify width or pixel density so the browser can choose the smallest image without needing to download images to calculate dimensions.<\/p>\n<\/div>\n<ul>\n<li>\u00abSorry for intrinsicsize; leveraging height\/width seems better to me.\u00bb<\/li>\n<li>\u00abLooking for a way to generate less sizes, right now it&#8217;s ~12.\u00bb<\/li>\n<li>\u00abDynamic resizing of images is really hard and impossible without JS.\u00bb<\/li>\n<li>\u00abA tool like <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/responsivebreakpoints.com\">responsivebreakpoints.com<\/a> is good for web.dev :).\u00bb<\/li>\n<\/ul>\n<h3 id=\"high-quality-and-high-resolution-images\"><span class=\"ez-toc-section\" id=\"High-quality-and-high-resolution-images\"><\/span>High quality and high-resolution images <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abHow to download compress images without losing DPI quality?\u00bb<\/li>\n<li>\u00abWe&#8217;re a document management company. Our apps handle MILLIONS of hi-res scanned images, usually TIFF or PDF.\u00bb<\/li>\n<li>\u00abIt&#8217;s a hassle. Hi-res img files are necessary for print format; must be optimized for web. It&#8217;s a hassle to downsize images for web but it&#8217;s a show-stopper if authors only supply lightweight files for images destined for print publication. We wind up giving mixed messages about requirements for submission of manuscripts with artwork. We then wind up with complex workflows for processing those materials.\u00bb<\/li>\n<\/ul>\n<h3 id=\"browser-capability\"><span class=\"ez-toc-section\" id=\"Browser-capability\"><\/span>Browser capability <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abAuto responsive src crop from browser as native feature would be very useful as it is time consuming to crop all images to 4 sizes and writing all the markup. If we can upload one large photo and writing a simple picture tag that browsers will automatically create the multiple src attributes that would be a winning feature.\u00bb<\/li>\n<li>\u00abPersonally I&#8217;m having a hard time avoiding page reflows when image with is set by CSS for responsive images (max-width: 100%; height auto or height: width: 100%; height auto), especially in combination with art direction from adaptive images\/picture tag. Best way to avoid seems to use the \u00abnegative padding hack\u00bb for a fixed image ratio and then position the image inside this ratio box. Better browser support\/responsive image handling would be a really great help!\u00bb<\/li>\n<li>\u00abPlease disable GIF \u00abautoplay\u00bb by fetching just the first frame.\u00bb<\/li>\n<\/ul>\n<h3 id=\"cdns-and-image-services\"><span class=\"ez-toc-section\" id=\"CDNs-and-image-services\"><\/span>CDNs and image services <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w-aside w-aside--note\">\n<p>Why&#8217;s this important?<br \/>\n<strong>Image services<\/strong> make it easier to optimize your images. You usually just upload one high-resolution<br \/>\nversion of each image and then use a web service API to optimize or transform the image as needed.<br \/>\n<strong>Content Delivery Networks (CDNs)<\/strong> optimize the distribution and delivery of images and other website assets<br \/>\nand sometimes provide optimization services, such as automatically delivering WebP images to supporting browsers instead of PNG or JPEG, without changing the file extension.<\/p>\n<\/div>\n<ul>\n<li>\u00abGoogle should provide a free CDN like Cloudflare.\u00bb<\/li>\n<li>\u00abMaybe more tooling to set up dynamic scaling and CDNs with different providers would be nice.\u00bb<\/li>\n<li>\u00abA single oversized overcompressed image is a very decent solution with no extra production cost. You need around 1000 pixels wide images for mobile (500px render width) and that is also the size you need for large\/desktop non-retina displays. I think images resize CDNs are a very bad solution, although I have used it in the past. The CMS should handle the resizing and of that is too complex to set up, a single solution is a good compromise (for now).\u00bb<\/li>\n<li>\u00abCloudFlare auto-scales our images to best match the user&#8217;s display. So we can save on loading time because images are loaded in relative to the user&#8217;s display. For example, if a user is on a phone, it won&#8217;t load in a desktop-sized background.\u00bb<\/li>\n<li>\u00abCloudflare does this in the background without us having to do anything except check a box in our settings panel.\u00bb<\/li>\n<li>\u00abJust to reiterate, the only reason I can successfully use srcset, etc. is due to the ease of Cloudinary. But Cloudinary gets expensive, <em>really<\/em> fast. this feels like a major hole in the development experience.\u00bb<\/li>\n<li>\u00abWe need a way to easily auto crop images in a smart way so they can work with different aspect ratios in different contexts.\u00bb<\/li>\n<li>\u00abI also use images from Other providers like Unsplash where there is very less control of resolution, quality and compression.\u00bb<\/li>\n<\/ul>\n<h3 id=\"cms-platform-and-framework\"><span class=\"ez-toc-section\" id=\"CMS-platform-and-framework\"><\/span>CMS, platform, and framework <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abI still struggle to find out what is the best way to use images, when I am building a site using a CMS. Authors tend to configure images with different dimensions and expect images not to shrink or scale. I am not sure if it is ok to set max-width or max-height on images\u00bb<\/li>\n<li>\u00abBeen using gatsby-image for the last few projects and have never looked back.\u00bb<\/li>\n<li>\u00abImages are often the hard part as they are put into CMS by end user, they may use any size, format, sometimes original image in ideal image format and dimensions are not available.\u00bb<\/li>\n<li>\u00abImages are difficult to maintain since our system is self-serve adding controls is difficult unless things happen automatically without affecting resolution. Also for us images don&#8217;t look correct in mobile vs desktop\u00bb<\/li>\n<li>\u00abI help people to optimize their sites (WordPress). The biggest problems I&#8217;ve seen for images are: Need to depend on a CDN or plugins to create WebP. srcset\/picture has to be coded properly by theme developers. Most of the lazy loading plugins loads slowly giving bad UX. Background images are hard to lazy load.\u00bb<\/li>\n<\/ul>\n<h3 id=\"costbenefit\"><span class=\"ez-toc-section\" id=\"Costbenefit\"><\/span>Cost\/benefit <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abThe new practices are effective but increase the development time of the sites.\u00bb<\/li>\n<li>\u00abThe lack of adherence to the new standards such as srcset and WebP has been slow to be adopted by many Fortune 500 companies. Seeing this, many companies have resisted the change as an unnecessary development cost for current websites. The performance gains are not widely discussed or reported by the end user (UX). If anything, it makes it somewhat harder to save images from the web.\u00bb<\/li>\n<li>\u00abCostly to create and manage multiple sizes, versions.\u00bb<\/li>\n<li>\u00abThey take up a lot of space on our server.\u00bb<\/li>\n<\/ul>\n<h3 id=\"seo\"><span class=\"ez-toc-section\" id=\"SEO\"><\/span>SEO <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abIt&#8217;s difficult to balance between acceptable image quality and file size. On one hand, I want fast loading for the SEO benefit, but on the other hand, poor quality images will detract from the UI\/UX.\u00bb<\/li>\n<\/ul>\n<h3 id=\"the-role-of-images-on-the-web\"><span class=\"ez-toc-section\" id=\"The-role-of-images-on-the-web\"><\/span>The role of images on the web <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u00abThere are too many on the web. Stop using useless images that don&#8217;t enhance the written content.\u00bb<\/li>\n<li>\u00abDo you still remember the time when the web didn&#8217;t have images and we shared selfies as ASCII-art?\u00bb<\/li>\n<\/ul>\n<h3 id=\"tooling-guidance-standards-and-best-practice:-frustrations-and-requests\"><span class=\"ez-toc-section\" id=\"Tooling-guidance-standards-and-best-practice-frustrations-and-requests\"><\/span>Tooling, guidance, standards and best practice: frustrations and requests <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>[One participant wrote a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/stokito.wordpress.com\/2019\/07\/19\/how-to-make-web-images-better\/\">blog post<\/a> in response to this survey]<\/li>\n<li>\u00abThe requirements seems to constantly change. As a web developer it is extremely frustrating because it is time consuming to save out the images in the first place. We optimize the best we can, we check the site and then months later Google has decided that the images could be even more compressed or need to be in a different format. This prevents us from providing the best possible solution to our client that lasts and instead creates a costly endeavor for them and us. Some of our small business clients simply don&#8217;t have the budget for us to keep fixing images and re-saving them out to adhere to the requirements. We don&#8217;t have the budget to do this work within their management packages. Writing the code to call different image sizes for different devices is also time consuming. It would be great to come up with a system of saving out images that would be consistent for a longer period of time.\u00bb<\/li>\n<li>\u00abYes, I think you got <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/audits\/budgets\">Keep Request Counts Low And File Sizes Small<\/a> all wrong in Lighthouse. If a site serves over HTTP1.x then sure, but if a site serves over HTTP2 then the number of requests is less important or not even an issue if originating from the same hostname. I have a lite website, but I load 30 small WebP files of approx 35 requests total, over HTTP2 on the same hostname. Lighthouse is flagging this as an \u00abKeep Request Counts Low And File Sizes Small\u00bb issue whereas it is superfast and because of the HTTP2 on the same hostname the number of requests are not a problem. And yes, the files are already small (most between 1 KB and 2 KB or less). I could load a sprite but then more CSS computing needs to be done. So please update the \u00abKeep Request Counts Low And File Sizes Small\u00bb report in Lighthouse to take HTTP2 over same hostname into account.\u00bb<\/li>\n<li>\u00abIt has been a struggle for people to remember to compress their images.\u00bb<\/li>\n<li>\u00abCross browser behavior remains unpredictable so the simplest solutions are often the safest.\u00bb<\/li>\n<\/ul>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comments from survey respondents about various image optimization techniques Nov 22, 2019 This post lists the freeform feedback that Google Web DevRel received in its Summer 2019 image optimization techniques&#8230;<\/p>","protected":false},"author":1,"featured_media":82208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83536","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Feedback from the summer 2019 image optimization survey - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Comments from survey respondents about various image optimization techniques Nov 22, 2019 This post lists the freeform feedback that Google Web DevRel\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Feedback from the summer 2019 image optimization survey\" \/>\n<meta property=\"og:description\" content=\"Comments from survey respondents about various image optimization techniques Nov 22, 2019 This post lists the freeform feedback that Google Web DevRel\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T20:11:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Feedback from the summer 2019 image optimization survey\",\"datePublished\":\"2022-10-07T20:11:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/\"},\"wordCount\":2225,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/\",\"name\":\"Feedback from the summer 2019 image optimization survey - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"datePublished\":\"2022-10-07T20:11:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Comments from survey respondents about various image optimization techniques Nov 22, 2019 This post lists the freeform feedback that Google Web DevRel\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/feedback-from-the-summer-2019-image-optimization-survey\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"width\":1200,\"height\":1200,\"caption\":\"social-6815535-9949209-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Feedback zur Bildoptimierungsumfrage im Sommer 2019 \u2013 R Marketing Digital","description":"Kommentare von Umfrageteilnehmern zu verschiedenen Bildoptimierungstechniken 22. November 2019 In diesem Beitrag wird das Freiform-Feedback von Google Web DevRel aufgef\u00fchrt","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:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/","og_locale":"de_DE","og_type":"article","og_title":"Feedback from the summer 2019 image optimization survey","og_description":"Comments from survey respondents about various image optimization techniques Nov 22, 2019 This post lists the freeform feedback that Google Web DevRel","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-07T20:11:50+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Feedback from the summer 2019 image optimization survey","datePublished":"2022-10-07T20:11:50+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/"},"wordCount":2225,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/","url":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/","name":"Feedback zur Bildoptimierungsumfrage im Sommer 2019 \u2013 R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","datePublished":"2022-10-07T20:11:50+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Kommentare von Umfrageteilnehmern zu verschiedenen Bildoptimierungstechniken 22. November 2019 In diesem Beitrag wird das Freiform-Feedback von Google Web DevRel aufgef\u00fchrt","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/feedback-from-the-summer-2019-image-optimization-survey\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","width":1200,"height":1200,"caption":"social-6815535-9949209-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83536"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83536\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/82208"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}