بازخورد از نظرسنجی بهینه سازی تصویر تابستان 2019

نظرات پاسخ دهندگان نظرسنجی در مورد تکنیک های مختلف بهینه سازی تصویر

سام داتون

این پست بازخورد رایگانی را که Google Web DevRel در نظرسنجی تکنیک‌های بهینه‌سازی تصویر تابستان 2019 دریافت کرد، فهرست می‌کند. پاسخ‌ها از طریق Web Fundamentals و @ChromiumDev درخواست شد. انگیزه این نظرسنجی این بود که بفهمیم چرا اکثر سایت‌ها از بهترین شیوه‌های بهینه‌سازی تصویر پیروی نمی‌کنند، حتی اگر به نظر می‌رسد راهی نسبتا آسان برای بهبود عملکرد هستند. داده‌های پاسخ در اینجا فهرست نشده‌اند زیرا در روش نظرسنجی نقص‌هایی وجود داشت.

مخاطب

  • اگر توسعه‌دهنده وب هستید، ممکن است این پست برای کشف تکنیک‌های جدید بهینه‌سازی تصویر، یا جزئیاتی در مورد اینکه چگونه دیگر توسعه‌دهندگان وب مشکلی را که با آن مواجه هستید، و همچنین هزینه‌ها، مزایا و محدودیت‌های هر تکنیک حل کرده‌اند، مفید باشد.
  • اگر یک سرویس تصویر یا ارائه دهنده CDN تصویر هستید، این پست ممکن است به شما در یافتن فرصت های جدید بازار کمک کند.
  • اگر یک فریمورک، ابزار ساخت یا توسعه‌دهنده CMS هستید، این پست ممکن است ایده‌هایی در مورد ویژگی‌های جدید برای پیاده‌سازی به شما ارائه دهد.

نظرات

وب پی

  • "من WebP را دوست دارم اما هنوز کاملا آماده نیست. علاوه بر این، وردپرس ما از WebP پشتیبانی نمی کند. یکی از محبوب ترین برنامه های ویرایش عکس، فتوشاپ، همچنین از WebP خارج از جعبه پشتیبانی نمی کند. بنابراین ما نمی توانیم به برنامه ها یا خدمات شخص ثالث برای فشرده سازی تصویر اعتماد کنیم."
  • WebP را در سافاری قابل استفاده کنید.
  • اگر بتوانم آنها را از Photoshop/Figma/Sketch صادر کنم و همه مرورگرها از آن پشتیبانی کنند، دوست دارم از WebP استفاده کنم." [توجه: Sketch از WebP پشتیبانی می کند]
  • "راه حل قالب بندی نسل بعدی عالی خواهد بود."
  • هنگامی که پشتیبانی مرورگر ضعیف است از فشار دادن WebP به شدت خودداری کنید و به جای JPEG برای اسکرین شات ها نیاز به PNG را در نظر بگیرید.
  • "Google Docs از WebP پشتیبانی نمی کند."
  • "ما به طور انحصاری از WebP استفاده می کنیم، اما نگران سازگاری مرورگر هستیم."
  • "ابتدا سازگاری مرورگر را اصلاح کنید و مرورگرهای قدیمی را به روز کنید یا اصلاحات قدیمی اضافه کنید، سپس مردم تمایل بیشتری به اتخاذ انواع تصاویر جدید مانند WebP خواهند داشت..."
  • توسعه دهندگان پلاگین/موضوع را تشویق کنید تا از WebP و دیگر انواع تصاویر نسل بعدی پشتیبانی کنند، به طوری که غیرتوسعه دهندگان نیازی به سر و کله زدن با آن نداشته باشند.

SVG و تصاویر برداری

  • "اگر ممکن است من از SVG (متحرک) استفاده می کنم. gatsby-image بسیاری از این موارد را برطرف کرد. اما وقتی به کارهایی که آنها انجام داده اند می پردازید، کاملا غیر واقعی است که یک وب سایت معمولی باید چیزی شبیه به آن بسازد تا تصاویر به درستی کار کنند. مرورگر باید مسئولیت بیشتری را بر عهده بگیرد."
  • "آیا می توان نحوه ایجاد انیمیشن های SVG با lottie.js را مستند کرد؟"
  • "ما سعی می کنیم در اکثر اوقات از تصاویر JPEG با وضوح بالا با اندازه های کم در وب سایت خود استفاده کنیم تا از بارگذاری جلوگیری کنیم. همچنین اطمینان حاصل می کنیم که در صورت لزوم از SVG استفاده می کنیم تا کیفیتی برای طراحی واکنشگرا ارائه دهیم."
  • "ما سعی می کنیم در صورت امکان از گرافیک های برداری بهینه شده برای همه به جز عکس ها استفاده کنیم."

