WebP ، تنسيق الصورة لصفحات الويب الخاصة بـ Google

حول Webp

في المقالة التالية سوف نلقي نظرة على كيفية القيام بذلك تحويل الصور إلى تنسيق WebP. إذا كرست نفسك لإنشاء صفحات ويب ، فستعرف بالفعل أن أحد أفضل الممارسات لتحسين أداء موقع الويب الخاص بك هو استخدام الصور المضغوطة. في هذه المقالة ، سنرى كيفية استخدام تنسيق WebP. باستخدامه يمكننا إنشاء صور مضغوطة وعالية الجودة لاستخدامها على صفحات الويب الخاصة بنا.

WebP هو تنسيق صور جديد نسبيًا يوفر ضغطًا غير ضائع وفقدًا للصور على الويب بشكل استثنائي. كان هذا التنسيق صممه جوجل. لاستخدامه ، ستحتاج إلى تنزيل أدوات مساعدة مجمعة مسبقًا لـ Gnu / Linux و Windows و Mac OS X.

يعد WebP تنسيقًا جديدًا للصور يوفر ضغطًا بدون فقد أو فقدان لملفات PNG و JPEG. بهذا الشكل سنحقق حجم صورة يصل إلى 34٪ أصغر. إنه كذلك متوافق مع جوجل كروم وأوبرا. يمكننا استخدام Nginx و Apache لتحديد ما إذا كان هذا التنسيق مدعومًا من قبل عامل المتصفح ثم تقديم الصورة بتنسيق جديد بدلاً من الصورة الأصلية. يدعم تنسيق الملف هذا أيضًا الصور المتحركة ، مما قد يؤدي إلى انخفاض كبير في أحجام الصور.

باستخدام تنسيق WebP ، يمكن لمشرفي المواقع ومطوري الويب القيام بذلك إنشاء صور أصغر وأكثر ثراءً التي تجعل الويب أسرع.

قم بتثبيت أداة WebP على Ubuntu

لحسن الحظ ، حزمة webp هي موجودة في مستودعات Ubuntu الرسمية. يمكننا تثبيته باستخدام مدير حزم APT. سيتعين علينا فقط فتح محطة طرفية (Ctrl + Alt + T) والكتابة فيها:

sudo apt install webp

يمكننا أيضًا اختيار Ubuntu وتوزيعات Gnu / Linux الأخرى لـ قم بتنزيل حزمة webp من مستودع google. لهذا سوف نستخدم الأمر مجلد مشترك عن طريق فتح محطة طرفية (Ctrl + Alt + T) وكتابة:

wget -c https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.1-linux-x86-32.tar.gz

الشيء التالي الذي سنفعله هو استخراج الملف والانتقال إلى دليل الحزمة المستخرجة على النحو التالي:

tar -xvf libwebp-0.6.1-linux-x86-32.tar.gz
cd libwebp-0.6.1-linux-x86-32/
cd bin/
ls

أدوات webp

أدوات مدمجة

كما ترى من لقطة الشاشة أعلاه ، تحتوي الحزمة على مكتبة مجمعة مسبقًا (libwebp) لإضافة العديد من أدوات الويب المساعدة المدرجة أدناه:

  • anim_diff → إنها أداة لـ إظهار الفرق بين الصور المتحركة.
  • anim_dump → هذه أداة لـ تفريغ الفرق بين الصور المتحركة.
  • cwebp → إنها أداة لـ ترميز webp.
  • dwebp → هذه أداة لـ فك تشفير الويب.
  • gif2webp → أداة لـ تحويل صور GIF إلى webp.
  • img2webp → أدوات لـ تحويل تسلسل الصور إلى ملف ويب متحرك.
  • vwebp → هذا ملف عارض ملف webp.
  • webpinfo → تُستخدم هذه الأداة لعرض ملفات معلومات حول ملف صورة webp.
  • webpmux → واحد أداة مسك الغزال من webp.

سنكون قادرين على رؤية جميع الخيارات لأي من الأدوات السابقة من خلال تنفيذها دون أي حجة أو استخدام علم -longhelp. على سبيل المثال:

cwebp -longhelp

أخيرًا ، إذا أردنا تشغيل البرامج السابقة دون كتابة مساراتها المطلقة ، فسيتعين علينا فقط إضافة الدليل ~ / libwebp-0.6.1-linux-x86-32 / bin الينا متغير بيئة PATH في ملفنا ~ / .bashrc. للقيام بذلك سننفذ في المحطة (Ctrl + Alt + T):

vi ~/.bashrc

سنضيف في آخر الملف:

تضمين webp في bashrc

export PATH=$PATH:~/libwebp-0.6.1-linux-x86-32/bin

عند الانتهاء ، سيتعين علينا فقط حفظ الملف وإغلاقه. عند المغادرة سنفتح نافذة طرفية جديدة وسنكون قادرين على تنفيذ جميع برامج الويب مثل أي أمر آخر في النظام.

تحويل صورة إلى webp

يمكننا تحويل صورة إلى webp استخدم أداة cwebp. في ذلك المعلمة -q يحدد جودة الإخراج و -o يحدد ملف الإخراج. هذا مثال:

تم إنشاء الصورة باستخدام Webp

cwebp -q 80 ubunlog.jpeg -o ubunlog.webp

اعرض الصورة المحولة

عرض صور Webp

بمجرد الانتهاء من التحويل ، يمكننا ذلك عرض صورة webp باستخدام أداة vwebp. كما ترى في الالتقاط ، فإن نفس الصورة لها اختلافات معينة فيما يتعلق بالصورة بتنسيق jpeg.

vwebp ubunlog.webp

WebP هو مجرد واحد من العديد من المنتجات التي تنبع من جهود Google المستمرة لجعل الويب أسرع. إذا أردنا معرفة المزيد عن تنسيق الصورة هذا ، فيمكننا ذلك قم بزيارة موقع مشروع WebP.


محتوى المقال يلتزم بمبادئنا أخلاقيات التحرير. للإبلاغ عن خطأ انقر فوق هنا.

كن أول من يعلق

اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني.

*

*

  1. المسؤول عن البيانات: ميغيل أنخيل جاتون
  2. الغرض من البيانات: التحكم في الرسائل الاقتحامية ، وإدارة التعليقات.
  3. الشرعية: موافقتك
  4. توصيل البيانات: لن يتم إرسال البيانات إلى أطراف ثالثة إلا بموجب التزام قانوني.
  5. تخزين البيانات: قاعدة البيانات التي تستضيفها شركة Occentus Networks (الاتحاد الأوروبي)
  6. الحقوق: يمكنك في أي وقت تقييد معلوماتك واستعادتها وحذفها.

منطقي (صحيح)