Vì máy chủ blog đặt ở nước ngoài nên mặc dù sử dụng CN2 GIA cổ điển nhưng tốc độ nhanh hơn nhiều so với máy chủ VPS đặt trong phòng máy thông thường của Mỹ. Tuy nhiên, viết bài đòi hỏi phải chèn một số lượng lớn hình ảnh và WordPress đã cài đặt rất nhiều. Plug-in (xem: Tổng hợp các plug-in WordPress để đào trang) khiến trình duyệt đưa ra một số lượng rất lớn yêu cầu truy cập trang.
Nếu là VPS nội địa như Tencent Cloud, Alibaba Cloud v.v. thì nó đã có lợi thế về tốc độ rồi, nên chỉ cần bạn sẵn sàng bỏ tiền để tăng băng thông của hosting thì tốc độ truy cập trong nước vẫn là được đảm bảo. Các phòng máy chủ VPS nước ngoài cung cấp băng thông rất lớn nhưng đường truyền dễ bị tắc nghẽn vào giờ Internet cao điểm vào ban đêm, có thể ảnh hưởng đến trải nghiệm website.
Do đó, nếu máy chủ của bạn đặt ở nước ngoài như Dizhanfou và có nhiều hình ảnh trang web, JS, CSS và các tệp khác, bạn nên cố gắng tối ưu hóa nó, chẳng hạn như giảm yêu cầu, nén hình ảnh, hợp nhất JS và CSS, nén trang html, vân vân. Bài viết này chủ yếu chia sẻ kinh nghiệm tối ưu hóa hình ảnh: cài đặt định dạng hình ảnh webp trang web và trải nghiệm hiệu ứng tăng tốc.
Để biết thêm kinh nghiệm và mẹo về tối ưu hóa trang web, vui lòng xem:
- Các công nghệ ứng dụng chính và tính năng hỗ trợ của blog - tổng hợp các phương pháp tối ưu hóa website và server
- Không gian DirectAdmin cho phép tăng tốc OpCache và redis cache - WP cho phép redis cache
- Cloudflare tự động chặn IP độc hại vào tường lửa và tự động chuyển sang tập lệnh khiên 5 giây để ngăn chặn các cuộc tấn công CC
PS: Cập nhật ngày 3/9/2019, định dạng WebP phù hợp với các website hình ảnh và album ảnh. Dưới đây là 2 chương trình phù hợp cho cá nhân xây dựng album ảnh: ImgURL Pro và Chevereto.
PS: Được cập nhật vào ngày 29 tháng 9 năm 2019, Thành phần Nginx PageSpeed do Google phát triển có thể hiện thực hóa một bộ tối ưu hóa hình ảnh hoàn chỉnh như tự động chuyển đổi webP và tự động thích ứng với các yêu cầu của trình duyệt. tạo tác tối ưu hóa-Nginx triển khai mô-đun ngx_pagespeed và tăng tốc trải nghiệm hiệu ứng.
1. Ưu điểm và nhược điểm của hình ảnh WebP là gì?
1.1 Nén hình ảnh tối đa
Nếu không có nhiều chỗ để tối ưu hóa hình ảnh ở định dạng JPEG, PNG và GIF, hình ảnh WebP sau khi nén không mất dữ liệu sẽ nhỏ hơn 26% so với hình ảnh WebP sau khi nén mất dữ liệu được so sánh với các chỉ số chất lượng tương đương. từ 25% đến 34%.
Từ hình ảnh bên dưới, chúng ta có thể thấy rằng webp lossy có thể nén một PNG từ hơn 40 kb đến dưới 10 kb và đảm bảo chất lượng của hình ảnh - không thể phân biệt được bằng mắt thường. Để biết chi tiết về hiệu ứng tăng tốc trình duyệt của PNG và Webp, vui lòng xem: https://isparta.github.io/compare-webp/index.html. (Bấm vào để phóng to)
WebP cũng hỗ trợ chuyển đổi ảnh GIF Nói cách khác, kích thước của ảnh động ở định dạng webp sẽ nhỏ hơn. So sánh: https://iparta.github.io/compare-webp/index_a.html#12, như hình dưới đây:
1.2 Một số trình duyệt cũ không tương thích
Thiếu sót lớn nhất của hình ảnh webp là một số trình duyệt cũ không hỗ trợ nó, chẳng hạn như các phiên bản khác nhau của IE, iOS Safari, v.v. Nhưng đừng lo lắng, xu hướng chính là hình ảnh định dạng webp được các trình duyệt chính hỗ trợ tương lai. Để biết chi tiết về khả năng tương thích của trình duyệt webp,: https://caniuse.com/#search=webp (bấm vào để phóng to)
PS: Cập nhật ngày 16 tháng 9 năm 2019, Chúng ta có thể sử dụng mã PHP và quy tắc viết lại Nginx để cho phép máy chủ quyết định có hiển thị hình ảnh webP hay không dựa trên trình duyệt của khách hàng: trang web kích hoạt hình ảnh định dạng WebP - PHP và Nginx chuyển đổi định dạng WebP và trình duyệt thích ứng.
2. Chuyển đổi webp cục bộ
PS: Cập nhật ngày 6 tháng 2 năm 2020, Đối với phần mềm chuyển đổi hàng loạt hình ảnh và video, bạn cũng có thể dùng thử FFmpeg mã nguồn mở và miễn phí: phần mềm nén và chuyển đổi định dạng video và âm thanh nguồn mở miễn phí FFmpeg- chuyển đổi định dạng nhanh chóng và nén video.
Cách thuận tiện nhất để trang web sử dụng hình ảnh định dạng webp không phải là tạo chúng cục bộ mà là chuyển đổi trực tiếp hình ảnh ở định dạng gif, png, JPG và các định dạng khác thành hình ảnh định dạng webp trực tuyến. Các trang web như vậy bao gồm:
- HTTPS://Web P-converter.com/
- HTTPS://EZ gif.com/jpg-to-Web P
- HTTPS://wuwuwu.A Convert.com/ tài năng /image/
- HTTPS://bản đồ.IsuX.US/
Chuyển đổi trực tuyến hình ảnh webp phù hợp với số lượng nhỏ hình ảnh. Nếu bạn cần chuyển đổi một số lượng lớn hình ảnh sang định dạng webp, bạn có thể tải xuống phần mềm chuyển đổi định dạng webp, chẳng hạn như: XnConvert, iSparta, v.v. và bạn có thể chuyển đổi hàng loạt. hình ảnh sang định dạng webp trực tiếp trên máy tính của bạn.
- HTTP://I Sparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Chuyển đổi Linux sang webp
3.1 Cài đặt công cụ Webp
Các phiên bản chính của Webp:
- HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
Lệnh cài đặt nhanh cài đặt WebP:
#debian install webp sudo apt-get install webp
Các lệnh biên dịch và cài đặt mã nguồn 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
Xác minh rằng webp đã được cài đặt thành công. Nhập cwebp vào thiết bị đầu cuối và đầu ra sau được hiển thị, cho biết quá trình cài đặt đã thành công:
[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.
Sau khi cài đặt thành công chủ yếu có các công cụ lệnh sau:
cwebp→ Công cụ mã hóa WebP
dwebp→ Công cụ giải mã WebP
vwebp→ Trình xem tệp WebP
webpmux→ Công cụ trộn WebP
gif2webp→ Công cụ chuyển ảnh GIF sang WebP
3.2 Cách sử dụng lệnh
JPG, PNG -> WebP
Sử dụng cwebp để chuyển đổi hình ảnh JPG và PNG sang định dạng 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
Sử dụng imagemagick để chuyển đổi png sang jpg.
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
Bạn cũng có thể đặt tỷ lệ chất lượng nén, phương pháp, v.v.:
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Chuyển đổi Webp theo đợt
Sử dụng lệnh find để chuyển đổi tất cả hình ảnh jpg và png trong thư mục được chỉ định thành hình ảnh định dạng 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"' _ {} ; Tự động chuyển đổi hàng loạt ảnh Webp. Ở đây bạn cần sử dụng các tác vụ theo lịch trình của Linux. Nếu bạn không biết cách sử dụng các tác vụ theo lịch trình, trước tiên bạn có thể tìm hiểu: Hướng dẫn vận hành và cú pháp cơ bản của lệnh Crontab trên Linux. Tạo tệp: webp2jpg.sh, và dán đoạn mã sau:
# 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Đảm bảo tệp shell có quyền thực thi và sau đó bạn có thể thực thi webp2jpg.sh để chuyển đổi hình ảnh.
4. CDN kích hoạt webp
4.1 Kích hoạt lại Webp trên Cloud
Nếu bạn chưa sử dụng Youpaiyun CDN, bạn có thể tham khảo: Youpaiyun CDN phản chiếu một cú nhấp chuột, CDN động tĩnh và SSL miễn phí. Kích hoạt webp trong Youpaiyun rất đơn giản, chỉ cần bật webp thích ứng Khi trình duyệt hỗ trợ hình ảnh ở định dạng webp, Youpaiyun WebP sẽ tự động trở về định dạng webp, điều này rất tốt. (Bấm vào để phóng to)
4.2 Baidu Cloud CDN kích hoạt Webp
Baidu Cloud không có chức năng webp thích ứng, bạn cần sử dụng xử lý hình ảnh để đạt được nó. Thêm: @f_webp sau ảnh để chuyển trực tiếp sang định dạng webp để duyệt. Ví dụ: 
.
Tác dụng của Baidu Cloud CDN Webp như sau:
Plug-in webp WordPress WebP Express hỗ trợ nhiều phương thức chuyển đổi hình ảnh khác nhau. Ví dụ: bạn có thể gọi: cwebp, gd, imagick trên VPS cục bộ. chuyển đổi hoặc bạn có thể sử dụng API dịch vụ chuyển đổi Webp trực tuyến để thực hiện chuyển đổi hình ảnh.
6. Tóm tắt
Ưu điểm lớn nhất của định dạng webp cho hình ảnh trang web là nén kích thước hình ảnh rất nhiều. Đặc biệt nếu trang web chứa số lượng hình ảnh lớn thì hiệu quả tăng tốc truy cập sẽ rất rõ ràng. Ngoài ra, đối với những website lớn, việc kích hoạt hình ảnh ở định dạng Webp sẽ tiết kiệm chi phí lưu lượng truy cập.
Điều tệ hại về định dạng webp của hình ảnh trang web là các trình duyệt cũ không hỗ trợ nó. Ngoài ra, phần mềm duyệt hình ảnh định dạng webp không hỗ trợ đầy đủ nó. Một số sinh viên có thể tải xuống hình ảnh webp cục bộ và thấy rằng những hình ảnh thường được sử dụng có thể được mở. Đây đều là những trang web đáng để các nhà thiết kế cân nhắc.