تعد الصور من العناصر الأساسية التي تستخدمها جميع مواقع الويب، ولذلك فإن تحسينها من الأولويات لأصحاب المواقع لأجل تسريع الموقع الإلكتروني وجعل تجربة المستخدم أفضل، ذلك لأن الصورة المُحسَّنة تكون بنفس جودة الصورة الأصلية تقريبًا، لكن بحجم أصغر بكثير، وبالتالي لا يتطلب تحميلها وقتًا كما الوقت المطلوب لتحميل الصورة غير المحسنة.
ومن الخطوات التي يجب أن تقوم بها لتحسين صور موقعك هي التعرف على التنسيقات التي تمكنك من فعل ذلك، ومعرفة كيفية استخدامها، ولهذا سنشرح لك هنا تنسيق الصور WebP الجديد نسبيًّا والذي تم إنشاؤه خصيصًا للمساعدة على تصغير حجم الصور مع الحفاظ على جودتها، كما سنخبرك متى يجب أن تعتمد على هذه الصيغة
ما هى
WebP هو تنسيق للصور تم تطويره وإصداره بواسطة جوجل في عام 2010 من أجل السماح لأصحاب المواقع بتسريع صفحات مواقعهم عن طريق ضغط الصور مع الحفاظ على جودتها، إذ إن الصور تشكل حوالي 60%-65% من حجم صفحة الويب، وسيؤدي ضغطها إلى تقليل وقت تحميل الصفحة، وتوفير النطاق الترددي، والحفاظ على عمر البطارية، خاصة على الهواتف الذكية.
تم تحسين صيغة WebP مع الوقت، وأصبحت حاليًّا قادرة على توفير صور بحجم أصغر بنحو 30% بالمتوسط مما توفره PNG و JPEG بنفس الجودة المرئية، أي إذا كان لديك صورة بتنسيق PNG بحجم 100 كيلوبايت، فإنك تستطيع تصغير حجمها إلى 70 كيلوبايت بالمتوسط -مع الحفاظ على جودتها عالية- من خلال تحويلها إلى تنسيق WebP
تم تحسين صيغة WebP مع الوقت، وأصبحت حاليًّا قادرة على توفير صور بحجم أصغر بنحو 30% بالمتوسط مما توفره PNG و JPEG بنفس الجودة المرئية، أي إذا كان لديك صورة بتنسيق PNG بحجم 100 كيلوبايت، فإنك تستطيع تصغير حجمها إلى 70 كيلوبايت بالمتوسط -مع الحفاظ على جودتها عالية- من خلال تحويلها إلى تنسيق WebP.
وبالرغم من أن هذا التنسيق ليس مدعومًا في جميع متصفحات الويب، إلا أن معظم المتصفحات الشهيرة أصبحت تدعمه، بما في ذلك Google Chrome و Firefox و Opera و Microsoft Edge، ما يعني أنه ليس عليك أن تقلق بشأن عدم ظهور صور موقعك للزوار إذا استخدمته، لأن الغالبية العظمى من الزيارات تأتي عن طريق هذه المتصفحات، كما أن WebP مدعوم في أندرويد أيضًا.
مميزات وفوائد
بالإضافة إلى دعم تنسيق WebP كلا نوعي الضغط المستخدمَين في PNG و JPEG، هو يتميز بالكثير من الميزات الأخرى التي تجعله قادرًا على تقديم العديد من الفوائد المهمة عند استخدامه في موقع الويب، فمثلًا يدعم هذا التنسيق أيضًا الشفافية متعددة المستويات (Different levels of Transparency) والتحريك (Animation)، وهاتان ميزتان لا تجدهما عادة في تنسيق الصور نفسه، إذ تدعم صيغة PNG الشفافية متعددة المستويات لكنها لا تدعم التحريك، وتدعم صيغة GIF التحريك لكنها لا تدعم الشفافية متعددة المستويات.
ملحوظة: تدعم صيغة GIF الشفافية والتحريك، لكنها لا تدعم الشفافية متعددة المستويات (Different levels of Transparency) ما يعني أنه لا يمكنك جعل حواف الأشكال شفافة بشكل تدريجي بحيث تقوم بتحديد مدى شفافية كل بكسل، أي باختصار يمكن أن يكون جزء من الصورة في صيغتي PNG و WebP شفافًا أو غير شفاف أو ما بينهما (نصف شفاف على سبيل المثال)، بينما يكون جزء الصورة في صيغة GIF إما شفافًا أو ملونًا، ولا يمكن أن يكون نصف شفاف.
هذه الميزات والميزات الأخرى التي يتمتع بها تنسيق WebP جعلته قادرًا على توفير العديد من الفوائد عند استخدامه في موقع الويب، ومن أهمها:
- رفع أداء الموقع، حيث سيقلل حجم صور WebP الصغير نسبيًّا من الوقت اللازم لتحميل صفحات الويب، ويرفع سرعة الموقع الإلكتروني بشكل عام.
- توفير النطاق الترددي، وهذه فائدة أخرى تأتي بفضل صغر حجم ملفات الصور ذات التنسيق WebP، وتكون ملحوظة في المواقع التي تتضمن الكثير من الصور.
- رفع ترتيب صفحات الموقع في نتائج البحث، حيث ستجعل أوقات التحميل المنخفضة محركات البحث تفضل صفحاتك على صفحات المواقع البطيئة عند عرض نتائج البحث.
- يسمح بالاستغناء عن صيغ الصور الأخرى، إذ يمكنك بواسطة WebP عرض صور متحركة بنفس قدرات GIF، وذات خلفيات شفافة مثل PNG، وبضغط أفضل من JPEG
كيفية تحويل تنسيق صورة إلى WebP
أصبح بإمكانك اليوم تحويل الصور من الصيغ الأخرى إلى صيغة WebP بسهولة، إذ توجد العديد من الأدوات التي توفر إمكانية القيام بذلك على الإنترنت دون الحاجة إلى استخدام برامج، أو باستخدام برامج تعمل على أنظمة تشغيل الحاسوب، أو حتى باستخدام إضافة يتم تنصيبها على ووردبريس واستخدامها لضغط الصور وتحويلها إلى WebP، ونشرح فيما يلي بشكل عملي أهم الطرق التي تستطيع باتباعها تحويل الصور إلى تنسيق WebP.
يوفر لك تطبيق الويب مفتوح المصدر squoosh.app إمكانية ضغط الصور مجانًا عن طريق تحويلها إلى العديد من التنسيقات التي تمتاز بجودة عالية وحجم منخفض، كما تستطيع إجراء بعض التعديلات على الصورة أثناء ضغطها باستخدامه.
لاستخدام squoosh.app من خلال المتصفح لتحويل صورة إلى تنسيق WebP، توجه مباشرة إلى موقع التطبيق عبر النقر على هذا الرابط (squoosh.app). ستظهر لك صفحة تطبيق الويب التي يمكنك من خلالها رفع صورة مباشرة من أجل ضغطها.
بعد الذهاب إلى الرابط، قم برفع الصورة إلى الموقع من خلال سحب أيقونتها الموجودة على جهاز الكمبيوتر لديك وإفلاتها ضمن صفحة الويب، أو عبر نسخها إلى الحافظة (كصورة وليس كملف) ولصقها في الصفحة بالنقر على زر (Paste) أو على مفتاحي (Ctrl + v) من لوحة المفاتيح. كذلك يمكنك أن تقوم برفع صورة إلى الموقع عبر النقر على إشارة الزائد الموجودة أمام أيقونة الصورة واختيار ملف الصورة من خلال مربع اختيار الملف الذي يظهر لك
بعد سحب ملف الصورة وإفلاته في ضمن صفحة squoosh.app، أو بعد إدخال الصورة في الموقع بأي من الطرق الثلاث الموضحة سابقًا، سينقلك التطبيق مباشرة إلى صفحة تعديل الصورة وضغطها، وستكون الصفحة مكونة من قسمين، حيث سيعرض أحدهما الصورة الأصلية، وسيعرض الآخر الصورة بعد تطبيق الخصائص والتعديلات التي تحددها من القسم الموجود في أسفل يمين الشاشة عليها، كما سيكون بإمكانك سحب شريط تمرير للمقارنة بين نسختي الصورة الأصلية والمعدلة
يوفر squoosh.app إمكانية تحويل الصورة إلى تنسيق WebP بطريقة الضغط مع فقدان البيانات أو بطريقة الضغط بدون فقدان البيانات. ولتحويل الصورة إلى WebP، اختر التنسيق من القائمة المنسدلة التي توجد في قسم تحديد خصائص الصورة مباشرة تحت كلمة (Compress). سيظهر لك الموقع خيارات جديدة متوافقة مع التنسيق الذي اخترته، إذ ستظهر لك عدة خيارات عند اختيار التنسيق WebP أهمها خياري:
- Lossless: يكون عبارة عن صندوق اختيار، حيث يوجد بجانب كلمة (Lossless) مربع يمكنك وضع إشارة صح فيه، وهذا الخيار مخصص لتحديد طريقة الضغط (مع فقدان بيانات أو بدون فقدان بيانات)، فإذا لم تضع إشارة صح في المربع، فإن طريقة الضغط ستكون مع فقدان بيانات، وإذا وضعت ستكون طريقة الضغط بدون فقدان بيانات.
- Quality: يكون على شكل شريط يمكن من خلاله تحديد رقم ما بين 0 و 100، ويظهر هذا الخيار فقط إذا لم تضع إشارة صح بجانب كلمة (Lossless)، أي إذا اخترت أن تضغط بطريقة الضغط مع فقدان البيانات، وهو يحدد جودة الصورة بعد التعديل، فإذا اخترت رقمًا قريبًا من 100 ستكون جودة الصورة قريبة جدًا من جودة الصورة الأصلية، وإذا اخترت رقمًا منخفضًا قريبًا من الصفر، فستكون جودة الصورة منخفضة جدًا بالمقارنة مع الصورة الأصلية
