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