Hướng dẫn sử dụng plugin nén ảnh ShortPixel cho WordPress

plugin nén ảnh ShortPixel

Nén ảnh là một trong các biện pháp giúp bạn tăng tốc WordPress rất hiệu quả. Hôm nay chúng ta sẽ học cách sử dụng plugin nén ảnh ShortPixel – công cụ giúp tối ưu hóa hình ảnh trên website dành riêng cho người dùng WordPress.

Ngoài ra chúng tôi có một bài viết so sánh 5 plugin nén ảnh cho WordPress, giúp bạn có cái nhìn tổng quan tốt hơn trong việc lựa chọn.

Còn bây giờ hãy tìm hiểu ShortPixel.

1. Tính năng

ShortPixel cho phép nén 3 định dạng ảnh là JPEG, PNG và GIF.

Dung lượng file ảnh tối đa là 10MB.

Bản miễn phí chỉ cho phép nén 100 ảnh / tháng.

Ngoài ra ShortPixel cũng nén được file PDF (kể cả bản Free).

2. Cài đặt

Sau khi cài plugin ShortPixel, bạn phải đăng ký để nhận API key, bạn chỉ cần nhập email đang sử dụng vào để nó tạo mã và gửi thông tin tài khoản:

nhận API key từ ShortPixel

API key sẽ được tạo tự động như thế này:

xác nhận API key

Bạn chỉ cần nhấn vào nút Validate là xong phần xác thực. Thông tin tài khoản ShortPixel gửi qua email chỉ phải dùng khi bạn nâng cấp lên bản trả phí. Chúng ta đang dùng bản miễn phí nên cái đó không quan trọng lúc này.

3. Các tùy chọn cơ bản

Vị trí thiết lập tùy chọn:

tùy chọn của ShortPixel

A. Chất lượng ảnh sau nén

lựa chọn các kiểu nén

Mặc định kiểu nén của nó là Lossy – mất chất lượng, nhưng không đáng kể và cho hiệu quả nén cao nhất (giảm được nhiều dung lượng ảnh nhất).

Glossy là kiểu nén cho chất lượng rất gần với ảnh gốc, rất thích hợp với những ảnh chất lượng cao trên website, những ai chụp ảnh chuyên nghiệp có thể thích lựa chọn này.

Lossless là kiểu nén cho hiệu quả thấp nhất (về mặt giảm dung lượng) nhưng chất lượng ảnh cao nhất, gần như không có bất kỳ suy chuyển nào so với ảnh gốc.

B. Nén các ảnh nhỏ

nén các ảnh nhỏ

Bình thường WordPress sẽ tạo các ảnh nhỏ cho ảnh gốc để tối ưu hiển thị trên các thiết bị khác nhau như điện thoại di động, máy tính bảng. Tùy chọn này được sử dụng để nén các ảnh như vậy. Nó cũng đếm luôn số lượng ảnh cần tối ưu (như thông báo ở ảnh trên là 427).

Bạn nên giữ như mặc định là tick chọn.

C. Giữ ảnh gốc

giữ ảnh gốc sau nén

Đâ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 ý.

Bạn cũng nên để như mặc định là tick chọn.

D. Loại bỏ dữ liệu EXIF

bỏ dữ liệu EXIF

EXIF là các dữ liệu bổ sung cho bức ảnh như tốc độ màn chập, ISO, loại máy ảnh, ngày tháng chụp, vân vân. Ngoại trừ trường hợp đặc biệt, còn không bạn nên xóa dữ liệu này để giảm dung lượng ảnh.

Bạn nên để như mặc định, tức là tick chọn để bỏ dữ liệu EXIF.

F. Giảm kích cỡ các ảnh lớn

giảm kích cỡ size ảnh quá lớn

WordPress tạo ra các ảnh nhỏ cho ảnh gốc để tối ưu hiển thị, cho nên việc tải lên ảnh quá to không ảnh hưởng đến tốc độ tải trang (vì trang web sẽ hiển thị các ảnh nhỏ thay thế) nhưng nó làm cho hosting nhanh chóng chật chội.

Một trong các vấn đề thường gặp với người mới dùng WordPress là họ hay vô ý up các ảnh rất lớn lên website, tùy chọn này giúp giảm các ảnh có kích cỡ khổng lồ đó.

Bạn có thể điều chỉnh con số bên trong nếu muốn (924), nhưng đừng động đến nó nếu bạn không thực sự hiểu hết ý nghĩa của thao tác này. Cách an toàn là đừng để con số trên nhỏ hơn 924.

Mặc định là bỏ tick, tức là nó không giảm size ảnh kích cỡ lớn. Bạn phải chủ động tick chọn ShortPixel mới thực hiện chức năng phía trên mình mô tả.

