Xem Nội Dung Ngay

Thủ thuật chuyển đổi "đồng loạt" mọi định dạng ảnh sang WebP

Hướng dẫn chuyển đổi "all-in-one" đồng loạt mọi định dạng ảnh cho bài viết sang webp với một lệnh đơn giản.

Cường Trần
Cường Trần
5 phút đọc
Thủ thuật chuyển đổi đồng loạt mọi định dạng ảnh sang WebP

Nhẹ hơn 60-90% so với ảnh PNG và JPG truyền thống, tương thích 95% trình duyệt cả máy tính lẫn điện thoại, webp đang được xem là "định dạng ảnh web" mới cho mọi website và CMS hiện nay.

WebP không chỉ giúp site bạn tải trang nhanh hơn mà còn "thu nhỏ" được mã nguồn website của bạn, từ đó giúp bạn tiết kiệm đáng kể chi phí sao lưu backup website, băng thông và ổ cứng lưu trữ của hosting server. Chưa kể đến lợi ích về SEO.

Tuy nhiên, không dễ để bạn chuyển đổi sang webp "chuẩn" (kể cả đang dùng photoshop) cho site và các bài viết. Đặc biệt là bạn sẽ gặp khó khi thực hiện chuyển đổi đồng loạt.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách chuyển đổi ảnh "tất cả trong một" thành webp (kể cả AVIFF hay JPG XL trong tương lai), vừa resize, vừa chuyển đổi mọi định dạng ảnh, vừa nén ảnh cùng một lúc trong một thao tác DUY NHẤT cực đơn giản bằng Google Squoosh.

Hướng dẫn dùng ảnh webp để tối ưu website Ghost
Hướng dẫn cách dùng ảnh webp khi viết bài trên Ghost để tối ưu tốc độ trang.

Các yêu cầu cần thiết cần chuẩn bị

Trước khi thực hiện bạn cần chuẩn bị một số yêu cầu sau:

  1. Máy tính (Win, Ubuntu, Mac). Việc chuyển đổi sẽ chạy ngay trên máy tính của bạn, máy cấu hình càng mạnh thì chuyển đổi càng nhanh.
  2. Cài đặt Nodejs trên máy tính. Bạn vào trang chủ Nodejs để download Nodejs phù hợp với máy tính của bạn. Squoosh cần Nodejs để cài đặt CLI.
Tải và cài đặt Nodejs bản LTS phù hợp với OS của bạn
Tải và cài đặt Nodejs bản LTS phù hợp với OS máy tính của bạn

Tạo lệnh chuyển đổi "cá nhân hoá'

Thực tế thì nhu cầu chuyển đổi định dạng, resize và tỷ lệ nén ảnh của mỗi người đều khác nhau vì vậy bạn cần tạo ra "khuôn" chuyển đổi cho chính bạn.

Ví dụ, một số bạn sẽ ưu tiên nén ảnh càng nhẹ càng tốt thì sẽ muốn dùng tỷ lệ nén 70% thay vì 85%. Một số bạn khác lại muốn resize ảnh phù hợp với theme mình sẽ chọn chiều rộng ảnh tối đa là 1320px thay vì 1024px hay 800px,...và nhiều nhu cầu khác nhau có thể có của mỗi cá nhân.

Mỗi người sẽ lựa chọn cho mình công thức chuyển đổi ảnh phù hợp nhất với mình bằng Squoosh với 3 lựa chọn cơ bản sau:

  1. Resize ảnh.
  2. Lựa chọn định dạng ảnh (dĩ nhiên là webp).
  3. Chọn tỷ lệ nén ảnh.

Bạn hãy xem video hướng dẫn chi tiết Squoosh bên dưới.

Tạo lệnh chuyển đổi phù hợp với cá nhân từng người

Lệnh Squoosh sẽ có dạng như sau:

