كيفية اختيار تنسيقات الصور لموقع ويب
يؤثر التنسيق في حجم الصورة ومظهرها والميزات التي تدعمها، لكن لا يوجد خيار واحد هو الأفضل لكل الصور. وتشكل سرعة التحميل جزءًا من تجربة الصفحة؛ تقول Google إن أنظمة الترتيب تستخدم مؤشرات Core Web Vitals، لكن نتيجة واحدة لا تضمن ترتيبًا مرتفعًا. قارن التنسيقات باستخدام ملفاتك وافحص النتيجة في المتصفحات والأجهزة التي يستخدمها جمهورك.
WebP: قارن الحجم والمظهر
يدعم WebP الضغط مع الفقدان وبدونه والشفافية والرسوم المتحركة. يمكن استخدامه للصور والرسوم والرسوم المتحركة على الويب، لكن النتيجة تختلف حسب الصورة وأداة الترميز والإعدادات. صدّر نسخة وقارن التفاصيل والشفافية والحجم بالأصل. تحقق أيضًا من دعم نظام النشر والجهات المستقبلة لـWebP.
JPEG: شائع للصور الفوتوغرافية
يشيع استخدام JPEG للصور الفوتوغرافية ويعتمد الضغط مع الفقدان. قد يؤدي خفض الجودة كثيرًا أو حفظ الملف مرات متكررة إلى ظهور آثار ضغط. ولا يخزن JPEG الشفافية. للشعارات أو النص الدقيق أو الحواف الواضحة، قارن PNG أو WebP دون فقدان أو SVG وفق المحتوى والتوافق المطلوب.
PNG: صور نقطية بلا فقدان
PNG تنسيق نقطي بلا فقدان ويدعم الشفافية. قد يناسب لقطات الشاشة والرسوم عند أهمية الحفاظ على البكسلات، لكن حجم الملف يعتمد على الصورة. قارن حجمه ومظهره بتنسيقات أخرى عند معالجة الصور الفوتوغرافية.
SVG: الرسوم المتجهة
يصف SVG الرسوم المتجهة بأشكال وتعليمات بدل شبكة ثابتة من البكسلات. وقد يناسب كثيرًا من الأيقونات والمخططات والرسوم التي تحتاج إلى تغيير الحجم. لكنه ليس بديلًا عامًا للصور الفوتوغرافية؛ راعِ التعقيد وحجم الملف وقواعد أمان النظام الذي يعرضه.
نقطة بداية عملية
للصور الفوتوغرافية، قارن JPEG أو WebP أو AVIF إذا كانت الوجهة تدعمها. للأيقونات المتجهة، فكّر في SVG. قد يناسب PNG أو WebP الشفافية، وقد يحافظ PNG أو تنسيق آخر بلا فقدان على الخطوط الدقيقة في لقطات الشاشة. هذه إرشادات أولية وليست قواعد عامة.
تهيئة الصورة قبل النشر
أنشئ نسخة بأبعاد مناسبة لمساحة العرض، واختر ضغطًا يلائم الاستخدام، وافحص النتيجة على شاشة فعلية. إذا قدمت بدائل، احتفظ بتنسيق متوافق مع زوارك. تساعد الأدلة المرتبطة على تقليل حجم الصور ومقارنة التنسيقات.
المصادر والمواصفات
تحدد المواصفات المستشهد بها إمكانات التنسيقات. تشرح Google دور تجربة الصفحة ضمن أنظمة الترتيب؛ ولا تضمن نتيجة واحدة ترتيبًا معينًا.
أدوات الصور وأدلتها
المواصفات ووثائق البحث
تحدد المواصفات إمكانات كل تنسيق. توضح Google دور تجربة الصفحة ضمن أنظمة الترتيب؛ ولا تضمن نتيجة واحدة ترتيبًا معينًا.
الأسئلة الشائعة
هل يكون WebP أصغر دائمًا من JPEG؟
لا. تعتمد النتيجة على الصورة الأصلية وأداة الترميز والإعدادات. قارن الملفات المصدّرة مع الحفاظ على جودة بصرية مقبولة.
ما الأبعاد التي ينبغي رفعها؟
اختر أبعادًا تناسب مساحة العرض، وقدّم نسخًا متجاوبة عند الحاجة. احتفظ بالأصل لاستخدامات أخرى.
هل تضمن نتيجة Core Web Vitals جيدة ترتيبًا مرتفعًا؟
لا. تستخدم أنظمة Google إشارات متعددة؛ ولا تضمن نتائج تجربة الصفحة الجيدة الظهور في المراتب الأولى.