تعليقات من المشاركين في الاستطلاع حول أساليب تحسين الصور المختلفة
Sam Dutton
تسرد هذه المشاركة الملاحظات الحرة التي تلقّتها 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".
التحميل الكسول
- "يُرجى مراعاة المستخدم عند التفكير في ميزات مثل "التحميل البطيء"، لأنّها تكون مزعجة للكثيرين".
- "عليك جعل سمة التحميل البطيء تعمل مع background-image."
- "من المفترض أن تعالج الإطارات الأساسية مواد العرض بشكل أفضل بشكل تلقائي".
- "لقد توقفنا عن استخدام ميزة "التحميل البطيء" منذ وقت طويل. يُبلغ المستخدمون عن "تعذُّر تحميل" ملايين الصور والمواقع الإلكترونية. هذا ما لخّصه فريقنا. من الصعب على المستخدمين غير التقنيين وصف المشاكل".
- "أريد أن أتمكّن من فهم استخدام Intersection Observer API للتحميل المُتأخر بدلاً من استخدام الأساليب التقليدية".
- "هذه الطريقة مناسبة لي: pwafire.org/developer/codelabs/progressive-loading".
صور الخلفية
- "أحمّل عادةً الصور كخلفيات في CSS".
- "تتسبّب علامة
<img>في مشاكل ويصعب التحكّم في التفاصيل الدقيقة المتعلّقة بها، خاصةً في المحتوى الذي يرسله المستخدمون. نحن نستخدم<div>وتنسيق background-image بشكلٍ متكرّر أكثر لأنّه يسمح لنا باستخدام background-size وbackground-position ومنع حفظ الصورة بالنقر بزر الماوس الأيمن".
الشفافية
- "لقد وصلنا إلى عام 2019. كيف لا تزال ملفات JPG لا تتضمّن شفافية ألفا؟"
- "لا أستخدم ملفات PNG للصور إلا عندما أحتاج إلى خلفية شفافة".
العناصر النائبة للصور المنخفضة الجودة (LQIP)
- "نحن نستخدم ميزة LQIPS، وهي تقنية رائعة للحفاظ على تفاعل الزوّار بدون تحميل صور عالية الجودة في وقت مبكر جدًا".
الأداء
- "لقد واجهنا مؤخرًا مشكلة في الأداء المتعلّقة بالصور. عندما ينتقل المستخدم للأسفل على موقعنا الإلكتروني، نعرض البطاقات الستين التالية التي تتضمّن صورة مصغّرة. بسبب الحد الأقصى لعدد عمليات الربط التي تبلغ 6 عمليات على النطاق نفسه، كان يتم حظر الصور المصغّرة بالإضافة إلى طلب AJAX التالي للحصول على البطاقات الـ 60 التالية إذا واصل المستخدم الانتقال للأسفل".
- "نود استخدام HTTP/2، ولكن معظم عملائنا يستخدمون IE11. لذلك، نحن نستكشف تقسيم النطاقات / تحميل طلبات بيانات AJAX JSON من نطاق مختلف".
مقاسات الشعار
- "نعتذر عن استخدام intrinsicsize، ولكن يبدو أنّ استخدام الارتفاع/العرض أفضل بالنسبة إلينا".
- "أبحث عن طريقة لإنشاء عدد أقل من الأحجام، ففي الوقت الحالي هناك 12 حجمًا تقريبًا".
- "إنّ تغيير حجم الصور ديناميكيًا أمر صعب جدًا ومستحيل بدون JavaScript".
- "إنّ أداة مثل responsivebreakpoints.com مناسبة لخدمة web.dev :)".
صور عالية الجودة والدقة
- "كيف يمكن تنزيل صور مضغوطة بدون فقدان جودة نقطة لكل بوصة؟"
- "نحن شركة لإدارة المستندات. تعالج تطبيقاتنا ملايين الصور الممسوحة ضوئيًا بدقة عالية، وعادةً ما تكون بتنسيق TIFF أو PDF".
- "إنّه أمر مزعج. يجب أن تكون ملفات الصور العالية الدقة ضرورية لتنسيق الطباعة، ويجب تحسينها للويب. إنّ تصغير حجم الصور للويب أمر مزعج، ولكنّه يشكّل عائقًا في حال قدّم المؤلفون ملفات خفيفة الوزن فقط للصور المخصّصة للنشر المطبوع. نرسل رسائل متضاربة بشأن متطلبات إرسال المخطوطات مع الأعمال الفنية. وننتهي بعد ذلك بعمليات سير عمل معقّدة لمعالجة هذه المواد".
إمكانات المتصفّح
- "إنّ ميزة اقتصاص src المتجاوبة تلقائيًا من المتصفّح كميزة [مضمّنة] ستكون مفيدة جدًا لأنّ اقتصاص جميع الصور إلى 4 أحجام وكتابة كلّ العلامات يستغرق وقتًا طويلاً. إذا كان بإمكاننا تحميل صورة كبيرة واحدة وكتابة علامة صورة بسيطة، ستنشئ المتصفّحات تلقائيًا سمات src المتعدّدة التي ستكون ميزة رائعة".
- "أجد صعوبة في تجنُّب إعادة تدفق الصفحة عندما يتم ضبط سمة image with باستخدام CSS للصور المتوافقة مع الأجهزة الجوّالة (max-width: 100%; height auto أو height: width: 100%; height auto)، خاصةً عند استخدام اتجاه الفن من الصور التكيُّفية/علامة الصورة. يبدو أنّ أفضل طريقة لتجنُّب ذلك هي استخدام "خدعة الحشو السلبي" لنسبة صورة ثابتة ثم وضع الصورة داخل مربّع هذه النسبة. سيكون من المفيد جدًا تحسين توافق المتصفّح أو معالجة الصور المتجاوبة".
- "يُرجى إيقاف ميزة "التشغيل التلقائي" لملف GIF من خلال جلب اللقطة الأولى فقط".
خدمات CDN وخدمات الصور
- "يجب أن توفّر Google شبكة عرض محتوى (CDN) مجانية مثل Cloudflare".
- "ربما يكون من الجيد توفير المزيد من الأدوات لإعداد ميزة "التحجيم الديناميكي" وشبكات توصيل المحتوى (CDN) مع مزوّدين مختلفين".
- "إنّ استخدام صورة واحدة كبيرة الحجم ومضغوطة بشكل مفرط هو حلّ جيد جدًا بدون أي تكلفة إضافية لإنتاج المحتوى. تحتاج إلى صور بعرض 1,000 بكسل تقريبًا للأجهزة الجوّالة (عرض العرض 500 بكسل)، وهذا هو الحجم الذي تحتاجه أيضًا للشاشات الكبيرة/الشاشات غير المزوّدة بتكنولوجيا Retina للأجهزة المكتبية. أعتقد أنّ شبكات توصيل المحتوى التي تُغيّر حجم الصور هي حلّ سيئ جدًا، على الرغم من أنّني استخدمتها في السابق. من المفترض أن يتعامل نظام إدارة المحتوى مع عملية تغيير الحجم، ولكن إذا كان ذلك معقدًا للغاية، يمكن استخدام حل واحد كحل وسط جيد (في الوقت الحالي)."
- "تُكيّف CloudFlare صورنا تلقائيًا لتتلاءم بشكل أفضل مع شاشة المستخدم. وبالتالي، يمكننا تقليل وقت التحميل لأنّه يتم تحميل الصور استنادًا إلى شاشة المستخدم. على سبيل المثال، إذا كان المستخدم يستخدم هاتفًا، لن يتم تحميله في خلفية بحجم كمبيوتر مكتبي".
- "تُجري Cloudflare ذلك في الخلفية بدون الحاجة إلى اتخاذ أي إجراء سوى وضع علامة في مربّع في لوحة الإعدادات".
- "أريد التأكيد على أنّ السبب الوحيد الذي يتيح لي استخدام srcset وغيرها من العناصر بنجاح هو سهولة استخدام Cloudinary. ولكن يصبح استخدام Cloudinary حقًا باهظًا بسرعة. ويبدو أنّ هذا يشكّل ثغرة كبيرة في تجربة التطوير".
- "نحتاج إلى طريقة لاقتصاص الصور تلقائيًا بسهولة وبطريقة ذكية حتى يمكن استخدامها مع نسب عرض إلى ارتفاع مختلفة في سياقات مختلفة".
- "أستخدم أيضًا صورًا من مقدّمي خدمات آخرين مثل Unsplash حيث لا يمكن التحكّم كثيرًا في الدقة والجودة والضغط".
نظام إدارة المحتوى والنظام الأساسي والإطار العمل
- "ما زلت أواجه صعوبة في معرفة أفضل طريقة لاستخدام الصور عند إنشاء موقع إلكتروني باستخدام نظام إدارة محتوى. يميل المؤلفون إلى ضبط الصور بأبعاد مختلفة ويتوقعون ألا يتم تصغيرها أو تكبيرها. لست متأكّدًا مما إذا كان من المقبول ضبط max-width أو max-height على الصور".
- "لقد كنت أستخدم gatsby-image في المشاريع القليلة الماضية ولم أتوقف عن استخدامه".
- "غالبًا ما تكون الصور هي الجزء الصعب لأنّ المستخدم النهائي هو من يضع الصور في نظام إدارة المحتوى (CMS)، وقد يستخدم أي حجم أو تنسيق، وفي بعض الأحيان لا تتوفّر الصورة الأصلية بتنسيق الصورة المثالي والأبعاد."
- "من الصعب الحفاظ على الصور لأنّ نظامنا يعتمد على الخدمة الذاتية، لذا من الصعب إضافة عناصر التحكّم ما لم تحدث الأمور تلقائيًا بدون التأثير في درجة الدقة. بالنسبة إلينا أيضًا، لا تبدو الصور صحيحة في الأجهزة الجوّالة مقارنةً بأجهزة الكمبيوتر المكتبي".
- "أساعد المستخدمين في تحسين مواقعهم الإلكترونية (WordPress). أكبر المشاكل التي واجهتها في ما يتعلّق بالصور هي: الحاجة إلى الاعتماد على شبكة توصيل المحتوى (CDN) أو الإضافات لإنشاء WebP. يجب أن يُشفِّر مطوّرو المظاهر عنصرَي srcset/picture بشكلٍ صحيح. يتم تحميل معظم مكونات "التحميل الكسول" الإضافية ببطء، ما يؤدي إلى تقديم تجربة مستخدم سيئة. من الصعب تحميل صور الخلفية بأسلوب "التحميل الكسول".
التكلفة مقابل الفائدة
- "إنّ الممارسات الجديدة فعّالة، ولكنها تزيد من وقت تطوير المواقع الإلكترونية".
- "إنّ عدم الالتزام بالمعايير الجديدة، مثل srcset وWebP، أدى إلى بطء اعتماد العديد من شركات Fortune 500 لهذه المعايير. وبناءً على ذلك، رفضت العديد من الشركات هذا التغيير باعتباره تكلفة تطوير غير ضرورية للمواقع الإلكترونية الحالية. لا يناقش المستخدم النهائي (تجربة المستخدم) المكاسب في الأداء أو يُبلغ عنها على نطاق واسع. في الواقع، قد يؤدي ذلك إلى صعوبة حفظ الصور من الويب.
- "إنّ إنشاء وإدارة أحجام ونُسخ متعددة باهظ التكلفة".
- "إنّها تشغل مساحة كبيرة على خادمنا".
تحسين محركات البحث
- "من الصعب تحقيق التوازن بين جودة الصورة المقبولة وحجم الملف. من ناحية، أريد تحميلًا سريعًا للاستفادة من ميزة تحسين محركات البحث، ولكن من ناحية أخرى، ستؤدي الصور ذات الجودة المنخفضة إلى التأثير سلبًا في واجهة المستخدم/تجربة المستخدم".
دور الصور على الويب
- "هناك عدد كبير جدًا من المواقع على الويب. توقّف عن استخدام الصور غير المفيدة التي لا تُحسِّن المحتوى المكتوب".
- "هل تذكر الأيام التي لم تكن فيها شبكة الويب تتضمّن صورًا وكنا نشارك صور السيلفي كأعمال فنية بترميز ASCII؟"
الأدوات والإرشادات والمعايير وأفضل الممارسات: المشاكل والطلبات
- [كتب أحد المشاركين مشاركة مدونة ردًا على هذا الاستطلاع]
- "تتغيّر المتطلبات باستمرار. بصفتي مطوّر ويب، أجد هذا الأمر محبطًا للغاية لأنّه يستغرق وقتًا طويلاً لحفظ الصور في المقام الأول. نحن نُجري التحسين قدر الإمكان، ونتحقق من الموقع الإلكتروني، وبعد بضعة أشهر، تقرّر Google أنّه يمكن ضغط الصور أكثر أو أنّها يجب أن تكون بتنسيق مختلف. يمنع ذلك فريقنا من تقديم أفضل حلّ ممكن لعميلنا يدوم طويلاً، ويؤدي بدلاً من ذلك إلى إنشاء جهد ذي تكلفة عالية لكلا الطرفَين. لا يتوفّر لدى بعض عملاء الأنشطة التجارية الصغيرة ميزانية لمواصلة إصلاح الصور وإعادة حفظها للالتزام بالمتطلبات. لا تتوفّر لدينا الميزانية لتنفيذ هذا العمل ضمن حِزم الإدارة. إنّ كتابة الرمز البرمجي لاستدعاء أحجام صور مختلفة للأجهزة المختلفة تستغرق أيضًا وقتًا طويلاً. سيكون من الرائع ابتكار نظام لحفظ الصور بشكل متسق لفترة أطول".
- "نعم، أعتقد أنّك أخطأت في تقييم "الحفاظ على انخفاض عدد الطلبات وحجم الملفات الصغير" في Lighthouse. إذا كان الموقع الإلكتروني يعرض المحتوى من خلال HTTP1.x، نعم، ولكن إذا كان الموقع الإلكتروني يعرض المحتوى من خلال HTTP2، يكون عدد الطلبات أقل أهمية أو لا يشكّل مشكلة إذا كان مصدره هو اسم المضيف نفسه. لديّ موقع إلكتروني خفيف، ولكنّني أحمّل 30 ملفًا صغيرًا بتنسيق WebP تضمّ 35 طلبًا تقريبًا، وذلك عبر بروتوكول HTTP2 على اسم المضيف نفسه. يشير Lighthouse إلى ذلك على أنّه مشكلة "الحفاظ على انخفاض عدد الطلبات وحجم الملفات الصغيرة"، في حين أنّه سريع جدًا، ولا يشكّل عدد الطلبات مشكلة بسبب بروتوكول HTTP2 على اسم المضيف نفسه. نعم، الملفات صغيرة بالفعل (يتراوح حجم معظمها بين كيلوبايت واحد واثنين أو أقل). يمكنني تحميل صورة متحركة ولكن بعد ذلك يجب إجراء المزيد من عمليات الحساب في CSS. لذا يُرجى تعديل تقرير "الحفاظ على انخفاض عدد الطلبات ونقل الأحجام الصغيرة" في Lighthouse لمراعاة استخدام HTTP2 على اسم المضيف نفسه".
- "كان من الصعب على المستخدمين تذكُّر ضغط صورهم".
- "لا يمكن توقّع سلوك المتصفّحات المختلفة، لذا غالبًا ما تكون الحلول الأبسط هي الأكثر أمانًا".