سایر فرمت های تصویر

  • ما [نیاز داریم] مردم را بهتر آموزش دهیم که استفاده از GIF را متوقف کنند."

بارگذاری تنبل

  • "لطفاً هنگام در نظر گرفتن ویژگی هایی مانند بار تنبل، کاربر را در نظر داشته باشید، زیرا برای بسیاری آزاردهنده است."
  • "لطفاً ویژگی بار تنبل را با تصویر پس‌زمینه کار کنید."
  • چارچوب‌ها باید پردازش دارایی‌ها را بهتر انجام دهند.
  • "ما مدت‌ها پیش از بارگیری تنبل تبدیل شده‌ایم. گزارش‌های کاربر از میلیون‌ها تصویر و سایت "بارگیری نشده". این یعنی درک گروه ما آن را به این صورت خلاصه کرد. توصیف مسائل برای کاربران غیر فنی دشوار است."
  • "من مشتاق هستم که به جای استفاده از تکنیک های سنتی، درک بهتری از استفاده از Intersection Observer API برای بارگذاری تنبل داشته باشم."
  • "این خوب برای من کار می کند: pwafire.org/developer/codelabs/progressive-loading ."

تصاویر پس زمینه

  • "من معمولا تصاویر را به عنوان پس زمینه در CSS بارگذاری می کنم."
  • "برچسب <img> مشکل ساز است و کنترل جزئیات دقیق در مورد آن مشکل است، به خصوص در مورد محتوای ارسال شده توسط کاربر. ما از <div> و استایل تصویر پس زمینه بیشتر استفاده می کنیم زیرا به ما امکان می دهد از اندازه پس زمینه، موقعیت پس زمینه استفاده کنیم و از ذخیره تصویر با کلیک راست جلوگیری کنیم."

شفافیت

  • "سال 2019 است. چگونه JPG ها هنوز بدون شفافیت آلفا هستند؟"
  • من واقعاً فقط زمانی از PNG برای عکس‌ها استفاده می‌کنم که به پس‌زمینه شفاف نیاز داشته باشم.»

متغیرهای تصویر با کیفیت پایین (LQIP)

  • "ما از LQIPS استفاده می کنیم و این یک تکنیک عالی برای درگیر نگه داشتن بازدیدکنندگان بدون بارگیری تصاویر با کیفیت بالا است."

عملکرد

  • "ما در واقع اخیراً یک مشکل عملکردی با تصاویر داشتیم. وقتی کاربر در سایت ما به پایین اسکرول می کند، 60 کارت بعدی را نشان می دهیم که شامل یک تصویر کوچک است. به دلیل محدودیت 6 اتصال در همان دامنه، تصاویر کوچک مسدود شده بودند و همچنین درخواست بعدی AJAX برای دریافت 60 کارت بعدی در صورتی که کاربر به اسکرول کردن به پایین ادامه دهد."
  • "ما دوست داریم از HTTP/2 استفاده کنیم، اما اکثر مشتریان ما از IE11 استفاده می کنند! بنابراین، ما در حال بررسی اشتراک گذاری دامنه / بارگیری درخواست های داده AJAX JSON از دامنه دیگری هستیم."

سایز بندی

  • "با عرض پوزش برای intrinsicsize، استفاده از ارتفاع/عرض به نظر من بهتر است."
  • "به دنبال راهی برای تولید اندازه های کمتر، در حال حاضر ~12 است."
  • تغییر اندازه پویا تصاویر بدون JS واقعا سخت و غیرممکن است.
  • "ابزاری مانند responsivebreakpoints.com برای web.dev خوب است :)."

تصاویر با کیفیت و وضوح بالا

  • "چگونه تصاویر فشرده را بدون از دست دادن کیفیت DPI دانلود کنیم؟"
  • "ما یک شرکت مدیریت اسناد هستیم. برنامه‌های ما میلیون‌ها تصویر اسکن شده با وضوح بالا، معمولا TIFF یا PDF را مدیریت می‌کنند."
  • "این یک دردسر است. فایل‌های img با وضوح بالا برای قالب چاپ ضروری هستند؛ باید برای وب بهینه شوند. کوچک کردن تصاویر برای وب دردسرساز است، اما اگر نویسندگان فقط فایل‌های سبک وزن را برای تصاویری که برای چاپ چاپ شده‌اند تهیه کنند، یک مانع نمایشی است. ما پیام‌های ترکیبی درباره الزامات ارسال دست‌نوشته‌ها را با آن آثار هنری تکمیل می‌کنیم، سپس با آن آثار هنری پیچیده می‌کنیم."

