الملاحظات والآراء من استطلاع تحسين الصور لصيف 2019

تعليقات من المشاركين في الاستطلاع حول الأساليب المختلفة لتحسين الصور

تسرد هذه المشاركة الملاحظات والآراء الحرة التي تلقّتها Google Web DevRel في استطلاع "تقنيات تحسين الصور" لصيف 2019. تم طلب الردود من خلال أساسيات الويب و@ChromiumDev. كان الدافع للمشاركة في الاستطلاع هو معرفة سبب عدم اتّباع معظم المواقع الإلكترونية لأفضل الممارسات المتعلّقة بتحسين الصور على الرغم من أنّها طريقة سهلة نسبيًا لتحسين الأداء. بيانات الاستجابة غير مدرجة هنا بسبب وجود عيوب في منهجية الاستبيان.

  • إذا كنت مطوّر برامج على الويب، قد تفيدك هذه المشاركة في التعرّف على أساليب جديدة لتحسين الصور، أو تفاصيل عن كيفية حلّ مطوّري برامج الويب الآخرين لمشكلة تواجهها، بالإضافة إلى تكاليف كل تقنية ومزاياها وقيودها.
  • إذا كنت أحد مزودي خدمة الصور أو شبكة توصيل المحتوى (CDN)، فقد تساعدك هذه المشاركة في العثور على فرص جديدة في السوق.
  • إذا كنت تمثّل إطار عمل أو أداة إنشاء أو مطوّر نظام إدارة محتوى، قد تقدّم لك هذه المشاركة أفكارًا حول ميزات جديدة يمكنك تطبيقها.

التعليقات

WebP

  • "أحب تنسيق WebP ولكنه ليس جاهزًا بعد. علاوة على ذلك، لا يتوافق WordPress مع تنسيق WebP. يُعدّ Photoshop أحد أكثر تطبيقات تعديل الصور رواجًا، إذ لا يتيح استخدام تنسيق WebP بشكل فوري. لذلك لا يمكننا الاعتماد على التطبيقات أو الخدمات التابعة لجهات خارجية لضغط الصور".
  • "إتاحة استخدام WebP على Safari"
  • "أرغب في استخدام WebP إذا كان بإمكاني تصديرها من Photoshop/Figma/Sketch وكانت جميع المتصفحات تدعمه". [ملاحظة: Sketch يدعم WebP]
  • "سيكون حل تنسيق الجيل التالي رائعًا".
  • "توقف عن الضغط بشدة باستخدام تنسيق WebP عندما يكون الدعم المتوافق مع المتصفّح ضعيفًا، وفكِّر في الحاجة إلى تنسيق PNG بدلاً من JPEG للحصول على لقطات الشاشة".
  • "لا يتيح تطبيق "مستندات Google" استخدام تنسيق 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 للصور فقط عندما أحتاج إلى خلفية شفافة".

العناصر النائبة للصور المنخفضة الجودة (LQIPs)

  • "نحن نستخدم LQIPS، وهو أسلوب رائع للحفاظ على تفاعُل الزوّار بدون تحميل صور عالية الجودة في وقت مبكر جدًا".

عروض أداء

  • "لقد واجهنا بالفعل مشكلة مؤخرًا في أداء الصور. وعندما ينتقل أحد المستخدمين إلى أسفل الموقع الإلكتروني، نعرض 60 بطاقة تالية تتضمن صورة مصغّرة. ونظرًا إلى أنّ عدد الاتصالات المسموح به هو 6 في النطاق نفسه، كان يتم حظر الصور المصغّرة بالإضافة إلى طلب AJAX التالي للحصول على البطاقات الـ 60 التالية في حال استمرار المستخدم في الانتقال للأسفل."
  • "نود استخدام HTTP/2 ولكن معظم عملائنا يستخدمون IE11! لذلك، نستكشف إمكانية تقسيم النطاق / تحميل طلبات بيانات AJAX JSON خارج نطاق مختلف".