Cuối cùng bạn nhấn Save Changes để lưu các thay đổi.

4. Các tùy chọn nâng cao

Phần tùy chọn nâng cao này yêu cầu bạn phải có hiểu biết sâu hơn về WordPress, nếu bạn mới làm quen, chỉ cần dừng lại ở bước 3  & chuyển qua bước 5 luôn để thực hiện tối ưu hóa ảnh.

Ngược lại, nếu bạn tự tin, chúng ta sẽ đi vào phần nâng cao ngay bây giờ.

A. Lựa chọn thư mục nén ảnh

lựa chọn thư mục nén ảnh

Bình thường chỉ ảnh trong thư viện mới được nén (ở Media > Library), nếu muốn nén ảnh ở thư mục khác, bạn cần chỉ cụ thể thư mục đó trong phần này. Nhấn Select…chọn thư mục rồi click Add Folder.

B. Chuyển ảnh PNG sang JPG khi có thể

chuyển ảnh PNG sang JPG khi có thể

Mặc định là không tick chọn.

Nếu bạn tick chọn nghĩa là các ảnh PNG sẽ chuyển sang JPEG (JPG) khi đạt tiêu chí phù hợp.

Mục đích của việc chuyển đuôi này là gì?

Nó sẽ giúp làm giảm dung lượng ảnh ban đầu rất nhiều, nhất là khi bạn có ảnh chụp (phong cảnh, sinh hoạt đời thường) lưu ở định dạng PNG

Tiêu chí phù hợp là tiêu chí nào?

Đó là ảnh PNG đó phải không có thuộc tính trong suốt. Vì nếu không, sau khi chuyển đổi sang ảnh JPG, nó sẽ không giống ảnh PNG cũ. Vì định dạng ảnh JPG cũng không hỗ trợ thuộc tính trong suốt.

C. Chuyển đổi định dạng màu từ CYMK sang RGB

chuyển CYMK sang RGB

Mặc định là tick chọn.

Màu hiển thị trên máy tính dùng hệ màu RGB, và không cần hệ màu CYMK (dùng trong in ấn), do vậy việc chuyển đổi từ CYMK sang RGB giúp ảnh giảm dung lượng.

D. Sử dụng định dạng ảnh WebP

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

Mặc định là không tick chọn.

Nếu bạn tick chọn các ảnh sẽ chuyển sang định dạng ảnh WebP. 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.

Nhược điểm của WebP là hiện nó không được nhiều trình duyệt lớn hỗ trợ (mới có Google Chorme & Opera là hiển thị tốt, còn IE, Safari, FireFox đều chưa hỗ trợ), nên bạn sẽ phải sử dụng đồng thời WebP và các phiên bản JPG và PNG để hiển thị đầy đủ trên tất cả các trình duyệt.

Việc cho phép chuyển ảnh sang định dạng WebP là tính năng đáng giá của ShortPixel mà không nhiều plugin nén ảnh có, đây cũng chính là lý do mình sử dụng plugin này để tối ưu hóa ảnh cho một đối tác thay vì sử dụng plugin đã quen trước đó là Imagify.

P/S: Nếu bạn có nhiều ảnh muốn chuyển sang WebP thì dùng ShortPixel sẽ mất phí, lời khuyên là bạn hãy dùng EWWW, nó miễn phí với tùy chọn này và không giới hạn số ảnh chuyển đổi.

E. Tạo mã đánh dấu cho ảnh WebP

tạo mã đánh dấu cho ảnh WebP

Mặc định là không tick chọn.

Nếu bạn tick chọn ở phần D thì mới cần quan tâm đến phần này. Ở đây chúng ta tạo ra các mã đánh dấu cho ảnh WebP thay thế thẻ <img>.

Phần này khá lằng nhằng, bạn không nên tick chọn, bạn có thể xem bài viết chuyển thành công 12 ngàn bức ảnh sang định dạng WebP để biết cách hiển thị định dạng ảnh này trên trình duyệt tương thích.

F. Tối ưu ảnh Retina

tối ưu ảnh Retina

Mặc định là tick chọn.

Điều này có nghĩa là nếu bạn có plugin tạo ảnh Retina thì ShortPixel cũng tối ưu hóa các ảnh đó.

G. Tối ưu hóa file PDF

tối ưu hóa file PDF

Mặc định là tick chọn.

Điều này nghĩa là nó sẽ tự động nén file PDF của bạn, đây cũng là tính năng không nhiều plugin nén ảnh có, và là một bổ sung có giá trị.

H. Không nén một số file ảnh nào đấy

không nén một số file ảnh nào đấy

Tùy chọn này giúp bạn không thực hiện nén ảnh một hoặc nhiều file ảnh nào đấy.

