دع الصور تطير لبعض الوقت! إعدادات تحويل دفعة تنسيق WebP لصورة موقع الويب وتجربة التأثير المتسارع

نظرًا لأن مضيف المدونة موجود في الخارج، على الرغم من استخدام CN2 GIA الكلاسيكي، إلا أن السرعة أسرع بكثير من مضيف VPS الموجود في غرفة كمبيوتر أمريكية عادية. ومع ذلك، تتطلب كتابة المقالات إدراج عدد كبير من الصور، وهذا ما يفعله WordPress تثبيت العديد من المكونات الإضافية (انظر: ملخص المكونات الإضافية لـ WordPress لحفر المواقع) يتسبب في قيام المتصفح بتقديم عدد كبير جدًا من الطلبات للوصول إلى الصفحة.

إذا كان خادم VPS محليًا، مثل Tencent Cloud وAlibaba Cloud وما إلى ذلك، فهو يتمتع بالفعل بميزة السرعة، لذا طالما أنك على استعداد لإنفاق الأموال لزيادة عرض النطاق الترددي للمضيف، فلا تزال سرعة الوصول المحلي ثابتة مضمون. توفر غرف الكمبيوتر المضيفة لـ VPS الأجنبية نطاقًا تردديًا كبيرًا جدًا، لكن الخطوط عرضة للازدحام خلال ساعات الذروة للإنترنت في الليل، مما قد يؤثر على تجربة الموقع.

لذلك، إذا كان مضيفك موجودًا في الخارج مثل Dizhanfou وهناك الكثير من صور صفحات الويب وJS وCSS وغيرها من الملفات، فيجب عليك محاولة تحسينه، مثل تقليل الطلبات وضغط الصور ودمج JS وCSS وضغط صفحات html، إلخ. تهدف هذه المقالة بشكل أساسي إلى مشاركة تجربة تحسين الصورة: إعداد تنسيق صورة webp لموقع الويب وتجربة تأثير التسريع.

لمزيد من الخبرة والنصائح حول تحسين موقع الويب، يرجى مراجعة:

1. تقنيات التطبيقات الرئيسية والميزات الداعمة للمدونات - ملخص لأساليب تحسين موقع الويب والخادم
2. تعمل مساحة DirectAdmin على تمكين تسريع ذاكرة التخزين المؤقت لـ OpCache وredis - بينما تعمل WP على تمكين ذاكرة التخزين المؤقت لـ redis
3. يقوم Cloudflare تلقائيًا بحظر عناوين IP الضارة على جدار الحماية ويتحول تلقائيًا إلى برنامج نصي للدرع مدته 5 ثوانٍ لمنع هجمات CC

ملاحظة: تم التحديث في 3 سبتمبر 2019، تنسيق WebP مناسب لمواقع الصور وألبومات الصور، فيما يلي برنامجان مناسبان للأفراد لإنشاء ألبومات الصور: ImgURL Pro وChevereto.

ملاحظة: تم التحديث في 29 سبتمبر 2019، يمكن لمكون Nginx PageSpeed ​​​​الذي طورته Google تحقيق مجموعة كاملة من تحسينات الصور مثل تحويل webP تلقائيًا والتكيف تلقائيًا مع طلبات المتصفح تعمل أداة التحسين-Nginx على نشر وحدة ngx_pagespeed وتجربة التأثير المتسارعة.

1. ما هي مزايا وعيوب صور WebP؟

1.1  زيادة ضغط الصورة إلى الحد الأقصى

إذا لم يكن هناك مجال كبير لتحسين الصور بتنسيقات JPEG وPNG وGIF، فإن صور WebP بعد الضغط بدون فقدان البيانات تكون أصغر بنسبة 26% من صور PNG بعد الضغط مع فقدان البيانات مقارنة بمؤشرات الجودة المكافئة. يتم تقليل حجم صور JPEG بنسبة 25% إلى 34%.