مقاسات الشعار

  • "نعتذر عن intrinsicsize، الاستفادة من الارتفاع/العرض يبدو أفضل بالنسبة لي".
  • "جارٍ البحث عن طريقة لإنشاء أحجام أقل، يبلغ الآن 12 تقريبًا تقريبًا".
  • "تغيير حجم الصور الديناميكي هو إجراء صعب ومستحيل بدون JavaScript".
  • "أداة مثل responsivebreakpoints.com تناسب web.dev :)."

صور عالية الجودة وعالية الدقة

  • "كيف يمكن تنزيل الصور المضغوطة بدون فقدان جودة النقاط لكل بوصة؟"
  • "نحن شركة إدارة مستندات. تتعامل تطبيقاتنا مع الملايين من الصور الممسوحة ضوئيًا عالية الدقة، عادة ما تكون بتنسيق TIFF أو PDF".
  • "إنها إزعاج. تعد ملفات الصور عالية الدقة ضرورية لتنسيق الطباعة، ويجب أن تكون محسَّنة للاستخدام على الويب. يمكن أن تكون هناك صعوبات في تقليل حجم الصور لاستخدامها على الويب، إلا أنّه يمكن منعها إذا كان المؤلفون لا يقدّمون سوى ملفات خفيفة الحجم للصور الموجّهة إلى جهات النشر المطبوعة. انتهى بنا الأمر إلى تقديم رسائل مختلطة حول متطلبات إرسال المخطوطات التي تتضمّن أعمالاً فنية. وبعد ذلك، ننتهي من سير عمل معقّد لمعالجة هذه المواد".

إمكانيات المتصفح

  • "سيكون الاقتصاص التلقائي لـ src من المتصفح كميزة [مدمجة] مفيدًا جدًا حيث يستغرق اقتصاص جميع الصور إلى 4 أحجام وكتابة جميع العلامات. إذا تمكنا من تحميل صورة كبيرة وكتابة علامة صورة بسيطة، فستنشئ المتصفحات تلقائيًا سمات src متعددة ستمثل ميزة فائزة."
  • "على المستوى الشخصي، أواجه صعوبة في تجنُّب عمليات إعادة عرض الصفحة عند ضبط الصورة مع خدمة مقارنة الأسعار (CSS) للصور المتجاوبة مع مختلف الأجهزة (الحدّ الأقصى للعرض: 100%، أو الارتفاع التلقائي أو الارتفاع: العرض: 100%، الارتفاع التلقائي)، لا سيما عند استخدام اتجاه الفن من الصور القابلة للتكيف أو علامة الصورة. وتعد أفضل طريقة لتجنب حدوث ذلك هي استخدام "المساحة المتروكة السلبية" للحصول على نسبة ثابتة للصورة ثم وضع الصورة داخل مربع النسبة هذا. سيكون استخدام المتصفّح بشكل أفضل والتعامل مع الصور سريعة الاستجابة مفيدًا جدًا".
  • "يُرجى إيقاف ميزة "التشغيل التلقائي" لملف GIF من خلال جلب الإطار الأول فقط."

شبكات توصيل المحتوى (CDN) وخدمات الصور

  • "يجب أن توفّر Google شبكة توصيل محتوى (CDN) مجانية، مثل Cloudflare".
  • "ربما يكون من الجيد استخدام المزيد من الأدوات لإعداد التوسيع الديناميكي وشبكات توصيل المحتوى (CDN) مع مزوّدي خدمات مختلفين".
  • "تُعدّ الصورة الواحدة المضغوطة للغاية والمضغوطة حلاً ملائمًا للغاية بدون أي تكلفة إنتاج إضافية. تحتاج إلى حوالي 1000 بكسل للصور العريضة للأجهزة الجوّالة (بعرض العرض 500 بكسل)، وهذا هو الحجم الذي تحتاجه للشاشات الكبيرة أو المتوافقة مع أجهزة الكمبيوتر المكتبي والتي ليست ريتينا. أعتقد أنّ تغيير حجم شبكات توصيل المحتوى (CDN) للصور هو حل سيئ للغاية، على الرغم من أنني استخدمته سابقًا. يجب أن يتعامل نظام إدارة المحتوى مع تغيير الحجم، وبما أنّ إعداده معقّد للغاية، لا يشكّل حلّ واحد حلاً جيدًا (في الوقت الحالي)."
  • "تضبط CloudFlare صورنا تلقائيًا لتتناسب مع شاشة المستخدم على أفضل نحو. لذا يمكننا توفير وقت التحميل لأنه يتم تحميل الصور بالنسبة إلى شاشة المستخدم. على سبيل المثال، إذا كان المستخدم على هاتف، لن يتم تحميله في خلفية بحجم سطح المكتب".
  • "تنفّذ Cloudflare هذا الإجراء في الخلفية بدون الحاجة إلى اتخاذ أي إجراء باستثناء وضع علامة في مربّع في لوحة الإعدادات".
  • "للتأكيد فقط، السبب الوحيد الذي يجعلني أتمكّن من استخدام srcset وغير ذلك هو سهولة استخدام Cloudinary. إلا أنّ Cloudinary أصبح باهظ الثمن وسريعًا، ويبدو ذلك بمثابة فجوة كبيرة في تجربة التطوير".
  • "نحتاج إلى طريقة لاقتصاص الصور تلقائيًا بسهولة وبطريقة ذكية حتى تعمل بنِسب عرض إلى ارتفاع مختلفة في سياقات مختلفة".
  • "أستخدمُ أيضًا صورًا من موفّرين آخرين مثل Unspark حيث التحكّم بدرجة أقل في الدقة والجودة والضغط".

