Hướng dẫn sử dụng ShortPixel

Trong các thành phần ảnh hưởng tới tốc độ của trang web thì hình ảnh chính là yếu tố đầu tiên bạn cần nghĩ tới và tối ưu nó. Trong bài viết này ad sẽ giới thiệu tới các bạn Plugin Shortpixel –  Plugin nén ảnh trong WordPress tốt nhất hiện nay

Hướng dẫn cài đặt và sử dụng plugin ShortPixel

1. Đầu tiên, các bạn cần phải truy cập vào đây và đăng ký cho mình một tài khoản ShortPixel. Khi đăng ký mặc định bạn được miễn phí 2 tháng mỗi tháng 100 credits/tháng.

Khuyến nghị: Bạn nên mua gói ONE-TIME CREDITS

(Tức là các khoản tín dụng một lần không bao giờ hết hạn nên bạn có thể sử dụng chúng cho đến khi nào hết Credit)

Vd: Mình mua gói $9.99 (10.000 credit) bạn có thể tối ưu 2.500 ảnh trung bình. Một bài blog trung bình bạn cần upload 5 ảnh. Vậy bạn có thể viết 500 bài mới hết được gói $9.99. Một tuần bạn viết 3 bài thì hơn 3 năm bạn mới hết credit. Rất kinh tế!

2. Ngay lập tức, một email sẽ tự động được gửi vào hộp thư của bạn kèm theo API Key và mật khẩu đăng nhập tài khoản ShortPixel.

3. Cài đặt và kích hoạt plugin ShortPixel Image Optimizer (download tại đây).

4. Truy cập vào Settings => ShortPixel. Trong tab General, nhập API Key được cung cấp ở bước 2, sau đó click vào nút Validate.

Hướng dẫn cấu hình Shortpixel

General Tab

• Compression Type. Lựa chọn hình thức nén là lossy (nén giảm chất lượng-nhưng khó nhận ra được bằng mắt thường), Glossy (suy giảm một chút) hoặc lossless (nén không giảm chất lượng). Nếu site của bạn không cần các hình ảnh với độ phân giải lớn, độ sắc nét cao (trang về chụp ảnh, tranh ảnh nghệ thuật) thì nên chọn lossy để dung lượng ảnh nhỏ hơn. Và để tiết kiệm tối đa băng thông cho website nếu bạn là blogger hay có website e-commerce với quá nhiều ảnh trên site, bạn nên dùng Lossy Compress. Đây là cách nén cho ảnh có dung lượng cực nhỏ, chất lượng ảnh chỉ giảm một chút nếu nhìn kỹ bạn mới nhận ra những pixel bị mất.
• Also include thumbnails. Tốt nhất là bạn nên chọn nén luôn thumbnail (1 thumbnail sẽ tốn bạn 1 credit) tuy có tốn credit nhưng thumbnail là cần thiết. Bạn thường chèn ảnh vào size với Large Size và Medium size đúng không nào?
• Image Backup. Giữ ảnh gốc – Đây là tùy chọn giúp bạn lưu giữ và tách riêng ảnh gốc ra một thư mục riêng biệt, phòng trường hợp cần thiết có thể khôi phục lại nếu ảnh nén cho chất lượng không ưng ý.. Mặc dù tôi chưa bao giờ mất ảnh do Shortpixel, nhưng một số plugin khác thì đã từng. Bạn cũng không nên đặt 100% lòng tin vào Shortpixel, giữ lại 10% cho việc sao lưu cho chắc nhé!
• Remove EXIF. Nếu bạn chưa biết thì EXIF chỉ dành cho dân chụp ảnh, những người muốn giữ lại những thông tin của bức ảnh khi được upload lên internet như thông tin máy ảnh, ngày chụp, giờ chụp, vị trí chụp,…Đương nhiên blogger không cần những thông tin này, bạn sẽ bỏ nó để tiết kiệm dung lượng thêm một chút.
• Resize Large Image. Tôi thường không mở chức năng này vì muốn lưu lại kích thước ảnh gốc. Mục đích của chức năng này là giúp bạn tiết kiệm được ổ cứng SSD hosting của bạn. Ví dụ: Ảnh gốc tôi upload có kích thước 2048x2048px thì dung lượng là 7MB, nhưng khi bật chứ năng này thì Shortpixel sẽ tự Resize ngay khi bạn upload ảnh gốc lên và biến nó trở thành 1024x1024px (có thể chỉnh theo ý thích) với dung lượng lưu trữ ổ cứng là 3MB. Tiết kiệm được 1 khúc đúng không nào. Các thumbnail sẽ được tạo bình thường.

Advanced Tab