قابلیت مرورگر

  • "برش پاسخگو خودکار src از مرورگر به عنوان ویژگی [توکار] بسیار مفید خواهد بود زیرا برش همه تصاویر به 4 اندازه و نوشتن تمام نشانه گذاری ها زمان بر است. اگر بتوانیم یک عکس بزرگ را آپلود کنیم و یک برچسب تصویر ساده بنویسیم، مرورگرها به طور خودکار چندین ویژگی src را ایجاد می کنند که یک ویژگی برنده خواهد بود."
  • وقتی تصویر با توسط CSS برای تصاویر واکنش‌گرا (حداکثر عرض: 100%؛ ارتفاع خودکار یا ارتفاع: عرض: 100%؛ ارتفاع خودکار) تنظیم می‌شود، به‌خصوص در ترکیب با جهت هنری از تگ‌های تطبیقی/تصویر، به‌خصوص در ترکیب با جهت هنری از تگ‌های تطبیقی/تصویر، برای جلوگیری از جریان مجدد صفحه مشکل دارم. پشتیبانی بهتر از مرورگر/ مدیریت تصویر پاسخگو واقعاً کمک بزرگی خواهد بود.
  • "لطفا با واکشی اولین فریم "پخش خودکار" GIF را غیرفعال کنید."

CDN ها و خدمات تصویر

  • گوگل باید یک CDN رایگان مانند Cloudflare ارائه دهد.
  • "شاید ابزار بیشتر برای تنظیم مقیاس پویا و CDN با ارائه دهندگان مختلف خوب باشد."
  • یک تصویر بیش از حد فشرده یک راه حل بسیار مناسب و بدون هزینه تولید اضافی است. شما به تصاویری با پهنای حدود 1000 پیکسل برای موبایل نیاز دارید (عرض رندر 500 پیکسل) و این نیز اندازه ای است که برای نمایشگرهای غیر شبکیه بزرگ/رومیزی نیاز دارید. من فکر می کنم CDN های تغییر اندازه تصاویر راه حل بسیار بدی هستند، اگرچه من در گذشته از آن استفاده می کردم، اما در گذشته از آن استفاده کردم. راه حل یک سازش خوب است (در حال حاضر).
  • "CloudFlare تصاویر ما را به‌طور خودکار مقیاس‌بندی می‌کند تا به بهترین شکل با نمایشگر کاربر مطابقت داشته باشد. بنابراین می‌توانیم در زمان بارگذاری صرفه‌جویی کنیم زیرا تصاویر نسبت به نمایشگر کاربر بارگذاری می‌شوند. به عنوان مثال، اگر کاربر روی گوشی باشد، در پس‌زمینه‌ای به اندازه دسکتاپ بارگیری نمی‌شود."
  • "Cloudflare این کار را در پس‌زمینه انجام می‌دهد، بدون اینکه ما کاری انجام دهیم به جز علامت زدن کادری در پانل تنظیمات ما."
  • "فقط برای تکرار، تنها دلیلی که می توانم با موفقیت از srcset و غیره استفاده کنم به دلیل سهولت کلودیناری است. اما کلودینری گران می شود، واقعاً سریع. این به نظر یک حفره بزرگ در تجربه توسعه است."
  • ما به راهی برای برش خودکار تصاویر به روشی هوشمند نیاز داریم تا بتوانند با نسبت‌های مختلف در زمینه‌های مختلف کار کنند.»
  • من همچنین از تصاویر ارائه‌دهندگان دیگر مانند Unsplash استفاده می‌کنم که در آن کنترل وضوح، کیفیت و فشرده‌سازی بسیار کمتر است.

CMS، پلتفرم و چارچوب

  • زمانی که در حال ساختن سایتی با استفاده از CMS هستم، هنوز در تلاشم تا بفهمم بهترین راه برای استفاده از تصاویر چیست. نویسندگان تمایل دارند تصاویر را با ابعاد مختلف پیکربندی کنند و انتظار دارند که تصاویر کوچک یا بزرگ نشوند. مطمئن نیستم که تنظیم حداکثر عرض یا حداکثر ارتفاع روی تصاویر درست است یا خیر.
  • "از gatsby-image برای چند پروژه اخیر استفاده کرده ام و هرگز به گذشته نگاه نکرده ام."
  • "تصاویر اغلب بخش سختی هستند که توسط کاربر نهایی در CMS قرار می گیرند، ممکن است از هر اندازه، فرمتی استفاده کنند، گاهی اوقات تصویر اصلی با فرمت تصویر ایده آل و ابعاد موجود نیست."
  • "نگهداری تصاویر دشوار است، زیرا سیستم ما به صورت خودکار است، افزودن کنترل‌ها دشوار است، مگر اینکه همه چیز به طور خودکار و بدون تاثیر بر وضوح اتفاق بیفتد. همچنین برای ما تصاویر در تلفن همراه و دسکتاپ درست به نظر نمی‌رسند."
  • "من به مردم کمک می کنم تا سایت های خود را (وردپرس) بهینه کنند. بزرگترین مشکلاتی که برای تصاویر دیده ام این است: نیاز به وابستگی به CDN یا افزونه ها برای ایجاد WebP. srcset/picture باید به درستی توسط توسعه دهندگان تم کدگذاری شود. بیشتر افزونه های بارگذاری تنبل به آهستگی بارگیری می شوند و UX بدی دارند. بارگذاری تصاویر پس زمینه سخت است."