نظام إدارة المحتوى والنظام الأساسي وإطار العمل

  • "ما زلت أواجه صعوبة في معرفة أفضل طريقة لاستخدام الصور، عندما أقوم بإنشاء موقع إلكتروني باستخدام أحد أنظمة إدارة المحتوى. يميل المؤلفون إلى ضبط الصور بأبعاد مختلفة، ويتوقّعون عدم تصغير الصور أو تغيير حجمها. لست متأكدة مما إذا كان هناك ما يكفي من تعيين max-width أو max-height للصور".
  • "لقد كنت أستخدم gatsby-image للمشروعات القليلة الماضية ولم أنظر إلى الوراء أبدًا".
  • "غالبًا ما تكون الصور الجزء الصعب حيث يضعها المستخدم النهائي في نظام إدارة المحتوى، وقد تستخدم أي حجم أو تنسيق، وأحيانًا لا تتوفر الصورة الأصلية بالتنسيق المثالي للصورة والأبعاد المتاحة".
  • "من الصعب صيانة الصور لأنّ نظامنا يعتمد على الخدمة الذاتية لإضافة عناصر التحكّم، ما لم تحدث المشاكل تلقائيًا بدون التأثير في درجة الدقة. بالنسبة إلينا أيضًا، لا تبدو الصور صحيحةً في الأجهزة الجوّالة مقارنةً بأجهزة الكمبيوتر المكتبي".
  • "أنا أساعد الأشخاص على تحسين مواقعهم (WordPress). أكبر المشاكل التي واجهتها للصور هي: الحاجة إلى الاعتماد على شبكة توصيل للمحتوى (CDN) أو مكوّنات إضافية لإنشاء WebP. يجب ترميز srcset/picture بشكل صحيح من خلال مطوّري المظاهر. ويتم تحميل معظم المكوّنات الإضافية ذات التحميل الكسول، ما ينتج عنه تدخُّل في تجربة المستخدم. يصعب التحميل الكسول للصور الخلفية".

التكلفة/الفائدة

  • "الممارسات الجديدة فعالة ولكنها تزيد من وقت تطوير المواقع".
  • "لقد كان عدم الالتزام بالمعايير الجديدة مثل srcset وWebP إجراءً بطيئًا في العديد من شركات Fortune 500. ونتيجة لذلك، اعترضت العديد من الشركات على هذا التغيير باعتباره تكلفة تطوير غير ضرورية للمواقع الإلكترونية الحالية. لا تتم مناقشة المكاسب في الأداء على نطاق واسع أو الإبلاغ عنها من قِبل المستخدم النهائي (UX). إذا كان هناك أي شيء، فإنه يجعل من الصعب إلى حد ما حفظ الصور من الويب".
  • "هناك تكلفة مكلفة لإنشاء وإدارة أحجام وإصدارات متعددة".
  • "ف إنها تشغل مساحة كبيرة على خادمنا".