npx @squoosh/cli --resize '{"enabled":true,"width":1024,"height":556,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --webp '{"quality":85,"target_size":0,"target_PSNR":0,"method":4,"sns_strength":50,"filter_strength":60,"filter_sharpness":0,"filter_type":1,"partitions":0,"segments":4,"pass":1,"show_compressed":0,"preprocessing":0,"autofilter":0,"partition_limit":0,"alpha_compression":1,"alpha_filtering":1,"alpha_quality":100,"lossless":0,"exact":0,"image_hint":0,"emulate_jpeg_size":0,"thread_level":0,"low_memory":0,"near_lossless":100,"use_delta_palette":0,"use_sharp_yuv":0}'

Bạn copy lệnh vào notepad để lưu lại, chuẩn bị cho bước tiếp theo.

Bắt đầu chuyển đổi ảnh đồng loạt sang webp

Lệnh Squoosh ở trên bạn sẽ chưa dùng được bởi vì bạn chưa thêm vào đường dẫn folder chứa ảnh và folder ảnh thành quả chuyển đổi. Ví dụ:

  1. Folder chứa ảnh ở Desktop tên convert
  2. Folder chứa ảnh đã chuyển đổi cũng ở Desktop tên convert-ouput
Tạo 2 folder để chứa ảnh cần chuyển đổi và ảnh sau chuyển đổi

Bạn cần thêm lệnh sau để khai báo đường dẫn folder chứa ảnh và folder hoàn thành như bên dưới.

--output-dir Desktop/convert-output Desktop/convert

Mở Terminal trên máy tính và dán lệnh bên dưới vào (bạn cần đảm bảo đã cài đặt Nodejs ở bước trên). Lệnh hoàn chỉnh sẽ như sau:

npx @squoosh/cli --resize '{"enabled":true,"width":1024,"height":100%,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --webp '{"quality":85,"target_size":0,"target_PSNR":0,"method":4,"sns_strength":50,"filter_strength":60,"filter_sharpness":0,"filter_type":1,"partitions":0,"segments":4,"pass":1,"show_compressed":0,"preprocessing":0,"autofilter":0,"partition_limit":0,"alpha_compression":1,"alpha_filtering":1,"alpha_quality":100,"lossless":0,"exact":0,"image_hint":0,"emulate_jpeg_size":0,"thread_level":0,"low_memory":0,"near_lossless":100,"use_delta_palette":0,"use_sharp_yuv":0}' --output-dir Desktop/convert-output Desktop/convert
Dùng lệnh Squoosh chuyển đổi đồgn loạt

Nếu dùng Mac bạn có thể gặp lỗi

Worker error:  Error: Desktop/convert/.DS_Store has an unsupported format

Dùng lệnh sau để xoá file .DS_Store

find Desktop/convert -name ".DS_Store" -delete

Nếu lỗi resize ảnh bị méo khi crop thì bạn thay "height":100%

{"enabled":true,"width":1024,"height":100%,...}

Lời kết...

Kể cả sau này định dạng ảnh mới như webp2, AVIFF, JPG XL thay thế cho webp đi nữa thì thủ thuật này vẫn hữu dụng.

Khi bạn chuẩn bị cho các bài viết mới, bạn chỉ cần bỏ tất cả ảnh của bài viết đó vào folder chỉ định và mở Terminal chạy lệnh đã lưu là mọi ảnh được chuyển đổi sang webp nhanh chóng.

Cách tạo "khuôn lệnh" cá nhân hoá sẽ giúp đáp ứng được mọi nhu cầu chuyển đổi của mỗi bạn, vì vậy bước tạo khuôn lệnh là quan trọng nhất.

Chúc bạn thành công!

Hướng Dẫn

Bạn có thể quan tâm

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Hướng dẫn tự tạo thông báo email thời gian thực khi có thành viên mới đăng ký bằng IFTTT miễn phí.

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Mẹo tạo popup thông báo đơn giản cho website Ghost

Hướng dẫn cách tạo Popup thông báo cho Ghost siêu nhanh và đơn giản.

Mẹo tạo popup thông báo đơn giản cho website Ghost

Cách sử dụng Google Search Console với Ghost cho blogger mới

Hướng dẫn cách sử dụng Google Search Console đặc biệt cho Ghost và blogger mới.

Cách sử dụng Google Search Console với Ghost cho blogger mới
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.