Chuyển thành công hơn 12 ngàn bức ảnh JPG & PNG trên WordPress sang định dạng WebP

chuyển ảnh sang định dạng WebP trên WordPress

Sau khi thực hiện thử nghiệm với việc chuyển ảnh định dạng JPG và PNG sang WebP và nhận thấy các ảnh nén không mất dữ liệu khi chuyển sang WebP cho ảnh chất lượng vẫn tốt đồng thời dung lượng giảm đáng kể tôi đã quyết định chuyển toàn bộ ảnh của trang web đối tác (dùng CMS WordPress) sang định dạng WebP.

Trước khi đi vào chi tiết thao tác chuyển, tôi muốn kể cho các bạn quá trình tối ưu hóa ảnh trên trang này trước khi bản thân biết đến định dạng WebP.

Tôi đã làm các việc sau:

  • Cố gắng chỉ sử dụng kích cỡ ảnh tối thiểu cần thiết, thường là chiều rộng 600px – 700px, hoặc lớn lắm là 1200px, khi tôi muốn tiện dùng ảnh đó làm thumbnail khi up lên Facebook.
  • Sử dụng nén ảnh không mất chất lượng. Tôi sử dụng plugin Imagify để nén (xem hướng dẫn cách dùng ở đây), vì có rất nhiều bức ảnh chưa được nén trước đây nên tôi cần phải mua gói bổ sung 1 lần (cách này là rẻ nhất với đa số các trang, lựa chọn gói theo tháng chỉ thích hợp với trang nào có lượng up bài đều đặn số lượng lớn), đâu khoảng 10 USD / 1GB ảnh được nén. Không giới hạn tên miền, dùng bao giờ hết 1GB thì thôi. P/S: về sau tôi mới biết, nếu nén ảnh không mất chất lượng thì nên dùng EWWW để miễn phí (có nhiều tùy chọn), một lựa chọn khác cũng rất tuyệt là reSmush (ít tùy chọn hơn).
  • Giảm sâu dung lượng cho một số bức ảnh có lượng truy cập lớn, thí dụ như ảnh banner, ảnh cột phải, ảnh nhúng quảng cáo trong bài viết. Những ảnh đó được giảm dung lượng mạnh nhờ nén mất chất lượng (nhưng vẫn đủ để nhìn không quá tệ), tôi sử dụng công cụ tối ưu PageSpeed Insights (xem hướng dẫn áp dụng PageSpeed Insights để tối ưu tốc độ website ở đây) cho ảnh JPG và TinyPNG cho ảnh PNG. Ưu điểm của 2 công cụ này là giảm được dung lượng khá nhiều (thường từ 30 – 70%) nhưng chất lượng rất ít bị ảnh hưởng.

Các cách này thực sự hiệu quả, nhờ nó mà nhiều trang tôi giảm được 50 – 300KB ảnh, đúng là giúp tăng tốc độ đáng kể.

Nói đến ảnh thì lại nhắc tôi về quá khứ từng sử dụng dịch vụ CDN của MaxCDN và photon của Jetpack Automatic. Đây cũng là cách thức giúp tăng tốc bằng cách sử dụng máy chủ phân tán để dữ liệu được tải từ nơi gần người dùng nhất. Tuy nhiên chúng là kỷ niệm không mấy dễ chịu.

Với MaxCDN thì tôi dính mấy lần downtime do có vấn đề với máy chủ ở Singapore (để cho công bằng, thì sự kiện tôi bị downtime chỉ là vấn đề thời điểm thôi, về sau MaxCDN thuộc về Stackpath và có chất lượng rất ổn, hiện nhiều blog lớn trên thế giới vẫn tin tưởng dùng sản phẩm của họ, ví dụ như wpbeginner.com).

