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

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

سام دوتون

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

الجمهور

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

التعليقات

WebP

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

• "أحب تنسيق 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 Monitorer API بطريقة "التحميل الكسول" بدلاً من استخدام الأساليب التقليدية".
• "هذا مفيد بالنسبة لي: pwafire.org/developer/codelabs/progressive-loading".

صور الخلفية

• "أحمّل الصور عادةً كخلفيات في CSS".
• "تشكّل العلامة <img> مشكلة ويصعب التحكّم في التفاصيل الدقيقة حولها، لا سيّما مع المحتوى الذي يرسله المستخدمون. ونستند إلى نمط <div> ونمط صورة الخلفية بوتيرة أكبر لأنّ ذلك يتيح لنا استخدام حجم الخلفية وموضع الخلفية ومنع حفظ الصورة بالنقر بزر الماوس الأيمن.

الشفافية

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

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

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

عروض أداء

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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