MẪU KỆ TRƯNG BÀY SIÊU THỊ #12
Booth trưng bày mỹ phẩm Vedette
Cập nhật lần cuối vào ngày 01/03/2024 bởi Cty quảng cáo Minh Thành
Tăng tốc website cải thiện SEO với Shortpixel
Đăng ký và download:> 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:
API key sẽ được tạo tự động như thế này:
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:
A. Chất lượng ảnh sau 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ỏ
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
Đâ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
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
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
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ể
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
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
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
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
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
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
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
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
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
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ỡ
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:
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:
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):
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):
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):
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):
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):
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):
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):
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):
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):
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.
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.
Tham khảo thêm tại: https://chimcat.net/plugin-nen-anh-shortpixel/