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

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

Sam Dutton

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

الجمهور

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

التعليقات

تنسيق WebP

ملاحظة: ما سبب أهمية ذلك؟ يمكن أن تؤدي تنسيقات الصور، مثل WebP، إلى ملفات أصغر حجمًا وجودة أفضل من التنسيقات القديمة، مثل JPEG وPNG. هناك عدة أساليب لاستخدام التنسيقات الحديثة مع توفير بديل للمتصفّحات القديمة.

• "أحبّ تنسيق WebP، لكنّه ليس جاهزًا بالكامل بعد. علاوةً على ذلك، لا يتوافق WordPress مع WebP. لا يتيح Photoshop، وهو أحد أشهر تطبيقات تعديل الصور، استخدام تنسيق WebP تلقائيًا. لذلك لا يمكننا الاعتماد على تطبيقات أو خدمات تابعة لجهات خارجية لضغط الصور".
• "إتاحة استخدام WebP على Safari"
• "أرغب في استخدام WebP إذا كان بإمكاني تصديرها من Photoshop/Figma/Sketch وكانت جميع المتصفحات تدعمها". [Note: Sketch does support 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> وتنسيق background-image بشكل أكبر لأنّه يتيح لنا استخدام background-size وbackground-position ومنع حفظ الصورة من خلال النقر بزر الماوس الأيمن".

الشفافية

• "نحن في عام 2019. كيف لا تزال ملفات JPG بدون شفافية ألفا؟"
• "أستخدم ملفات PNG للصور فقط عندما أحتاج إلى خلفية شفافة".

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

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

الأداء

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

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

ملاحظة: ما سبب أهمية ذلك؟ توفّر السمة srcset مصادر صور بديلة. يمكنك تحديد العرض أو كثافة البكسل ليتمكّن المتصفّح من اختيار أصغر صورة بدون الحاجة إلى تنزيل الصور لحساب الأبعاد.

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

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

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

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

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

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

ملاحظة: ما سبب أهمية ذلك؟ تسهّل خدمات الصور تحسين صورك. عادةً ما يتم تحميل نسخة واحدة عالية الدقة من كل صورة، ثم استخدام واجهة برمجة تطبيقات لخدمة ويب من أجل تحسين الصورة أو تحويلها حسب الحاجة. تعمل شبكات توصيل المحتوى (CDN) على تحسين توزيع الصور ومواد العرض الأخرى في الموقع الإلكتروني وتسليمها، وتوفّر أحيانًا خدمات تحسين، مثل عرض صور WebP تلقائيًا في المتصفّحات المتوافقة بدلاً من PNG أو JPEG، بدون تغيير امتداد الملف.

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

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

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

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

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

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

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

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

• "هناك الكثير من هذه التطبيقات على الويب. توقَّف عن استخدام صور غير مفيدة لا تحسّن المحتوى المكتوب".
• "هل ما زلت تتذكّر الوقت الذي لم تكن فيه صور على الويب وكنّا نشارك صور السيلفي كفن ASCII؟"

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

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