هزینه/فایده

  • شیوه های جدید موثر هستند اما زمان توسعه سایت ها را افزایش می دهند.
  • "عدم پایبندی به استانداردهای جدید مانند srcset و WebP توسط بسیاری از شرکت های Fortune 500 به کندی پذیرفته شده است. با مشاهده این موضوع، بسیاری از شرکت ها در برابر تغییر به عنوان هزینه توسعه غیرضروری برای وب سایت های فعلی مقاومت کردند. دستاوردهای عملکرد به طور گسترده توسط کاربر نهایی (UX) مورد بحث یا گزارش قرار نمی گیرد. در غیر این صورت، ذخیره تصویر از وب تا حدودی سخت تر می شود."
  • "پرهزینه برای ایجاد و مدیریت چندین اندازه، نسخه."
  • آنها فضای زیادی را در سرور ما اشغال می کنند.

سئو

  • "تعادل بین کیفیت تصویر قابل قبول و اندازه فایل دشوار است. از یک طرف، من می خواهم بارگذاری سریع را برای مزایای SEO داشته باشم، اما از طرف دیگر، تصاویر با کیفیت پایین باعث کاهش UI/UX می شوند."

نقش تصاویر در وب

  • تعداد زیادی در وب وجود دارد. استفاده از تصاویر بی فایده ای را که محتوای نوشته شده را بهبود نمی بخشد، متوقف کنید.
  • "آیا هنوز زمانی را به یاد دارید که وب تصاویر نداشت و ما سلفی ها را به عنوان هنر ASCII به اشتراک می گذاشتیم؟"

ابزار، راهنمایی، استانداردها و بهترین عملکرد: ناامیدی ها و درخواست ها

  • [یکی از شرکت کنندگان در پاسخ به این نظرسنجی یک پست وبلاگ نوشت]
  • "به نظر می رسد الزامات به طور مداوم تغییر می کنند. به عنوان یک توسعه دهنده وب، بسیار خسته کننده است زیرا در وهله اول ذخیره کردن تصاویر زمان بر است. ما تا جایی که می توانیم بهینه سازی می کنیم، سایت را بررسی می کنیم و سپس ماه ها بعد Google تصمیم گرفته است که تصاویر می توانند حتی فشرده تر شوند یا باید در قالب متفاوتی باشند. این ما را از ارائه بهترین راه حل ممکن برای مشتری خود باز می دارد که به سادگی برای آنها یک مشتری کوچک ایجاد می کند. ما بودجه لازم برای تثبیت تصاویر و ذخیره مجدد آنها را نداریم تا بتوانیم این کار را در بسته های مدیریتی آنها انجام دهیم.
  • "بله، فکر می‌کنم "تعداد درخواست‌ها را کم نگه دارید و اندازه فایل‌ها را کوچک نگه دارید" همه در Lighthouse اشتباه گرفته‌اید. اگر سایتی از طریق HTTP1.x ارائه می‌شود، مطمئن باشید، اما اگر سایتی از طریق HTTP2 ارائه می‌شود، تعداد درخواست‌ها اهمیت کمتری دارد یا حتی اگر از همان نام میزبان نشات می‌گیرد، مشکلی ایجاد نمی‌کند. HTTP2 در همان نام میزبان این موضوع را به عنوان یک مشکل "کم بودن تعداد درخواست ها و اندازه های فایل" علامت گذاری می کند، در حالی که به دلیل وجود HTTP2 در همان نام، مشکل وجود ندارد و بله، فایل ها از قبل کوچک هستند، اما باید حجم آن ها بیشتر از 1 کیلوبایت باشد گزارش «تعداد درخواست‌ها را کم و اندازه فایل‌ها را کوچک نگه دارید» در لایت‌هاوس به‌روزرسانی کنید تا HTTP2 روی همان نام میزبان در نظر گرفته شود.
  • این یک مبارزه برای مردم بوده است که به خاطر بسپارند تصاویر خود را فشرده کنند.
  • "رفتار مرورگر متقابل غیرقابل پیش بینی باقی می ماند، بنابراین ساده ترین راه حل ها اغلب ایمن ترین هستند."