थोड़ी देर के लिए चित्रों को उड़ने दो! वेबसाइट छवि वेबपी प्रारूप बैच रूपांतरण सेटिंग्स और त्वरित प्रभाव अनुभव

चूँकि ब्लॉग होस्ट विदेश में स्थित है, हालाँकि क्लासिक CN2 GIA का उपयोग किया जाता है, गति एक सामान्य अमेरिकी कंप्यूटर कक्ष में रखे गए VPS होस्ट की तुलना में बहुत तेज़ है, हालाँकि, लेख लिखने के लिए बड़ी संख्या में चित्र सम्मिलित करने की आवश्यकता होती है, और वर्डप्रेस के पास है कई प्लग-इन स्थापित करने के कारण (देखें: साइटों को खोदने के लिए वर्डप्रेस प्लग-इन का सारांश) ब्राउज़र को पेज तक पहुंचने के लिए बहुत बड़ी संख्या में अनुरोध करने का कारण बनता है।

यदि यह एक घरेलू वीपीएस है, जैसे कि टेनसेंट क्लाउड, अलीबाबा क्लाउड, आदि, तो इसमें पहले से ही गति का लाभ है, इसलिए जब तक आप होस्ट की बैंडविड्थ बढ़ाने के लिए पैसा खर्च करने को तैयार हैं, घरेलू पहुंच की गति अभी भी है गारंटी. विदेशी वीपीएस होस्ट कंप्यूटर रूम बहुत बड़ी बैंडविड्थ प्रदान करते हैं, लेकिन रात में चरम इंटरनेट घंटों के दौरान लाइनों में भीड़भाड़ होने का खतरा होता है, जो वेबसाइट के अनुभव को प्रभावित कर सकता है।

इसलिए, यदि आपका होस्ट डिज़ानफू जैसे विदेश में स्थित है और वहां बहुत सारी वेबपेज छवियां, जेएस, सीएसएस और अन्य फाइलें हैं, तो आपको इसे अनुकूलित करने का प्रयास करना चाहिए, जैसे अनुरोधों को कम करना, छवियों को संपीड़ित करना, जेएस और सीएसएस को मर्ज करना, एचटीएमएल पेजों को संपीड़ित करना, वगैरह। यह आलेख मुख्य रूप से छवि अनुकूलन के अनुभव को साझा करने के लिए है: वेबसाइट वेबपी छवि प्रारूप सेटिंग और त्वरण प्रभाव अनुभव।

वेबसाइट अनुकूलन पर अधिक अनुभव और युक्तियों के लिए, कृपया देखें:

1. मुख्य अनुप्रयोग प्रौद्योगिकियां और ब्लॉग की सहायक विशेषताएं - वेबसाइट और सर्वर अनुकूलन विधियों का सारांश
2. DirectAdmin स्पेस OpCache और रेडिस कैश त्वरण को सक्षम करता है - WP रेडिस कैश को सक्षम करता है
3. क्लाउडफ्लेयर स्वचालित रूप से दुर्भावनापूर्ण आईपी को फ़ायरवॉल पर ब्लॉक कर देता है और सीसी हमलों को रोकने के लिए स्वचालित रूप से 5-सेकंड शील्ड स्क्रिप्ट पर स्विच करता है

PS: 3 सितंबर, 2019 को अपडेट किया गया, WebP प्रारूप चित्र वेबसाइटों और फोटो एलबम के लिए उपयुक्त है। यहां व्यक्तियों के लिए फोटो एलबम बनाने के लिए उपयुक्त दो कार्यक्रम हैं: ImgURL प्रो और Chevereto।

PS: 29 सितंबर, 2019 को अपडेट किया गया, Google द्वारा विकसित Nginx PageSpeed ​​​​घटक छवि अनुकूलन का एक पूरा सेट प्राप्त कर सकता है जैसे स्वचालित रूप से वेबपी को परिवर्तित करना और स्वचालित रूप से ब्राउज़र अनुरोधों को अनुकूलित करना: पेजस्पीड सर्वर अनुकूलन आर्टिफैक्ट-एनजीएनएक्स एनजीएक्स_पेजस्पीड मॉड्यूल और त्वरित प्रभाव अनुभव को तैनात करता है।

1. WebP छवियों के क्या फायदे और नुकसान हैं?

1.1  छवि संपीड़न को अधिकतम करें

यदि JPEG, PNG और GIF प्रारूपों में छवियों के अनुकूलन के लिए अधिक जगह नहीं है, तो हानिरहित संपीड़न के बाद WebP छवियां PNG फ़ाइलों की तुलना में 26% छोटी होती हैं, जिनकी तुलना समकक्ष गुणवत्ता संकेतकों से की जाती है 25% से 34% तक।