من الصورة أدناه، يمكننا أن نرى أن webp Lossy يمكنه ضغط PNG أكثر من 40 كيلو بايت إلى أقل من 10 كيلو بايت، ويضمن جودة الصورة - لا يمكن تمييزها بالعين المجردة. للحصول على تفاصيل حول تأثيرات تسريع المتصفح لـ PNG وWepp، يرجى الاطلاع على: https://isparta.github.io/compare-webp/index.html. (اضغط للتكبير )

يدعم WebP أيضًا تحويل صور GIF. وبعبارة أخرى، سيكون حجم الصور المتحركة بتنسيق webp أصغر: https://isparta.github.io/compare-webp/index_a.html#12، كما هو موضح أدناه:

1.2  بعض المتصفحات القديمة غير متوافقة

أكبر عيب في صور webp هو أن بعض المتصفحات القديمة لا تدعمها، مثل الإصدارات المختلفة من IE وIOS Safari وما إلى ذلك. ولكن لا تقلق، فهذا اتجاه رئيسي لدعم الصور بتنسيق webp من قبل المتصفحات الرئيسية في المستقبل للحصول على تفاصيل حول توافق متصفح webp،: https://caniuse.com/#search=webp (انقر للتكبير)

ملاحظة: تم التحديث في 16 سبتمبر 2019، يمكننا استخدام كود PHP وقواعد إعادة كتابة Nginx للسماح للخادم بتحديد ما إذا كان سيتم عرض صور webP بناءً على متصفح العميل: يتيح موقع الويب صورًا بتنسيق WebP - PHP وNginx تحويل تنسيقات WebP والمتصفحات التكيفية.

2. تحويل webp محليًا

ملاحظة: تم التحديث في 6 فبراير 2020، بالنسبة للبرامج التي تحول الصور ومقاطع الفيديو على دفعات، يمكنك أيضًا تجربة المصدر المفتوح وFFmpeg المجاني: برنامج تحويل وضغط تنسيقات الفيديو والصوت المجاني والمفتوح المصدر FFmpeg- تحويل التنسيق السريع وضغط الفيديو.

الطريقة الأكثر ملاءمة لموقع ويب لاستخدام صور بتنسيق webp هي عدم إنشائها محليًا، ولكن تحويل الصور مباشرة بتنسيق gif وpng وJPG والتنسيقات الأخرى إلى صور بتنسيق webp عبر الإنترنت. تشمل هذه المواقع ما يلي:

1. HTTPS://ويب P-converter.com/
2. HTTPS://EZ gif.com/jpg-to-Web ص
3. HTTPS://wuwuwu.A converter.com/ Talent /image/
4. HTTPS://cartography.IsuX.US/

يعد تحويل صور webp عبر الإنترنت مناسبًا لكميات صغيرة من الصور إذا كنت بحاجة إلى تحويل عدد كبير من الصور إلى تنسيق webp، فيمكنك تنزيل برامج تحويل تنسيق webp، مثل: XnConvert وiSparta وما إلى ذلك، ويمكنك التحويل دفعة واحدة. الصور إلى تنسيق webp مباشرة على جهاز الكمبيوتر الخاص بك.

1. HTTP://I Sparta.GitHub.IO/
2. HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/

3. تحويل Linux إلى webp

3.1  تثبيت أداة Webp

إصدارات ويب الرئيسية:

1. HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML

أمر التثبيت السريع لتثبيت WebP:

#debian install webp
sudo apt-get install webp

أوامر تجميع وتثبيت كود مصدر WebP:

# 安装编译器以及依赖包
yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel
# 请到官网下载最新版本
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz
# 解压
tar -zxvf libwebp-0.6.0.tar.gz
# 进入目录
cd libwebp-0.6.0
# 源代码安装环境检查
./configure
# 编译
make
# 安装
make install

تحقق من تثبيت webp بنجاح. أدخل cwebp في الوحدة الطرفية، وسيتم عرض الإخراج التالي، للإشارة إلى نجاح التثبيت:

[root@linux-server]# cwebp
Usage:

   cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.

