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

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

Sam Dutton

این پست بازخورد رایگانی را که 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٪؛ ارتفاع خودکار) تنظیم می شود، به خصوص در ترکیب با جهت هنری، شخصاً برای اجتناب از جریان مجدد صفحه مشکل دارم. از تصاویر تطبیقی/برچسب تصویر. به نظر می رسد بهترین راه برای جلوگیری از استفاده از "هک padding منفی" برای یک نسبت تصویر ثابت و سپس قرار دادن تصویر در داخل این جعبه نسبت است. پشتیبانی بهتر مرورگر/ مدیریت تصویر پاسخگو واقعا کمک بزرگی خواهد بود!"
• "لطفا با واکشی اولین فریم "پخش خودکار" GIF را غیرفعال کنید."

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

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

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

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

سود

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

سئو

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

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

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

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

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