नीचे दी गई तस्वीर से, हम देख सकते हैं कि वेबप लॉसी 40 केबी से अधिक के पीएनजी को 10 केबी से कम तक संपीड़ित कर सकता है, और छवि की गुणवत्ता सुनिश्चित करता है - यह नग्न आंखों के लिए अप्रभेद्य है। पीएनजी और वेबप के ब्राउज़र त्वरण प्रभावों के विवरण के लिए, कृपया देखें: https://isparta.github.io/compare-webp/index.html। (बड़ा करने के लिए क्लिक करें )

वेबपी जीआईएफ छवि रूपांतरण का भी समर्थन करता है, वेबपी प्रारूप में एनिमेटेड छवियों का आकार छोटा होगा: https://isparta.github.io/compare-webp/index_a.html#12, जैसा कि नीचे दिखाया गया है।

1.2  कुछ पुराने ब्राउज़र संगत नहीं हैं

वेबपी छवियों की सबसे बड़ी कमी यह है कि कुछ पुराने ब्राउज़र इसका समर्थन नहीं करते हैं, जैसे कि आईई, आईओएस सफारी इत्यादि के विभिन्न संस्करण। लेकिन चिंता न करें, वेबपी प्रारूप छवियों के लिए प्रमुख ब्राउज़रों द्वारा समर्थित होना एक प्रमुख प्रवृत्ति है। भविष्य वेबपी ब्राउज़र संगतता पर विवरण के लिए,: https://caniuse.com/#search=webp (बड़ा करने के लिए क्लिक करें)

PS: 16 सितंबर, 2019 को अपडेट किया गया, हम PHP कोड और Nginx रीराइट नियमों का उपयोग कर सकते हैं ताकि सर्वर यह तय कर सके कि क्लाइंट के ब्राउज़र के आधार पर WebP छवियों को प्रदर्शित करना है या नहीं: वेबसाइट WebP प्रारूप छवियों को सक्षम करती है - PHP और Nginx WebP प्रारूपों और अनुकूली ब्राउज़रों को परिवर्तित करें।

2. वेबपी को स्थानीय रूप से कनवर्ट करें

PS: 6 फरवरी, 2020 को अपडेट किया गया, ऐसे सॉफ़्टवेयर के लिए जो छवियों और वीडियो को बैचों में परिवर्तित करता है, आप ओपन सोर्स और मुफ़्त FFmpeg को भी आज़मा सकते हैं: मुफ़्त और ओपन सोर्स वीडियो और ऑडियो प्रारूप रूपांतरण और संपीड़न सॉफ़्टवेयर FFmpeg- त्वरित प्रारूप रूपांतरण और वीडियो संपीड़ित करें।

किसी वेबसाइट के लिए वेबपी प्रारूप छवियों का उपयोग करने का सबसे सुविधाजनक तरीका उन्हें स्थानीय रूप से उत्पन्न करना नहीं है, बल्कि GIF, पीएनजी, जेपीजी और अन्य प्रारूपों में छवियों को सीधे वेबपी प्रारूप छवियों में ऑनलाइन परिवर्तित करना है। ऐसी वेबसाइटों में शामिल हैं:

1. HTTPS://वेब P-converter.com/
2. HTTPS://EZ gif.com/jpg-to-Web P
3. HTTPS://wuwuwu.A Convert.com/ प्रतिभा /छवि/
4. HTTPS:// कार्टोग्राफी.IsuX.US/

वेबपी छवियों का ऑनलाइन रूपांतरण छोटी मात्रा में छवियों के लिए उपयुक्त है यदि आपको बड़ी संख्या में छवियों को वेबपी प्रारूप में परिवर्तित करने की आवश्यकता है, तो आप वेबपी प्रारूप रूपांतरण सॉफ्टवेयर डाउनलोड कर सकते हैं, जैसे: XnConvert, iSparta, आदि, और आप बैच कनवर्ट कर सकते हैं। छवियाँ सीधे आपके कंप्यूटर पर वेबपी प्रारूप में।

1. HTTP://I Sparta.GitHub.IO/
2. HTTPS://wuwuwu.NewYearview.com/En/NewYearconvert/

3. लिनक्स को वेबपी में परिवर्तित करना

3.1  वेबप टूल इंस्टालेशन

वेबप प्रमुख संस्करण:

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

सत्यापित करें कि वेबपी सफलतापूर्वक स्थापित हो गया है। टर्मिनल में 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 मक्सिंग टूल

