الدليل الكامل لاستخدام تنسيق صورة WebP

WebP ، أو وضوحا بشكل غير رسمي باسم weppy, عبارة عن تنسيق للصور تم تقديمه بواسطة مطوري Google قبل حوالي 5 سنوات. إذا كنت مصممًا على الويب أو مطورًا يسعى إلى تقليل حجم ملف صورتك وتحسينه ، فيجب على WebP أن يضع ابتسامة على وجهك.

باختصار ، إليك بعض الأشياء المهمة التي تحتاج إلى معرفتها حول تنسيق الصور هذا ليس جديدًا جدًا ولكنه لا يزال رائعًا:

• WebP يذهب من خلال امتداد الملف .webp.
• تتبنى WebP ضغطًا ضياعًا وخاسرًا.
• WebP الصور المفقودة يحتمل 25-34 ٪ أصغر من JPEG.
• WebP الصور ضياع يحتمل أصغر بنسبة 25٪ مقارنة بـ PNG.
• يدعم WebP الشفافية غير المفقودة ، أي PNG مع قناة ألفا.
• WebP يدعم الرسوم المتحركة. أي صور متحركة متحركة.

باختصار ، WebP قادر على تقليل حجم ملف صور JPEG و GIF و PNG بشكل كبير. فيما يلي معلومات تنشيطية على WebP يجب عليك التحقق منها قبل الدخول في الأشياء الممتعة.

تجربة

أفضل ما يتعلق بالمطالبات على الويب هو أنه يمكننا دائمًا إجراء تجارب للتحقق من الصدق والأصالة. إليك بعض التجارب التي قمت بها لمعرفة ذلك كيف يمكن لصورة صغيرة الحصول عليها بعد تحويلها من تنسيقات صور مختلفة (JPEG و PNG و GIF) إلى WebP.

1. JPEG - صورة ضائعة

إليك صورة JPEG عشوائية قمت بإمساكها من Pexels. حجم الملف الأصلي - 165kb. ↓

تم تحسين الصورة باستخدام JpegMini. حجم ملف جديد - 101KB. ↓

أخيرًا ، يتم تحويل نفس الصورة إلى تنسيق WebP. حجم الملف النهائي - 70KB. ↓

في ملحوظة جانبية: إليك الملفات المختلفة إذا تم تحويل نفس الصورة إلى التنسيقات التالية:

• GIF - 285kb
• بابوا نيو غينيا 8 - 241.2kb
• PNG 24 - 657.6kb

2. بابوا نيو غينيا - صورة ضياع

الآن ، دعونا نجرب مع PNG بشفافية. (مصدر). حجم الملف الأصلي - 587kb. ↓

ها هي الصورة الأمثل مع tinypng. حجم ملف جديد - 278kb. ↓

وأخيرًا ، تم تحويل الصورة إلى تنسيق WebP. حجم الملف النهائي - 112kb. ↓

3. GIF المتحركة

عند التحويل إلى WebP ، انتقلت صورة بتنسيق JPEG من 165 كيلو بايت إلى 70 كيلو بايت ، بينما انتقلت صورة PNG من 587 كيلو بايت إلى 112 كيلو بايت.

دعونا نرى كيف تسير صور GIF المتحركة:

• حجم الملف الأصلي - 6.8 ميجابايت
• WebP filesize - 6.3MB

ملخص:

فيما يلي جدول لتلخيص التجربة بالكامل:

	ضائع (JPG)	بلا خسائر (PNG)	الرسوم المتحركة GIF-
أصلي	165kb	587kb	6.8mb
الأمثل مع الأدوات	101KB	278kb	-
تنسيق WebP	70KB	112kb	6.3mb

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

تحويل إلى WebP مع أدوات

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

WebPonize إلى عن على ماك

ربما تكون WebPonize هي أبسط وأسرع طريقة لتحويل الصور إلى تنسيق WebP على جهاز Mac. كل ما عليك القيام به هو مجرد سحب وإفلات الصور الخاصة بك في WebPonize وسوف تفعل التحويل. سوف تتلقى ouput ، قبل حجم ، بعد حجم و ٪ من تخفيض الملف الأصلي. [تنزيل WebPonize]

Webpconv إلى عن على شبابيك

إذا كنت تقوم بتشغيل Windows ، فإن Webpconv هو التطبيق الذي يجب تثبيته. كما يأتي في نسخة محمولة حتى تتمكن من تشغيله بشكل مستقل على محرك أقراص فلاش. [تنزيل Webconv]

تحويل مع خطوط القيادة