Có 3 mẫu để loại trừ:

  • Dựa trên tên ảnh
  • Dựa trên đường dẫn của ảnh
  • Dựa trên kích cỡ ảnh (khoảng kích cỡ hoặc kích cỡ cụ thể)

Các mẫu loại trừ cách nhau bởi dấu phẩy.

I. Phần này bỏ qua

không cần quan tâm

Bạn không phải quan tâm đến phần này, vì rất hiếm website cần dùng đến nó.

J. Tối ưu front-end

tối ưu front-end

Mặc định bỏ chọn.

Nếu trang web của bạn người dùng thường up ảnh hoặc file PDF thông qua form ở front-end (giao diện người dùng cuối) bạn nên tick chọn cái này. Vì trường hợp đó không nhiều nên Short Pixel mặc định bỏ chọn.

Nếu bạn tick chọn và trang web của bạn có nhiều người up dữ liệu cùng lúc nó có thể làm server làm việc vất vả.

K. Tối ưu hóa ngay khi up ảnh

tối ưu hóa tự động

Mặc định là tick chọn.

Điều này nghĩa là ShortPixel tự động nén ảnh ngay lập tức sau khi nó được tải lên. Đây là tùy chọn bạn nên giữ nguyên. Nếu không bạn sẽ phải mất công nén ảnh thủ công.

L. Loại trừ không tối ưu một số kích cỡ

không nén thumbnail nào đó

Mặc định là bỏ chọn.

Trong đa số trường hợp bạn nên giữ mặc định này để không loại trừ thumbnail nào cả. Tất cả ảnh đều cần được nén.

Cuối cùng bạn nhấn Save Changes để lưu kết quả.

5. Nén các ảnh cũ đã up trên website

Để tối ưu hóa ảnh cũ, bạn vào khu vực sau:

nén ảnh đã up

Không vui ở chỗ 1 tháng bạn sẽ chỉ có 100 ảnh miễn phí để tối ưu, nếu không có các ảnh cũ, mà chỉ dùng cho các bài viết sau này thì kể ra con số trên cũng không tệ. 100 ảnh (bao gồm cả ảnh gốc và thumbnail) tương đương với khoảng 25 ảnh gốc, và nếu một bài viết có 2, 3 ảnh minh họa thì cũng khá thoải mái (bạn có thể viết được 8 – 12 bài / tháng).

Tuy nhiên 100 ảnh sẽ không thấm vào đâu so với kho ảnh cũ (có thể lên đến 500 bức, tính cả thumbnail với chỉ tầm 50 bài viết), và đây là lúc ShortPixel gợi ý bạn nâng cấp bằng cách mua thêm gói nén!

Giá đưa ra là 10 đô bạn sẽ nén được 10 ngàn bức ảnh. Cũng không quá đắt, nhưng giờ thì bạn đã hiểu vì sao ShortPixel lại có nhiều tính năng tốt đến vậy. Nó là plugin dễ khiến bạn phải rút tiền ra nhất! (WP Smush giới hạn nén 50 ảnh cũ cho một lần click ở tài khoản miễn phí, nhưng dù sao nó cũng cho click nhiều lần. reSmush.it thì cho nén ảnh thoải mái không giới hạn số lượng. Còn Imagify cũng cho dung lượng nén ảnh lần đầu lên tới 50 MB – đủ đáp ứng cho 500 đến 1000 ảnh – tính cả thumbnail.)

6. Nén lại & khôi phục ảnh gốc

Bạn hoàn toàn có quyền nén lại một ảnh nào đấy hoặc khôi phục lại ảnh gốc nếu muốn. Ở thư viện (Media > Library), bạn nhấn vào biểu tượng sau ở góc ngoài cùng bên tay phải tương ứng với ảnh bạn muốn tác động:

khôi phục ảnh gốc

Re-optimize lossy: nghĩa là nén lại ảnh theo kiểu lossy.

Re-optimize glossy: nghĩa là nén lại ảnh theo kiểu glossy.

Restore backup: nghĩa là khôi phục lại ảnh gốc.

7. Nén thử một số ảnh

A. Kiểu nén Lossless – không mất chất lượng (JPG):

kiểu nén không mất chất lượng

File ảnh gốc: 222 KB

Độ phân giải: 800px * 533px

Ảnh nén Lossless: 180 KB

Dung lượng giảm: ~ 19%

Chất lượng ảnh: không suy giảm

B. Kiểu nén Glossy (JPG):

kiểu nén Glossy

File ảnh gốc: 222 KB

Độ phân giải: 800px * 533px

Ảnh nén Glossy: 145 KB

Dung lượng giảm: ~ 35%

Chất lượng ảnh: suy giảm một chút, khó nhận thấy bằng mắt thường

C. Kiểu nén Lossy – mất chất lượng (JPG):