gif2webp → GIF छवियों को WebP में परिवर्तित करने के लिए उपकरण

3.2  कमांड उपयोग

जेपीजी, पीएनजी -> वेबपी

JPG और PNG छवियों को वेबपी प्रारूप में परिवर्तित करने के लिए cwebp का उपयोग करें।

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

पीएनजी को जेपीजी में बदलने के लिए इमेजमैजिक का उपयोग करें।

# 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  वेबप को बैचों में परिवर्तित करें

निर्दिष्ट निर्देशिका में सभी जेपीजी और पीएनजी छवियों को वेबपी प्रारूप छवियों में परिवर्तित करने के लिए फाइंड कमांड का उपयोग करें। कमांड इस प्रकार है:

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"' _ {} ;

वेबप छवियों को बैचों में स्वचालित रूप से परिवर्तित करें। यहां आपको लिनक्स शेड्यूल किए गए कार्यों का उपयोग करने की आवश्यकता है यदि आप नहीं जानते कि शेड्यूल किए गए कार्यों का उपयोग कैसे करें, तो आप पहले सीख सकते हैं: लिनक्स क्रोंटैब कमांड शेड्यूल्ड कार्य मूल सिंटैक्स और ऑपरेशन ट्यूटोरियल। फ़ाइल बनाएं: 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

सुनिश्चित करें कि शेल फ़ाइल में निष्पादन की अनुमति है, और फिर आप छवि को परिवर्तित करने के लिए webp2jpg.sh निष्पादित कर सकते हैं।

4. सीडीएन वेबपी को सक्षम बनाता है

4.1  वेबप को क्लाउड पर फिर से सक्रिय करें

यदि आपने Youpaiyun CDN का उपयोग नहीं किया है, तो आप इसका उल्लेख कर सकते हैं: Youpaiyun CDN वन-क्लिक मिररिंग, स्टेटिक डायनेमिक CDN और फ्री SSL। Youpaiyun में वेबपी को सक्षम करना बहुत सरल है। जब ब्राउज़र वेबपी प्रारूप में छवियों का समर्थन करता है, तो Youpaiyun WebP स्वचालित रूप से वेबपी प्रारूप में वापस आ जाएगा। (बड़ा करने के लिए क्लिक करें)

4.2  Baidu क्लाउड CDN वेबप को सक्षम बनाता है

Baidu क्लाउड में अनुकूली वेबप फ़ंक्शन नहीं है, इसे प्राप्त करने के लिए आपको इमेज प्रोसेसिंग का उपयोग करने की आवश्यकता है। ब्राउज़िंग के लिए इसे सीधे वेबपी प्रारूप में बदलने के लिए चित्र के बाद @f_webp जोड़ें। उदाहरण के लिए: .

Baidu क्लाउड CDN वेबप का प्रभाव इस प्रकार है:

वर्डप्रेस वेबपी प्लग-इन वेबपी एक्सप्रेस विभिन्न प्रकार की छवि रूपांतरण विधियों का समर्थन करता है, उदाहरण के लिए, आप कॉल कर सकते हैं: cwebp, gd, imagick। परिवर्तित करने के लिए, या आप छवि रूपांतरण को कार्यान्वित करने के लिए ऑनलाइन वेबपी रूपांतरण सेवा एपीआई का उपयोग कर सकते हैं।

6. सारांश

वेबसाइट छवियों के लिए वेबपी प्रारूप का सबसे बड़ा लाभ यह है कि यह छवियों के आकार को बहुत कम कर देता है, खासकर यदि वेब पेज में बड़ी संख्या में छवियां हैं, तो पहुंच में तेजी लाने का प्रभाव बहुत स्पष्ट होगा। इसके अलावा, बड़ी वेबसाइटों के लिए, वेबपी प्रारूप में छवियों को सक्षम करने से ट्रैफ़िक लागत में बचत होगी।

वेबसाइट छवियों के वेबपी प्रारूप के बारे में बुरी बात यह है कि पुराने ब्राउज़र इसका समर्थन नहीं करते हैं। इसके अलावा, वेबपी प्रारूप छवि ब्राउज़िंग सॉफ़्टवेयर इसका पूरी तरह से समर्थन नहीं करता है। कुछ छात्र स्थानीय रूप से वेबपी छवियां डाउनलोड कर सकते हैं और पा सकते हैं कि आमतौर पर उपयोग की जाने वाली छवियां खोली जा सकती हैं ये सभी वेबसाइटें डिजाइनरों के लिए विचारणीय हैं।