Try -longhelp for an exhaustive list of advanced options.

بعد التثبيت الناجح، توجد بشكل أساسي أدوات الأوامر التالية:

cwebp → أداة تشفير WebP

dwebp → أداة فك ترميز WebP

vwebp → عارض ملفات WebP

webpmux → أداة WebP muxing

gif2webp → أداة لتحويل صور GIF إلى WebP

3.2  استخدام الأوامر

JPG، PNG -> ويب بي

استخدم cwebp لتحويل صور JPG وPNG إلى تنسيق webp.

cwebp filename -o filename
cwebp -q 50 /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg -o /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg.webp

استخدم imagemagick لتحويل png إلى jpg.

# convert from png to jpg by imagemagic
convert wzfou.com.png wzfou.com.jpg

يمكنك أيضًا ضبط نسبة جودة الضغط وطريقة الضغط وما إلى ذلك:

convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp

3.3  تحويل Webp على دفعات

استخدم أمر البحث لتحويل جميع صور jpg وpng الموجودة في الدليل المحدد إلى صور بتنسيق webp.

find ./ -name "*.jpg" -exec cwebp -q 50 {} -o {}.webp ; 
find ./ -name "*.png" -exec cwebp -q 50 {} -o {}.webp ; 
#或者
find . -name "*.png" | parallel -eta cwebp {} -o {.}.webp
find ./ -type f -name '*.png' | xargs -P 8 -I {} sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} ;

تحويل صور Webp تلقائيًا على دفعات. تحتاج هنا إلى استخدام المهام المجدولة في Linux. إذا كنت لا تعرف كيفية استخدام المهام المجدولة، فيمكنك أولاً التعرف على: بناء الجملة الأساسي للمهمة المجدولة في Linux Crontab والبرنامج التعليمي للتشغيل. قم بإنشاء الملف: webp2jpg.sh, والصق الكود التالي:

# webp2jpg.sh

#!/bin/bash
for file in `ls`
do
  len=`xxd -p -l 4 $file`

  if [ $len == "52494646" ]; then
    echo "$file is webp"
    if [ ! -e $file.jpg ]; then
      echo "===== convert $file ====="
      dwebp $file -o $file.png
      convert "$file.png" "$file.jpg"
      rm $file.png
    fi
  fi
done

تأكد من أن ملف shell لديه إذن التنفيذ، ومن ثم يمكنك تنفيذ webp2jpg.sh لتحويل الصورة.

4. CDN يمكّن webp

4.1  قم بتنشيط Webp مرة أخرى على السحابة

إذا لم تكن قد استخدمت Youpaiyun CDN، فيمكنك الرجوع إلى: النسخ المتطابق بنقرة واحدة لـ Youpaiyun CDN، وCDN الديناميكي الثابت، وSSL المجاني. يعد تمكين webp في Youpaiyun أمرًا بسيطًا للغاية، فقط قم بتشغيل webp التكيفي. عندما يدعم المتصفح الصور بتنسيق webp، سيعود Youpaiyun WebP تلقائيًا إلى تنسيق webp، وهو أمر جيد جدًا. (اضغط للتكبير)

4.2  يتيح Baidu Cloud CDN إمكانية Webp

لا تحتوي Baidu Cloud على وظيفة webp التكيفية، وتحتاج إلى استخدام معالجة الصور لتحقيق ذلك. أضف:f_webp بعد الصورة لتحويلها مباشرة إلى تنسيق webp للتصفح. على سبيل المثال: .

تأثير Baidu Cloud CDN Webp هو كما يلي:

يدعم مكون WordPress webp الإضافي WebP Express مجموعة متنوعة من طرق تحويل الصور، على سبيل المثال، يمكنك الاتصال بـ: cwebp، gd، imagick على الخادم الافتراضي الخاص المحلي. للتحويل، أو يمكنك استخدام واجهة برمجة تطبيقات خدمة تحويل Webp عبر الإنترنت لتنفيذ تحويل الصور.

6. ملخص

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

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