تحسين محركات البحث

  • "من الصعب الموازنة بين جودة الصورة المقبولة وحجم الملف. من ناحية، أريد تحميل سريع لميزة تحسين محركات البحث، ولكن من ناحية أخرى، ستؤدي الصور ذات الجودة الرديئة إلى تشتيت الانتباه عن واجهة المستخدم أو تجربة المستخدم".

دور الصور على الويب

  • "هناك عدد كبير جدًا من الفيديوهات على الويب. توقف عن استخدام الصور عديمة الفائدة التي لا تُحسن المحتوى المكتوب."
  • "هل ما زلت تتذكر الوقت الذي لم يكن فيه الويب يحتوي على صور وشاركنا الصور الذاتية بأسلوب ASCII آرت؟"

الأدوات والإرشادات والمعايير وأفضل الممارسات: الاستياءات والطلبات

  • [كتب أحد المشاركين مشاركة مدونة ردًا على هذا الاستطلاع]
  • "يبدو أن المتطلبات تتغير باستمرار. وبصفتك مطورًا على الويب، يكون الأمر محبطًا للغاية لأنه يستغرق وقتًا طويلاً في حفظ الصور في المقام الأول. نحن نعمل على تحسين أفضل ما لدينا، ونتحقق من الموقع، وبعد ذلك بعد أشهر، قررت Google أن الصور يمكن أن تكون أكثر ضغطًا أو يجب أن تكون بتنسيق مختلف. وهذا يمنعنا من تقديم أفضل حلّ ممكن لعملائنا، وبدلاً من ذلك يؤدي إلى مسعى مكلف لهم ولنا. لا يمتلك بعض عملاء الأنشطة التجارية الصغيرة الميزانية اللازمة لإصلاح الصور وإعادة حفظها للالتزام بالمتطلبات. ليس لدينا ميزانية للقيام بهذا العمل ضمن حزم الإدارة الخاصة بهم. كما تستغرق كتابة الرمز لاستدعاء أحجام صور مختلفة لأجهزة مختلفة وقتًا طويلاً. سيكون من الرائع التوصل إلى نظام لحفظ الصور يكون متسقًا لفترة زمنية أطول".
  • "نعم، أعتقد أنّك تلقّيت رسالة الخطأ "إبقاء عدد الطلبات منخفضًا وأحجام الملفات صغيرة" في Lighthouse. إذا كان الموقع الإلكتروني يعرض المحتوى عبر HTTP1.x، تأكَّد من ذلك، ولكن إذا كان الموقع الإلكتروني يعرض المحتوى عبر HTTP2، سيكون عدد الطلبات أقل أهمية أو قد لا تكون هناك مشكلة إذا كان مصدرها اسم المضيف نفسه. لديّ موقع إلكتروني بسيط، لكني أحمّل 30 ملفًا صغيرًا بتنسيق WebP يبلغ إجمالي عدد الطلبات 35 طلبًا تقريبًا، عبر HTTP2 على اسم المضيف نفسه. تُبلِغ أداة Lighthouse عن هذا الإجراء على أنّه مشكلة "إبقاء عدد الطلبات منخفضًا وأحجام الملفات صغيرة"، في حين أنّ هذه المشكلة فائقة السرعة وبسبب بروتوكول HTTP2 على اسم المضيف نفسه، ما مِن مشكلة في عدد الطلبات. وبالفعل، تكون الملفات صغيرة بالفعل (يتراوح تقريبًا حجمها بين 1 كيلوبايت و2 كيلوبايت أو أقل). يمكنني تحميل رمز متحرك ولكن بعد ذلك يلزم إجراء المزيد من حوسبة CSS. لذلك، يُرجى تعديل تقرير "إبقاء أعداد الطلبات منخفضة وأحجام الملفات صغيرة" في Lighthouse مع مراعاة بروتوكول HTTP2 على اسم المضيف نفسه".
  • "كان من الصعب على الأشخاص أن يتذكروا ضغط صورهم".
  • "لا يمكن توقّع السلوك الذي يظهر على مختلَف المتصفحات، لذلك غالبًا ما تكون أبسط الحلول هي الأكثر أمانًا".