إذا كنت تشعر بالعبقري غريب الأطوار ، فقد ترغب في استبعاد التحويل باستخدام أسطر الأوامر. cwebp يحول صور JPEG أو PNG أو TIFF إلى تنسيق WebP و dwebp يحولهم مرة أخرى إلى تنسيق PNG. دعونا نرى كيف يعمل هذا.

ملحوظة: الدليل التالي لنظام التشغيل Mac OS X. لمستخدمي Windows و Linux ، انقر هنا.

إعداد MacPorts على Mac OSX

أولاً ، تأكد من تثبيت Xcode ، ثم اتبع الخطوات التالية:

1. قم بتنزيل وتثبيت MacPorts. إذا كان لديك بالفعل MacPorts مثبتًا على جهاز Mac ، فانتقل إلى الخطوة 2.
2. إطلاق طرفية.
3. نوع "sudo ميناء selfupdate"ثم اضغط على enter. سيؤدي ذلك إلى تحديث MacPorts الخاص بك إلى أحدث إصدار.

   

4. بعد ذلك ، اكتب "sudo ميناء تثبيت الويب"وضرب دخول. هذا سوف يثبت libwebp (مكتبة WebP).

   

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

أوامر لتحويل / العودة

فيما يلي الأوامر إلى:

I - تحويل ملفات صور JPEG / PNG إلى تنسيق WebP

شكل: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

مثال:

cwebp -q 80 example.png -o example.webp 

II - ملفات صور WebP السرية مرة أخرى إلى PNG

شكل: dwebp [WebP_filename] -o [PNG_filename]

مثال:

dwebp image.webp -o image.png 

أكثر من: إذا كنت تفسر عملية التحويل من خلال وسائل أخرى ، فإليك تعليمات لاستخدام مهام Grunt و Gulp لتحويل ملفات JPG / PNG إلى WebP.

تحويل مع أدوات الإنترنت

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

• Online-converter.com
• Webp-convertor.com
• Zamzar

تلميح: إذا كنت جوجل تحويل webp على الانترنت , ربما ستجد المزيد من الخيارات.

فوتوشوب البرنامج المساعد

قد يسعدك أن تعرف أن هناك أيضًا مكون إضافي لـ Photoshop يسمح لك بحفظ الصور بتنسيق WebP عبر Photoshop. يدعم هذا البرنامج المساعد نظام التشغيل Mac OS X (CS 2- CS 6) ونظام Windows (32 بت و 64 بت). [قم بتنزيل المكون الإضافي هنا.]

ملحوظة: أعتقد أنك يجب أن تعرف أنني جربته على Photoshop CC. لم تعمل هناك.

دعم متصفح الويب

أخيرًا ، دعنا نتحدث عن التوافق. حاليًا ، يمكنك عرض صور بتنسيق WebP على المتصفحات التالية (المرجع):

• Chrome / Chrome لنظام iOS
• أوبرا / أوبرا ميني

ليس الكثير من الحظ ل ثعلب النار و رحلات السفاري, التي لا تزال لا تدعم تنسيق WebP أصلا. ومع ذلك ، يمكنك استخدام WebPJS Javascript library to تحويل صور WebP إلى سلسلة dataURI على موقع العميل.

العودة إلى تنسيقات الصور الأخرى

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

  source srcset = "example.webp 1x" type = "image / webp">   

لهذا الرمز, صور / كامل المرشد إلى استخدام-ويب بي-صورة-format_13.jpg سيتم تحميله إذا كان المستخدم يستخدم Firefox أو Safari.

معاينة الصور WebP

يمكنك معاينة صور WebP على متصفح Chrome و Opera. ولكن إذا كنت ترغب في القيام بذلك محليًا على جهازك ، فستحتاج إلى بعض الأدوات.

يمكن لمستخدمي Mac استخدام WebPQuickLook لمعاينة صور تنسيق WebP باستخدام وظيفة Quick Look (مع تحديد الصورة أو تمييزها ، اضغط على مفتاح المسافة).

لمستخدمي Windows ، سيعرض WebPCodec معاينة مصغرة لصور WebP في مستكشف الملفات. سيتم عرض معادلات WebP و JPEG. في بعض أنظمة تشغيل نظام التشغيل المدعومة (Vista ، 7 ، 8) ، يمكن عرض صورة WebP على Windows Photo Viewer أيضًا.

أكثر من: يوفر ReSCR.it الصور بتنسيق WeBP تلقائيًا وهو متاح إذا قمت بتخزين صورك باستخدام MaxCDN. (قراءة المزيد)

مراجع أخرى

• تحويل GIF المتحركة إلى WebP
• كيف يعمل WebP
• نشر WebP عبر قبول التفاوض على المحتوى
• ويب أسرع وأصغر وأكثر جمالا باستخدام WebP
• نشر تنسيقات صور جديدة على الويب
• وثائق WebP API