Sau đấy thì tôi có chuyển sang dùng KeyCDN một thời gian, giá rẻ hơn MaxCDN khá nhiều nhưng cảm tưởng tốc độ cũng không cải thiện đáng kể nên lại thôi (cập nhật thêm, giờ KeyCDN cũng rất ổn, nó thuộc nhóm dịch vụ CDN có quy mô rất lớn, hiện đã mở rộng thêm nhiều PoP và các tính năng đa dạng, giao diện sử dụng thân thiện. Hiện KeyCDN đang là đối tác của Kinsta, một công ty hosting chuyên cho WordPress dành cho phân khúc khách hàng cao cấp. KeyCDN cũng phát triển hàng loạt các công cụ giúp kiểm tra, phân tích để cải thiện tốc độ website: https://tools.keycdn.com/ và nhiều plugin WP dành cho việc cải thiện hiệu năng như Cache Enabler / chuyên để tạo trang tĩnh, CDN Enabler / dùng để tích hợp với các dịch vụ CDN bất kỳ, và Optimus / tối ưu hóa ảnh, trong đó có chuyển ảnh sang WebP – là dịch vụ có phí).

Còn về Jetpack của Automatic thì sao, mặc dù có ưu điểm không thể chối cãi là miễn phí nhưng nó không phải là dịch vụ CDN chất lượng. Tốc độ không cao, ảnh bị giảm chất lượng là nhược điểm lớn nhất. Nói đúng thì nó chỉ hợp với những ai muốn tiết kiệm băng thông hoặc/và mong giảm tải máy chủ yếu ớt của họ. Xem thêm bài đánh giá về các tính năng tăng tốc độ của Jetpack ở đây.

Rồi thì Google AMP ập đến, tốc độ nhanh đến bất ngờ. Một sự hấp dẫn phải nói là rất khó cưỡng lại, thực tế trang web này bạn đang đọc đã áp dụng AMP thông qua plugin AMP dành cho WordPress (kết quả của sự phối hợp giữa Automatic và Google).

Tuy nhiên tôi không áp dụng Google AMP cho trang của đối tác. Dù cho tốc độ hấp dẫn, Google AMP như tôi từng nói rất giống “nén ảnh mất chất lượng” ở khía cạnh nó sẽ loại bỏ nhiều yếu tố của trang web. Lý do hàng đầu khiến cho trang dùng AMP nhanh là vì nó được rút gọn đi rất nhiều những phần râu ria của trang, ví dụ như các widget, phần bình luận, các CSS làm đẹp trang, vân vân, nó chỉ để lại hầu như còn mỗi nội dung lõi mà thôi.

Chính vì vậy AMP không dành cho mọi website, cụ thể thì nó không hợp cho trang cần nhiều tính năng đi kèm như trang khách hàng của tôi. Tốc độ sẽ không thể bù đắp được hàng loạt các thiệt thòi khác mà trang web có khả năng cao phải gánh chịu.

Vậy là tôi từ bỏ AMP dù rất tiếc.

Nói về hosting, tôi sử dụng gói DreamPress tối ưu riêng cho WordPress của Dreamhost, sử dụng host tốt là một trong các cách cơ bản để tăng tốc độ WordPress. Vì nền tảng của nó đã được tối ưu sẵn khá nhiều nên tôi không phải cài đặt thêm plugin cache kiểu như W3 Total cache.

Có vẻ như tôi đã đi hơi xa so với mục đích ban đầu. Quay trở lại ảnh định dạng WebP. Khả năng mạnh của nó làm tôi cảm thấy lạ khi giờ đây mới biết đến, vì WebP được Google phát triển từ tận năm 2010 rồi, tức là đã 7 năm trời.

Ưu điểm nổi bật của WebP là cho ảnh chất lượng tương tự JPG và PNG nhưng dung lượng giảm khoảng 20 – 30%, đối với nén mất chất lượng, dung lượng còn có thể giảm nhiều hơn nữa, chẳng hạn có thể giảm đến 3 lần với ảnh PNG. WebP sử dụng cả hai kỹ thuật nén mất dữ liệu và không mất dữ liệu. Trong đó kỹ thuật nén không mất dữ liệu do nhóm WebP phát triển, còn nén mất dữ liệu được sao chép từ kỹ thuật nén video VP8 đã biết.

Lúc đầu tôi lo lắng việc chuyển sang WebP có đáng không, vì định dạng này không được nhiều trình duyệt hỗ trợ (mới có Chrome và Opera), sẽ phiền toái hơn trong quá trình dùng. Nhưng 2 cái làm tôi cảm thấy tự tin là:

  • Dung lượng ảnh giảm thực sự đáng kể.
  • Chrome đặc biết phổ biến ở Việt Nam, trình duyệt Cốc Cốc cũng được phát triển trên cùng nền tảng càng làm nó phổ biến hơn.

Khi tôi vào Google Analystics của website đối tác để xem cụ thể có bao nhiêu % người dùng được hưởng lợi ích khi chuyển ảnh sang định dạng WebP, thì đây là kết quả:

Với trang này của tôi, IE & FireFox chiếm không đến 1,5% người dùng. Chủ yếu là Chrome các phiên bản để bàn, điện thoại và Safari của Apple
Với trang này của đối tác, IE & FireFox chiếm không đến 1,5% người dùng. Chủ yếu là Chrome các phiên bản để bàn, điện thoại và Safari của Apple.

Khi tôi cộng tất cả vào thì khoảng 61% sẽ được hưởng lợi nhờ dung lượng ảnh giảm. Con số lớn đáng để tôi áp dụng, thực lòng mà nói trong cảm nghĩ, tôi chỉ cần khoảng 30% người dùng là đã áp dụng rồi…

Vậy 39% người dùng còn lại thì sao? Họ sẽ vẫn lướt web với ảnh JPG và PNG truyền thống.

Dùng plugin để tạo ảnh WebP

WordPress không cho up trực tiếp ảnh định dạng WebP lên, do vậy sẽ không có chuyện bạn chuyển ảnh JPG và PNG sang WebP từ desktop sau đó chuyển lên thư viện qua giao diện thông thường.

Ngoài ra sẽ còn rất nhiều ảnh cũ trước đây, kể cả việc bạn truy cập thư mục WordPress Content (wp-content/uploads) dễ dàng thông qua FTP (bằng công cụ như FileZilla) thì việc chuyển một đống ảnh cũ sang WebP rồi up lên lại thủ công bằng FTP sẽ là công việc rất tốn thời gian và dễ gây nhầm lẫn.

Cách đơn giản nhất là dùng plugin, nó sẽ chuyển dễ dàng các ảnh cũ sang WebP, đồng thời chuyển tự động các ảnh mới up nữa. Hiện tôi biết có 3 plugin có khả năng chuyển ảnh sang định dạng WebP:

Plugin mà tôi lựa chọn dùng để chuyển ảnh sang WebP là ShortPixel, dĩ nhiên việc này sẽ gây tốn tiền (các lựa chọn khác cũng vậy). Tiếc là Imagify đã sắm trước đây lại không có tính năng chuyển ảnh sang WebP.

Theo thống kê tôi có hơn 12 ngàn bức ảnh, trong đó chỉ hơn 1000 là ảnh gốc còn lại là gần 11 ngàn ảnh nhỏ do WordPress tạo thêm cho các giao diện khác nhau, thí dụ như trên điện thoại (đây cũng là một cách tối ưu hóa ảnh cho website, nếu sử dụng ảnh gốc to ban đầu cho desktop sẽ tốn dung lượng hơn nhiều ảnh nhỏ, vốn vừa vặn với điện thoại thông minh).

Hơi xót vì số lượng ảnh này lại buộc tôi phải nhích nên chọn lựa gói 20USD (số lượng tối ưu cho 30 ngàn tấm), gói rẻ nhất 10USD cho 10 ngàn bức ảnh thì mình vượt mất rồi. Dù sao đây cũng là đánh đổi xứng đáng chứ (tự an ủi!), 1s tải trang tăng thêm sẽ làm giảm 10% tỷ lệ chuyển đổi cơ mà!

ShortPixel có vẻ nén chậm hơn Imagify, nhưng tôi nghĩ một phần nguyên nhân là vì nó còn phải tạo thêm định dạng WebP nữa. Vì các ảnh đã được nén không mất dữ liệu trước đó bởi Imagify nên việc nén không mất dữ liệu tiếp theo của ShortPixel chỉ tiết kiệm thêm được 1 – 2%. Cơ mà tôi không quan tâm đến cái đó lắm, và thực cũng hơi bất ngờ khi nó vẫn tối ưu thêm được…Tuy nhiên mục đích chính chỉ là để nó chuyển hết sang định dạng WebP. Phải mất 6 – 7 tiếng để toàn bộ quá trình hoàn thành. Mấy tiếng cuối tôi đi ngủ vì không chờ thêm được nữa.

Sau khi chuyển đổi xong WordPress sẽ tồn tại song song hai bức ảnh có tên giống y nhau ở cùng thư mục nhưng chỉ khác đuôi, một cái là .jpg (hoặc .png) còn cái kia là .webp

Vấn đề bây giờ là chúng ta sẽ chọn hiển thị ảnh định dạng WebP chỉ trên trình duyệt hỗ trợ, còn các cái khác vẫn phải hiển thị ảnh định dạng cũ.

Cách 1. Thêm một đoạn mã nhỏ

Bạn cần thêm một đoạn mã vào file .htaccess (Apache), hoặc nginx config, cụ thể nó thể này.

Dành cho máy chủ Apache (trước hết bạ cần biết cách chỉnh sửa file .htaccess đã, nó rất dễ gây lỗi nếu bạn thao tác nhầm):

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

Dành cho máy chủ Nginx:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}

# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;
}

Chú ý là cách này sẽ không làm việc được với CDN. Nếu bạn sử dụng CDN mà vẫn dùng WebP theo cách trên sẽ gây ra lỗi không hiển thị ảnh trên một số trình duyệt (xem thêm các rắc rối khi lần đầu sử dụng CDN). Nếu bạn vẫn muốn sử dụng CDN kết hợp với WebP cần can thiệp sâu hơn vào code. Hiện tôi biết có 2 cách, một là sử dụng CDN Enabler của KeyCDN để nó tạo ra hai phiên bản cache khác nhau cho hai định dạng ảnh, và nhận diện trình duyệt để phân phối bản cache thích hợp. Cách thứ hai là sử dụng plugin kiểu như: https://wordpress.org/plugins/webp-express/, nó sẽ chèn thêm thẻ mới vào ảnh, để đồng thời có hai định dạng ảnh trong HTML, và chọn hiển thị ảnh tùy theo trình duyệt bằng một đoạn mã…

– – –

Sau khi đoạn mã trên được thêm vào, bạn sẽ thấy định dạng phần mở rộng không thay đổi, ảnh vẫn có đuôi là png hoặc jpg, tuy nhiên ảnh tải thực sự về đã là định dạng webp với trình duyệt tương thích với nó (chính vì lý do này làm tôi khốn khổ hơn 1 tiếng đồng hồ vì cứ nghĩ mình đã thiết lập điều gì sai).

