عندما يقوم المستخدمون بزيارة موقعك فإنه متوقع أن أول ما ستبحث عنه عيونهم هو الصور، ومن ثم إذا أعجبهم الشكل العام للموقع والصور المعروضة، فإنهم سيتابعون قراءة المحتوى الباقي، والمتمثّل في النصوص المكتوبة، ويجب أن ترتبط الصور في الموقع بالمعلومات المهمة على الموقع، وإلا سيقوم المستخدمون بالمغادرة على الفور.
تخيّل أن يكون لديك موقع عبارة عن متجر أحذية، ويحتوي الموقع على صور جذابة عالية الجودة وبتصميم ممتاز للأحذية، فإن المستخدمون سيعلقون في الصنارة على الفور وقد يشترون الأحذية أيضًا أكثر مما يحتاجون.
صيغ الصور لا تقل أهمية عن الصور ذاتها
على الرغم من فهمنا الآن لأهمية الصور في الموقع، وأهمية الحصول على صور عالية الجودة وجذابة وذات صلة، إلا أن المعرفة لا تكفي طبعًا، فلكي يشاهد المستخدمون هذه الصور الرائعة فإنهم يريدون مشاهدتها بسرعة ولن يقوموا بالانتظار إن استغرق تحميلها وقتًا أطول من المعتاد، وإلا فسيغادرون على الفور.
لهذا يجب أن نختار الصيغة المناسبة لكل صورة. كما أن التحميل المناسب لكل صورة سيساعدك في مسألة ترتيب المحتوى الخاص بك على جوجل. إذ تمنح جوجل مرتبة أعلى للمواقع ذات الحجم الأخف، وهذا ما يفسر سبب معاناة المواقع التي لديها وقت تحميل أطول مع التصنيفات المنخفضة. يمكن أن تساعدك الصور المحسّنة (الصور ذات الحجم الأصغر والشكل المناسب) على موقعك في الحصول على المزيد من حركة المرور والمبيعات والتحويل.
أين تكمن المشكلة في اختيار صيغة صور غير مناسبة؟ صيغ ملفات الصور يمكن أن تتميز بإمكانيات إضافية كالشفافية وتخزين المعلومات حول العناصر المؤلفة منها... ومثل هذه الإمكانيات لا يمكن الاستفادة منها في موقعك ولكنها سوف تؤثر بشكل سلبي سواء على الصور نفسها أو وقت التحميل أو مظهر الموقع...
الفرق بين صيغ الصور المختلفة
GIF
GIF (Graphics Interchange Format) تم إصداره عام 1987. وكان آخر إصدار له في عام 1989. على الرغم من قدمه وعدم وجود تحسينات تقنية جادة بمرور الوقت، فقد أصبحت صور GIF أكثر شيوعًا اليوم من أي وقت مضى.
حيث تحظى ملفات GIF بشعبية خاصة على منصات الوسائط الاجتماعية، ويتم استخدام كل من GIF الثابتة والمتحركة لمشاركة صور الإيموجي. هناك أيضًا الكثير من برامج تحرير GIF المجانية المتاحة والتي تسّهل على الأشخاص العاديين إنشاء الإيموجي الخاصة بهم بسرعة ومشاركتها مع أصدقائهم ومتابعيهم.
ولكن على الرغم من أن صور GIF تحظى بشعبية كبيرة، إلا أنه يجب أن تكون حريصًا جدًا عند استخدامها. فإن لها عدد من المزايا سنذكر أهمها.
مزايا ملفات GIF
1 – ألوان محدودة
يمكن أن تعرض هذه الملفات 256 لونًا كحد أقصى. بالمقارنة مع باقي التنسيقات، يمكن أن تعرض PNG و JPEG ملايين الألوان، هذا يجعل صور GIF خيارًا مروعًا لعرض معظم الصور الفوتوغرافية. إذا أخطأت في تحويل صورة ما إلى ملف GIF (على سبيل المثال لتقليل حجم الملف)، فسيبدو موقعك غير لائق وعفا عليه الزمن.
2 – ضغط بدون فقدان جودة
يستخدم GIF هذا النوع من الضغط، مما يعني أنه يمكنك تقليل الدقة (وحجم الملف) دون الإضرار بالجودة المرئية. وتشترك في هذه الميزة مع PNG و SVG علمًا أن JPEG لا يحتوي على ضغط بدون فقدانٍ للجودة.
3 – حجم الملف الصغير
بالمقارنة مع JPG، وخاصة PNG، تكون ملفات GIF أصغر حجمًا بشكل عام، مما يجعلها مفيدة من حيث سرعة تحميل صفحة موقع الويب (الأداء).
4 – التحميل التدريجي
يمكنك إظهار نسخة منخفضة الجودة من صورتك أولاً، ثم جودة أعلى عندما يتم تحميل الصورة بالكامل على الصفحة. هذا عملي للأداء وتجربة المستخدم.
5 – يمكن أن تكون صور GIF متحركة
هذا هو السبب في أن صور GIF لا تزال شائعة، على الرغم من جودتها المرئية المنخفضة.
JPEG / JPG
غالبًا ما تتم كتابة JPEG (Joint Photographic Experts Group) بتنسيق JPG ، وهو تنسيق ضغط مع فقدان البيانات (الجودة)، تم إصداره لأول مرة في عام 1992. يستخدم JPEG بشكل شائع في تطبيقات الرسومات مثل Photoshop وهو التنسيق المعتمد في معظم الكاميرات الرقمية.
مزايا ملفات JPEG
1 – ملايين الألوان
على عكس ملفات GIF فإن JPEG تحتوي على ملايين الألوان، مما يجعلها أكثر ملاءمة للصور والرسومات من صور GIF.
2 – ضغط مع فقدان الجودة
وهذا يعني أن JPG يفقد الجودة عند ضغطه لتقليل حجم ملفه. يعتمد مقدار الجودة المفقودة على عدد لا يحصى من العوامل المتعلقة بنوع الصورة التي تضغطها.
3 – حجم أقل
حجم ملفات JPEG أصغر بكثير من نظيراتها في PNG وذلك عند مقارنة JPG و PNG بنفس الدقة.
4 – صورة ثابتة
JPEG هو تنسيق صورة ثابتة، مما يعني أنه على عكس ملفات GIF و SVG، لا يدعم الرسوم المتحركة.
ملاحظة مهمة
يجب فقط استخدام JPEG بدل PNG إذا كان حجم الملف الأصغر أكثر أهمية من جودة الصورة.
ومن الممكن أن تكون ملفات JPEG بدون فقدان جودة، حيث هناك تنسيق مختلف يسمى JPG-2000، ولكن لم يتم اعتماده على نطاق واسع، والغالبية العظمى من ملفات JPEG على الإنترنت بها فقدان جودة.
PNG
PNG اختصار إلى (Portable Network Graphics) هو تنسيق رسومات نقطية تم إصداره مبدئيًا في عام 1996. يدعم PNG الضغط بدون فقدان البيانات (الجودة) والشفافية وأكثر من 16 مليون لون. وهذا يجعل منه التنسيق الأفضل في حال كانت جودة الصورة عامل أساسي تحتاج للحفاظ عليه.
هناك نوعان من تنسيقات PNG هما PNG-8 و PNG-24، سنقوم بذكر مزايا كليهما.
مزايا PNG-8
1 – ألوان محدودة
يدعم PNG-8 نظام 256 لونًا فقط، وهو مشابه لملفات GIF. لكن PNG-8 يأتي بحجم ملف أصغر من ملفات GIF.
2 – الرسوم المتحركة
على عكس ملفات GIF، فإن PNG-8 لديها دعم ضعيف للرسوم المتحركة.
مزايا PNG-24
1 – ألوان غنية
يدعم PNG-24 أكثر من 16 مليون لون أي أن تنسيق PNG-24 يشبه صيغة JPEG فيما يتعلق بالألوان.
2 – أحجام ملفات أكبر
تنسيق PNG-24 أكبر بكثير من تنسيق JPEG.
ملاحظة مهمة
يدعم كل من PNG-8 و PNG-24 الشفافية، تمامًا كملفات GIF، ولكن بجودة أعلى من خلال ما يسمى "قناة ألفا"، مما يعني أنه (على عكس ملفات GIF) يمكن أن يكون لها شفافية حقيقية.
SVG
SVG اختصار إلى (Scalable Vector Graphics) هو تنسيق ملف فكتور، يعتمد على XML. يمكن استخدام SVG للرسومات الثابتة والرسوم المتحركة. تُستخدم صور SVG بشكل شائع بدلاً من صور JPEG و GIF و PNG للأيقونات والشعارات والرسوم المتحركة والرسومات الأخرى.
مزايا ملفات SVG
1 – قابلية التكبير
تعد SVGs (من الناحية النظرية) قابلة للتطوير بشكل لا نهائي. يمكنك جعلها كبيرة أو صغيرة كما تريد، دون المساومة على الجودة.
2 – حجم الملف
تكون صور SVG في المتوسط أصغر بكثير من GIF و JPEG و PNG، حتى في درجات الدقة العالية للغاية.
3 – الرسوم المتحركة
تمامًا مثل ملفات GIF، يدعم SVG الرسوم المتحركة، ولكن بمرونة أكبر وجودة أعلى بشكل لا يضاهى.
4 – قابل للبرمجة
يمكن معالجة SVGs مباشرة باستخدام HTML و CSS و JavaScript (على سبيل المثال للرسوم المتحركة).
5 – الرسومات فقط
SVG هو تنسيق فكتور. وعلى عكس PNG و JPEG و GIF، لا يمكن استخدامها للتصوير الفوتوغرافي.
WebP
WebP هو تنسيق صور حديث تم إصداره في البداية عام 2007 بواسطة Google. يمنحك WebP ضغطًا فائقًا للصور بدون فقدان الجودة، مقارنة بأي من التنسيقات الشائعة الأخرى.
مزايا WebP
1 – الضغط
يمكن ضغط WebP من خلال الضغط غير المنقوص والفقدان للجودة.
2 – حجم الملف
يمكن لـ WebP تقليل حجم ملفات JPEG بنسبة تصل إلى 34٪ وصور PNG بنسبة تصل إلى 45٪.
3 – متعدد الاستخدامات
يمكن استخدام WebP في كل من الرسومات والتصوير الفوتوغرافي.
من المفترض أنك الآن تعرفت على النوع الأفضل لموقعك على ووردبريس. فشاركنا تعليقك واختيارك.