السؤال الأول الذي يجب أن تطرحه على نفسك هو ما إذا كانت الصورة ضرورية في الواقع لتحقيق التأثير الذي تبحث عنه. إذا كان بإمكانك إزالة مصدر صورة، يتطلب ذلك غالبًا عددًا كبيرًا من وحدات البايت مقارنةً بتنسيقات HTML وCSS وJavaScript وغيرها من مواد العرض على الصفحة، فهذه هي دائمًا أفضل استراتيجية تحسين. ومع ذلك، يمكن أن تنقل الصورة المُرتّبة جيدًا أيضًا معلومات أكثر من ألف كلمة، لذلك عليك إيجاد هذا التوازن.
بعد ذلك، عليك التفكير في ما إذا كانت هناك تقنية بديلة يمكنها تحقيق نتائج أفضل، ولكن بطريقة أكثر فعالية:
- يمكن استخدام تأثيرات CSS (مثل الظلال أو التدرجات) والصور المتحرّكة في CSS لإنشاء مواد عرض مستقلة عن الدقة تبدو دائمًا حادة في كل درجة دقة ومستوى تكبير، غالبًا باستخدام جزء من عدد البايتات المطلوبة لملف الصورة.
- تتيح خطوط الويب استخدام خطوط نصية جميلة مع الحفاظ على إمكانية اختيار النص والبحث عنه وتغيير حجمه، ما يشكّل تحسُّنًا كبيرًا في سهولة الاستخدام.
إذا كنت بحاجة إلى ترميز نص في مادة عرض صورة، توقّف عن ذلك وراجِع الأمر. يُعدّ أسلوب الخط الرائع أمرًا بالغ الأهمية لجودة التصميم والعلامة التجارية وسهولة القراءة، ولكنّ النص المضمّن في الصور يقدّم تجربة سيئة للمستخدم: لا يمكن اختيار النص أو البحث عنه أو تكبيره أو الوصول إليه، كما أنّه غير ملائم للأجهزة ذات الكثافة العالية للنقاط. يتطلّب استخدام خطوط الويب مجموعة من التحسينات الخاصة بها، ولكنّها تعالج كل هذه المخاوف، وهي دائمًا خيار أفضل لعرض النص.
اختيار تنسيق الصورة المناسب
إذا كنت متأكدًا من أنّ الصورة هي الخيار الصحيح، عليك اختيار النوع المناسب بعناية.
- الرسومات المتجهّة: تستخدم خطوطًا ونقاطًا ومضلّعات لتمثيل صورة.
- تمثّل الرسومات المخصّصة للعرض على الشاشة الصورة من خلال ترميز القيم الفردية لكل بكسل ضمن شبكة مستطيلة.
ولكل تنسيق مجموعة من المزايا والعيوب. تُعدّ تنسيقات ملفات المتجهات مناسبة بشكل مثالي للصور التي تتألف من أشكال هندسية أقل تعقيدًا، مثل الشعارات أو النصوص أو الرموز. وتوفّر هذه الصور نتائج واضحة في كل إعدادات الدقة والتكبير/التصغير، ما يجعلها تنسيقًا مثاليًا للشاشات ومواد العرض العالية الدقة التي يجب عرضها بأحجام مختلفة.
ومع ذلك، لا تُحقّق تنسيقات الرسومات المتجهّة النتيجة المطلوبة عندما يكون المشهد معقّدًا (مثل صورة): قد يكون مقدار ترميز SVG لوصف جميع الأشكال مرتفعًا بشكلٍ كبير وقد لا تبدو النتيجة "واقعية". في هذه الحالة، يجب استخدام تنسيق صورة نقطية، مثل PNG أو JPEG أو WebP أو AVIF.
لا تتمتع الصور الممسوحة ضوئيًا بالخصائص الرائعة نفسها التي تجعلها مستقلة عن الدقة أو التكبير/التصغير، فعند تكبير صورة ممسوحة ضوئيًا، ستظهر لك رسومات خشنة ومموهة. نتيجةً لذلك، قد تحتاج إلى حفظ نُسخ متعددة من صورة نقطية بدرجات دقة مختلفة لتوفير تجربة مثالية للمستخدمين.
تأثير الشاشات العالية الدقة
هناك نوعان مختلفان من وحدات البكسل: وحدات البكسل في CSS ووحدات البكسل في الجهاز. قد يرتبط بكسل CSS واحد بكسل واحد على الجهاز مباشرةً، أو قد يكون مدعومًا بكسلات متعددة على الجهاز. ما هو الغرض من ذلك؟ كلما زاد عدد وحدات البكسل في الجهاز، زادت دقة المحتوى المعروض على الشاشة.
تُحقّق شاشات HiDPI نتائج رائعة، ولكن هناك مفاضلة واضحة: تتطلّب مواد عرض الصور المزيد من التفاصيل للاستفادة من عدد البكسل الأعلى في الجهاز. والخبر السارّ هو أنّ الصور المتجهّة مناسبة تمامًا لهذه المهمة، لأنّه يمكن عرضها بأي دقة مع تحقيق نتائج حادة، وقد تتحمل تكلفة معالجة أعلى لعرض التفاصيل الدقيقة، ولكنّ مادة العرض الأساسية هي نفسها ولا تعتمد على الدقة.
من ناحية أخرى، تشكل الصور المركّبة تحديًا أكبر بكثير لأنّها تُشفِّر بيانات الصور على أساس كل بكسل. وبالتالي، كلما زاد عدد وحدات البكسل، زاد حجم ملف الصورة المركّبة. راجِع الفرق بين مادة عرض الصورة المعروضة بدقة 100×100 بكسل (CSS):
| درجة دقة الشاشة | إجمالي عدد وحدات البكسل | حجم الملف غير المضغوط (4 بايت لكل بكسل) |
|---|---|---|
| 1x | 100 × 100 = 10,000 | 40,000 بايت |
| 2x | 100 x 100 x 4 = 40,000 | 160,000 بايت |
| 3x | 100 x 100 x 9 = 90,000 | 360,000 بايت |
عند مضاعفة درجة دقة الشاشة، يزداد إجمالي عدد وحدات البكسل بمقدار أربعة أضعاف: مضاعفة عدد وحدات البكسل الأفقية مضروبة في مضاعفة عدد وحدات البكسل الرأسية. وبالتالي، لا تؤدي الشاشة التي تبلغ دقتها "ضعف الدقة العادية" إلى مضاعفة عدد وحدات البكسل المطلوبة فحسب، بل تؤدي إلى تضخيم هذا العدد بمقدار أربعة أضعاف.
ما المقصود بذلك؟ تتيح لك الشاشات العالية الدقة عرض صور جميلة، ما قد يشكّل ميزة رائعة للمنتج. ومع ذلك، تتطلّب الشاشات العالية الدقة أيضًا صورًا عالية الدقة، لذلك:
- ننصحك باستخدام الصور المتّجهية كلما أمكن ذلك لأنّها لا تعتمد على الدقة وتحقّق نتائج واضحة دائمًا.
- إذا كانت الصورة المركّبة مطلوبة، يجب عرض صور متجاوبة.
ميزات تنسيقات الصور النقطية المختلفة
بالإضافة إلى خوارزميات الضغط بفقدان ود بدون فقدان مختلفة، تتيح تنسيقات الصور المختلفة ميزات مختلفة، مثل القنوات المتحركة والشفافة (ألفا). ونتيجةً لذلك، فإنّ اختيار "التنسيق المناسب" لصورة معيّنة يعتمد على النتائج المرئية المناسبة والمتطلبات الوظيفية.
| التنسيق | الشفافية | Animation | المتصفح |
|---|---|---|---|
| PNG | نعم | نعم (APNG) | الكل |
| JPEG | لا | لا | الكل |
| WebP | نعم | نعم | جميع المتصفحات الحديثة راجِع المقالة هل يمكنني استخدام؟ |
| AVIF | نعم | نعم | جميع المتصفحات الحديثة راجِع المقالة هل يمكنني استخدام؟ |
هناك نوعان من تنسيقات الصور المركّبة المتوافقة عالميًا: PNG وJPEG. بالإضافة إلى هذه التنسيقات، تتيح المتصفّحات الحديثة استخدام تنسيقَي الصور WebP وAVIF الأحدث. يقدّم كلا التنسيقَين الجديدَين ضغطًا أفضل بشكل عام وميزات إضافية. ما هو التنسيق الذي يجب استخدامه؟
سيوفّر WebP وAVIF بشكل عام ضغطًا أفضل من التنسيقات القديمة، ويجب استخدامهما كلما أمكن ذلك. يمكنك استخدام صور WebP أو AVIF مع صورة JPEG أو PNG كخيار احتياطي. اطّلِع على استخدام صور WebP للحصول على مزيد من التفاصيل.
في ما يتعلق بتنسيقات الصور القديمة، يُرجى مراعاة ما يلي:
- هل تحتاج إلى رسوم متحركة؟ استخدِم عناصر
<video>.- ماذا عن ملفات GIF؟ تقتصر لوحة ألوان ملفات GIF على 256 لونًا بحد أقصى،
وتؤدي إلى إنشاء ملفات أكبر حجمًا بكثير من عناصر
<video>. يقدّم تنسيق APNG ألوانًا أكثر من تنسيق GIF، ولكنه أيضًا أكبر بكثير من تنسيقات الفيديوهات التي توفّر جودة مرئية مماثلة بشكل معقول. اطّلِع على مقالة استبدال ملفات GIF المتحركة بفيديو.
- ماذا عن ملفات GIF؟ تقتصر لوحة ألوان ملفات GIF على 256 لونًا بحد أقصى،
وتؤدي إلى إنشاء ملفات أكبر حجمًا بكثير من عناصر
- هل تحتاج إلى الحفاظ على التفاصيل الدقيقة بأعلى درجة دقة؟ استخدِم ملف بتنسيق PNG أو WebP بدون فقدان الجودة.
- لا تطبّق ملفات PNG أي خوارزميات ضغط ذات فقدان للبيانات باستثناء اختيار حجم لوحة الألوان. ونتيجةً لذلك، سيتم إنشاء صورة بأعلى جودة، ولكن بتكلفة حجم ملف أعلى بكثير من التنسيقات الأخرى. استخدِم هذه الميزة بحكمة.
- يتضمّن تنسيق WebP وضع ترميز بدون فقدان للمعلومات قد يكون أكثر فعالية من تنسيق PNG.
- إذا كانت مادة عرض الصورة تتضمّن صورًا تتألف من أشكال هندسية، ننصحك بتحويلها إلى تنسيق رسومات متجّهة (SVG).
- إذا كانت مادة عرض الصورة تحتوي على نص، يجب التوقف عن استخدامها وإعادة النظر فيها. لا يمكن اختيار النص في الصور أو البحث عنه أو تكبيره. إذا كنت بحاجة إلى إبراز مظهر مخصّص (لأسباب تتعلّق بالعلامة التجارية أو لأسباب أخرى)، استخدِم خط ويب بدلاً من ذلك.
- هل يتم تحسين صورة أو لقطة شاشة أو مادة عرض صورة مشابهة؟ استخدِم تنسيق JPEG أو WebP بفقدان البيانات أو AVIF.
- يستخدم تنسيق JPEG مجموعة من تقنيات التحسين ذات الخسارة وبدون خسارة لتقليل حجم ملف مادة عرض الصورة. جرِّب عدة مستويات من جودة ملفات JPEG للعثور على أفضل جودة مقابل حجم ملف مادة العرض.
- إنّ تنسيق WebP مع فقدان بعض التفاصيل أو تنسيق AVIF مع فقدان بعض التفاصيل هما بديلان رائعان لتنسيق JPEG للصور بجودة الويب، ولكن يُرجى العِلم أنّ الوضع "مع فقدان بعض التفاصيل" يتخلّص من بعض المعلومات للحصول على صور أصغر حجمًا. وهذا يعني أنّ بعض الألوان قد لا تكون مطابقة للألوان في ملف JPEG مكافئ.
أخيرًا، يُرجى العِلم أنّه إذا كنت تستخدم WebView لعرض المحتوى في تطبيقك المخصّص للمنصة، يمكنك التحكّم بشكل كامل في العميل واستخدام WebP حصريًا. يستخدم Facebook والعديد من المواقع الأخرى تنسيق WebP لعرض جميع صورها في تطبيقاتها، ويستحقّ توفير المساحة هذه الخطوة.
التأثير في مقياس "سرعة عرض أكبر محتوى مرئي" (LCP)
قد تكون الصور مرشحة للاستخدام في "المحتوى القابل للاستخدام في الواقع الافتراضي". وهذا يعني أنّ حجم الصورة يؤثر في مدّة تحميلها. عندما تكون الصورة مرشحة لتكون عنصر LCP، يكون ترميز هذه الصورة بكفاءة أمرًا بالغ الأهمية لتحسين مقياس LCP.
يجب أن تسعى جاهدًا إلى تطبيق النصائح الواردة في هذا الدليل لكي يكون الأداء الإدراكي للصفحة أسرع ما يمكن لجميع المستخدمين. يُعدّ مقياس LCP جزءًا من الأداء الحسي، إذ يقيس سرعة عرض أكبر عنصر (وبالتالي الأكثر وضوحًا) على الصفحة.