kiểu nén lossy

File ảnh gốc: 222 KB

Độ phân giải: 800px * 533px

Ảnh nén Lossy: 81 KB

Dung lượng giảm: ~ 63%

Chất lượng ảnh: suy giảm nhiều hơn, có thể nhận thấy bằng mắt thường

D. Kiểu nén Lossless – không mất chất lượng (PNG):

nén ảnh PNG không mất dữ liệu

File ảnh gốc:  8,35KB

Độ phân giải: 139px * 244px

Ảnh nén Lossless: 4,5KB

Dung lượng giảm: ~ 46%

Chất lượng ảnh: không suy giảm

E. Kiểu nén Glossy (PNG):

nén ảnh PNG mất một chút dữ liệu

File ảnh gốc:  8,35KB

Độ phân giải: 139px * 244px

Ảnh nén Glossy: 3,2KB

Dung lượng giảm: ~ 62%

Chất lượng ảnh: suy giảm một chút

F. Kiểu nén Lossy – mất chất lượng (PNG):

nén ảnh PNG mất dữ liệu

File ảnh gốc:  8,35KB

Độ phân giải: 139px * 244px

Ảnh nén Lossy: 2,1KB

Dung lượng giảm: ~ 75%

Chất lượng ảnh: suy giảm nhiều hơn (nhưng không nhận ra được bằng mắt thường)

G. Kiểu nén Lossless – không mất chất lượng (GIF):

nén ảnh GIF không mất chất lượng

File ảnh gốc: 1,5 MB

Độ phân giải: 275px * 206px

Ảnh nén Lossless: 1,25 MB

Dung lượng giảm: 16,83%

Chất lượng ảnh: không suy giảm

H. Kiểu nén Glossy (GIF):

nén kiểu glossy

File ảnh gốc: 1,5 MB

Độ phân giải: 275px * 206px

Ảnh nén Glossy: 953 KB

Dung lượng giảm: 38,36%

Chất lượng ảnh: suy giảm một chút

I. Kiểu nén Lossy – mất chất lượng (GIF):

ảnh GIF nén kiểu lossy

File ảnh gốc: 1,5 MB

Độ phân giải: 275px * 206px

Ảnh nén Lossy: 953 KB

Dung lượng giảm: 38,36%

Chất lượng ảnh: suy giảm một chút

J. Nén file PDF

ShortPixel nén file PDF khá tốt, trong một thử nghiệm nhỏ nó giảm đến hơn 50% dung lượng, tuy vậy chất lượng có giảm ở một số trang (chỗ Free Download), chứ không phải là hoàn toàn không mất chất lượng.

nén PDF có mất chất lượng

8. Kết luận

So với các plugin khác ShortPixel nổi lên là plugin có các tùy chọn đa dạng, chuyên sâu hơn nhưng cũng rất thiết thực, thí dụ như chuyển ảnh sang định dạng WebP, nén file PDF, chuyển PNG sang JPG khi có thể, vân vân.

Nó chỉ có vấn đề khi website của bạn có nhiều ảnh cũ muốn nén, trong trường hợp đó bạn có thể dùng reSmush.it (không giới hạn số lượng) hoặc WP Smush để tối ưu loạt ảnh cũ này. Sau đó quay sang dùng ShortPixel sau.

ShortPixel cực kỳ phù hợp với những ai viết khoảng 10 bài blog một tháng. Rõ ràng số blogger như vậy rất nhiều.

Bạn cũng có thể tính đến chuyện mua gói nén 10 ngàn ảnh (nên mua gói 1 lần cho tiết kiệm, tốn 10USD – khoảng 230 ngàn đồng), với số lượng đó, đủ cho bạn viết 500 đến cả 1000 bài viết.

6 thoughts on “Hướng dẫn sử dụng plugin nén ảnh ShortPixel cho WordPress”

  1. Rất cám ơn bạn Anh đã chia sẽ bài viết cực kỳ chi tiết này. Mình cũng vừa mới cài nó và hy vọng nó sẽ hoạt động tốt trên site của mình.
    Nó rất phù hợp với blogger viết không quá 10 bài trên tháng như mình, 100 ảnh 1 tháng cũng không phải là ít

  2. Cảm ơn về bài viết của anh nhé, em cũng vừa cài xong 🙂 có gì không hiểu em hỏi anh được không ạ?

      1. :(( Huhu anh ui, em cài rùi mà nó báo ko dùng nữa vì hạn ảnh đến mức rùi ý. 🙁 mà em tưởng mỗi tháng được 100 ảnh ạ 🙁 huhu sao tháng sau nó không được nữa ak hay tổng chỉ đc 100 ảnh miễn phí ạ

Leave a Comment

Your email address will not be published. Required fields are marked *