• Additional Media Folders. Đây là tính năng rất hay của Shortpixel cho phép bạn tối ưu những ảnh của thư mục khác đang dùng không chỉ những ảnh trong library. Bạn Chọn select và tìm thư mục bạn chỉ định và các thư mục con của chúng.
• Convert PNG images to JPEG: Tự động chuyển đổi hình ảnh PNG sang JPEG nếu có thể. Điều này có thể giảm đáng kể kích thước tệp, đặc biệt nếu bạn có hình ảnh camera được lưu ở định dạng PNG. Plugin cũng sẽ tìm kiếm các tham chiếu của hình ảnh trong bài viết và sẽ thay thế chúng. Hình ảnh sẽ không được chuyển đổi nếu JPEG kết quả lớn hơn PNG gốc.
• CMYK to RGB conversion.  Nếu bạn chưa biết thì hệ màu CMYK dành cho in ấn với 4 bộ màu chính là Cyan, Magenta, Yello, Key trong khi RGB là 3 bộ màu Red, Green, Blue. Và thực tế rằng toàn bộ màn hình máy tính và điện thoại đều dùng hệ màu RGB, như vậy bạn giữ theo hệ màu CMYK internet là không cần thiết. Và tất nhiên CMYK luôn có dung lượng ảnh nặng hơn. Đây là lý do tại sao bạn luôn dùng RGB cho toàn bộ ảnh trên internet.
• Next Generation Images. Hình ảnh thế hệ tiếp theo

+  Also create WebP versions of the images: Nếu bạn tick chọn “Đồng thời tạo phiên bản WebP của hình ảnh”, Phiên bản WebP của hình ảnh chỉ được tạo khi hình ảnh được tối ưu hóa, WebP hiện nay hỗ trỡ cho tất cả các trình duyệt Chrome và Android (một định dạng hình ảnh hiện đại do Google tạo ra, cung cấp khả năng nén không làm giảm chất lượng vượt trội cho hình ảnh trên web). Việc này có thể giúp ảnh PNG giảm dung lượng 3 lần và giúp ảnh JPG giảm 25% dung lượng.

!!! Thay đổi quan trọng: Starting May 10th, 2021 this option will use additional credits (1 credit = 1 image or thumbnail)!
Từ ngày 10 tháng 5 năm 2021 Tùy chọn này sẽ sử dụng các khoản tín dụng bổ sung (1 tín dụng = 1 hình ảnh hoặc hình thu nhỏ)!

+ Also create AVIF versions of the images: AVIF là một định dạng mới (định dạng tệp hình ảnh AV1) và hình ảnh có thể nhỏ hơn tới 50% so với WebPs, trung bình. Các tệp AVIF được lưu trữ với phần mở rộng tên tệp .avif. Có thể thấy đây là định dạng của tương lai tuy nhiên hiện tại các trình duyệt vẫn chưa hỗ trợ đầy đủ đối với định dạng này.

+ Deliver the next generation versions of the images in the front-end: Cung cấp các phiên bản thế hệ tiếp theo của hình ảnh trong giao diện người dùng

.Using the <PICTURE> tag syntax: Mỗi thẻ <img> sẽ được thay thế bằng thẻ <picture>, chủ đề của bạn đang sử dụng phụ thuộc vào vị trí của thẻ <img>, bạn có thể gặp sự cố hiển thị nên bạn không cần tick vào phần này.

.Without altering the page code (via .htaccess): Tương tự phần này ko cần thiết

• Optimize Retina Images. Bạn chỉ nên bật tính năng này khi bạn có plugin Retina (đa số website chuyên ảnh sẽ có). Mục đích là Shortpixel sẽ tối ưu luôn ảnh Retina khi phát hiện được bạn đang có. Rất hoàn hảo!
• Optimize Other Thumbs. Tôi ưu luôn những ảnh ẩn do plugin tạo ra nhưng không hiện trong library (Ví dụ plugin tạo ảnh relate  posts). Chức nằng nhằm đảm bảo mọi ảnh trên website của bạn đều được tối ưu. Bỏ tick để tiết kiệm credit
• Optimized PDFs. Tối ưu file PDF luôn trong trường hợp nếu file PDF đó có quá nhiều ảnh (ebook, tạp chí), tính năng khá hay.Optimize
• Exclude patterns: Loại trừ một số hình ảnh được tối ưu hóa dựa trên các mẫu. Các mẫu được phân tách bằng dấu phẩy. cho phép người dùng chỉ định những tệp hoặc thư mục nào được bỏ qua trong quá trình tối ưu hóa.

Một mẫu bao gồm một kiểu: cặp giá trị ; các loại được chấp nhận là “tên” , “đường dẫn” và “kích thước” . Một tệp sẽ bị loại trừ nếu nó khớp với bất kỳ mẫu nào.

>> Chi tiết bạn xem bài viết: Cách loại trừ hình ảnh và thư mục khỏi tối ưu hóa của Shortpixel