Để xác thực điều đấy, bạn vào công cụ khác > công cụ cho nhà phát triển trên Google Chrome, sau đó vào tab Network, cuối cùng bạn thử tải lại trang web, bạn sẽ thấy ở phần Type định dạng ảnh là webp mặc dù phần mở rộng là jpg.

Để chỉnh sửa .htaccess trên WordPress bạn có thể dùng các plugin hỗ trợ thay vì chỉnh sửa thủ công và up lại bằng FTP. Một trong các plugin phổ biến nhiều người dùng có khả năng này là Yoast SEO.

Cách 2: sử dụng plugin

Đây là plugin cache có tên Cache Enabler plugin của KeyCDN cùng hãng phát triển Optimus – WordPress Image Optimizer.

Bạn vào phần Settings -> Cache Enabler, và tick vào phần như phần được đánh dấu bên dưới:

Ảnh chụp màn hình thiết lập
Ảnh chụp màn hình thiết lập – ảnh của wpcolt.com

Nó sẽ tạo ra thêm một phiên bản cache dành riêng cho WebP ngoài bản cache thông thường.

Cá nhân tôi dùng cách 1, mặc dù cách 2 có vẻ hay hơn, sở dĩ là vì trang của đối tác đã được tối ưu sẵn cache phía máy chủ rồi nên thêm một cái cache khác sẽ tạo ra thêm rắc rối.

Đánh giá mức độ thành công

Việc chuyển ảnh sang định dạng mới của tôi diễn ra êm thấm, vì hầu hết các ảnh có từ trước đều là ảnh nén không mất chất lượng nên việc chuyển sang định dạng mới không làm suy giảm chất lượng đáng kể.

Duy có vài ảnh JPG được tối ưu rất nhiều thì sau khi chuyển sang WebP bị suy giảm chất lượng thấy khá rõ. Ngoài ra có 2 – 3 bức ảnh PNG hồi xưa từng được tối ưu mất dữ liệu bằng TinyPNG, sau khi chuyển sang WebP thì tăng dung lượng! Nhưng may mắn là chỉ có vài ảnh như vậy nên tôi hoàn toàn sửa chữa thủ công được.

Rất nhiều ảnh JPG khác đã giảm được dung lượng từ 30% – 50% tạo ra ảnh hưởng đáng kể đến tốc độ tải trang.

Toàn bộ chi phí cho thiết lập này của tôi chỉ là số tiền 20 USD mua việc chuyển đổi sang WebP của plugin ShortPixel Image Optimizer. Với việc mới tiêu hết hơn 10 ngàn bức trên tổng số 30 ngàn bức, tôi sẽ chỉ phải mua thêm khi trang của đối tác có thêm tầm 1000 bài viết mới. Xét ra thì không đắt.