• HTTP AUTH credentials: Chỉ điền vào các trường này nếu trang web của bạn (giao diện người dùng) không thể truy cập công khai và khách truy cập cần người dùng / pass để kết nối với nó. Nếu bạn không biết đây là gì thì chỉ cần để trống.
• Optimize Media On Upload. Tự động tối ưu ảnh bất kể khi nào bạn up ảnh lên WordPress. Đảm bảo bạn sẽ không quên tối ưu ảnh và tiết kiệm nhiều thời gian cho bạn. Cứ up ảnh và để Shortpixel tối ưu tự động.
• Process in Fron-end. Tự động tối ưu hóa hình ảnh do người dùng thêm vào giao diện người dùng. Điều này có thể làm tăng tải trên máy chủ của bạn nếu bạn có nhiều người dùng được kết nối đồng thời. Nên bỏ chọn để tiết kiệm credit và tăng tốc độ website
• Exclude thumbnail sizes. Mục đích để Shortpixel hạn chế quá nhiều thumbnail tạo ra do theme, plugin tạo ra không cần thiết. Rất quan trọng, vì mỗi thumbnail sẽ tốn của bạn 1 credit.

Cloudflare API Tab

Nếu bạn đang sử dụng Cloudflare trên trang web của mình bạn nên điền vào các thông tin chi tiết bên dưới. Điều này sẽ cho phép ShortPixel hoạt động liên tục với Cloudflare để mọi hình ảnh được tối ưu hóa / khôi phục bởi ShortPixel cũng sẽ được cập nhật tự động trên Cloudflare.

Khá dễ ở bước này, bạn chỉ đăng nhập https://www.cloudflare.com/a/profile và tìm Global API key và Zone ID. Paste thông tin đó vào. Xong!

Statistics Tab

Đây là nơi bạn kiểm tra bạn đã dùng hết bao nhiêu Credit và còn lại bao nhiêu. Bạn đã tiết kiệm được bao nhiêu băng thông với Shortpixel và dung lượng ổ cứng.

Cách tính Credits trong Plugin ShortPixel

Cách tính Credits như sau: 1 CREDIT = 1 IMAGE OR THUMBNAIL

(Tức 1 Credit tương đương với 1 hình ảnh được tối ưu hóa)

> Bài viết gốc: https://help.shortpixel.com/article/13-a-credit-equals-an-optimized-image

Xin lưu ý rằng mỗi hình ảnh có một số hình thu nhỏ do WordPress tự động tạo khi thêm hình ảnh mới. Số lượng hình thu nhỏ phụ thuộc vào chủ đề và plugin bạn sử dụng. Mỗi lần tối ưu hóa hình thu nhỏ được tính là một khoản tín dụng riêng biệt .

Ngoài ra, nếu bạn chọn tạo tệp WebP hoặc AVIF khi tối ưu hóa, thì một khoản tín dụng bổ sung cũng sẽ được chi cho mỗi hình ảnh / hình thu nhỏ nhận được WebP / AVIF.

Ví Dụ: 

Giả sử bạn tải lên một hình ảnh và 8 hình thu nhỏ được tạo cùng với nó. Ngoài ra, bạn chọn tạo phiên bản WebP.

• Tối ưu hóa tệp gốc: 1 credit
• Tối ưu hóa 8 hình thu nhỏ: 8 credits
• Tạo WebP cho tệp gốc + hình thu nhỏ: 9 credits
• Tổng: 18 credits

Làm cách nào để chỉ tối ưu hóa một số kích thước hình thu nhỏ nhất định?

Thông thường, việc tối ưu hóa tất cả các hình thu nhỏ sẽ rất hữu ích, nhưng trong một số trường hợp, một số kích thước hình thu nhỏ này không còn cần thiết nữa, vì vậy việc tối ưu hóa chúng bằng ShortPixel sẽ không hợp lý và lãng phí tín dụng.

Cách 1: Đi tới Cài đặt > ShortPixel  và sau đó đến Advanced Tab. Ở đó, ở phần bên dưới, bạn có thể loại trừ các kích thước hình thu nhỏ mà bạn không muốn tối ưu hóa:

Cách 2: Ngăn cắt ảnh trong Theme, Plugin tự động cắt ảnh ra nhiều kích thước mà không dùng

>> Tham khảo: Ngăn tạo ảnh con trong wordpress

Nén hình với Plugin Shortpixel

Sau khi bạn đã setup chuẩn chỉ như ở trên để tối ưu tất cả hình ảnh có trên web, bạn thực hiện:

Bước 1: Hãy Truy cập  truy cập Media

Bước 2: Bulk ShortPixel

Bước 3: Click vào Start Optimizing (nút bắt đầu) để nén các ảnh cũ đã up lên website.

Quá trình diễn ra lâu hay chậm là hoàn toàn phụ thuộc vào số lượng ảnh và kết nối mạng giữa hosting với máy chủ của ShortPixel.

Lưu ý: không tắt tab hoặc tắt trình duyệt trong khi nén ảnh. Nếu bạn tắt, quá trình sẽ tạm dừng cho đến khi bạn mở trở lại.

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