Categories Nén ảnh

4 cấp độ tối ưu hóa ảnh trong WordPress

Các cấp độ tối ưu ảnh

Tối ưu hóa ảnh rất quan trọng trong việc cải thiện tốc độ website WordPress, hôm nay chúng ta sẽ đi vào chi tiết từng cấp độ.


Tại sao bạn cần tối ưu hóa ảnh?

dung lượng của các tài nguyên khác nhau
Dung lượng trung bình trên web của từng kiểu tài nguyên

Tôi hy vọng bức hình trên cung cấp cho bạn một vài cảm nhận.

Khi công nghệ phát triển, chất lượng thiết bị chụp hình đã được cải thiện rất nhiều. Thậm chí các dòng điện thoại mới như iPhone, OnePlus có khả năng chụp ảnh ở độ phân giải lên tới 4032 x 3024 pixel, và kèm với đó là kích cỡ vài MB. Trong khi các thiết bị thông thường như máy bàn có độ rộng 1500-2000 pixel và di động có độ rộng 800 pixel.

Tối ưu ảnh có thể giúp bạn giảm 50 – 70% tổng dung lượng trang và tăng tốc độ tải lên 2 đến 3 lần.


1. Sử dụng định dạng ảnh thế hệ mới

Bạn chắc hẳn đã biết các định dạng ảnh như JPEG, PNG và GIF. Nhưng chúng không phải là các lựa chọn duy nhất hiện có, cũng như không phải là loại tốt nhất.

1.1 WebP

WebP là định dạng ảnh kiểu mới được phát triển bởi Google. Bất kỳ định dạng ảnh nào gồm JPEG, PNG, GIF đều có thể chuyển sang định dạng WebP được, kích cỡ có thể giảm đến 90%.

Dưới đây là ví dụ so sánh:

Ảnh JPG (58KB, đã nén) Ảnh WebP (37KB)
ảnh mèo JPG ảnh mèo WebP

Như bạn có thể thấy, cùng một ảnh khi chuyển sang định dạng WebP đã giảm được 34% dung lượng.

Mặc dù WebP là định dạng còn khá mới, nó đã được hỗ trợ bởi hầu hết các trình duyệt hiện đại.

trình duyệt hỗ trợ ảnh WebP

Lưu ý: Hiện nay vẫn có khoảng 20% người dùng vẫn sử dụng trình duyệt không hỗ trợ WebP (nổi bật là iOS của iPhone / dòng điện thoại cao cấp rất được ưa chuộng trên thế giới cũng như Việt Nam). Vì thế bạn phải phân phối WebP dưới dạng có điều kiện. Tức là trình duyệt nào hỗ trợ mới phân phối, còn không bạn vẫn phải sử dụng định dạng ảnh thông thường, nói cách khác website của bạn vừa phải có định dạng .webp và các định dạng khác để phòng.

Triển khai WebP trong WordPress

Cách dễ dàng để phân phối định dạng ảnh WebP là thông qua CDN (khuyên dùng, tôi sẽ thảo luận kỹ bên dưới sau). Nhưng nếu vì một lý do nào đó mà bạn vẫn chưa sử dụng CDN, bạn có thể cài đặt plugin WebP Express để đảm trách nhiệm vụ này.

1.2 SVG

SVG là định dạng ảnh vector, trong khi JPEG, PNG, GIF, và WebP là định dạng ảnh raster. Nếu bạn chưa biết về ảnh SVG thì đây là định dạng ảnh được thể hiện dưới dạng mã. Trình duyệt tạo lên hình ảnh dựa vào mã này. Nó không bị suy giảm chất lượng khi bạn phóng to.

Ảnh SVG
Dù bạn phóng to như thế nào, ảnh này vẫn giữ nguyên chất lượng & cũng chỉ có kích cỡ chưa đến 0,5 KB

Ảnh SVG là lý tưởng để sử dụng cho icon, logo, bảng biểu minh họa, infographic, vân vân. Không giống như WebP, không phải tất cả các ảnh đều có thể chuyển thành SVG được (về mặt kỹ thuật thì OK thôi, nhưng nó sẽ tạo ra bức ảnh có kích cỡ rất lớn). Ảnh SVG được vẽ bằng Adobe Illustrator, Sketch hoặc các phần mềm tương tự.

Triển khai SVG trong WordPress

Theo mặc định, SVG không được hỗ trợ trong WordPress. Bạn có thể cài đặt SVG Support để bật tính năng này.

Đó là tất cả mọi thứ mà bạn cần, giờ bạn chỉ việc tải lên ảnh .svg như ảnh thông thường!

1.3 Base64 / Ảnh nội tuyến

Bất cứ ảnh nào được thể hiện dưới dạng 64 ký tự văn bản thì được gọi là ảnh base64. Khó hiểu đúng không ạ?

Bạn hãy nhìn vào mã ảnh để thấy sự khác biệt. Ảnh thông thường trong HTML trông giống như thế này:

<img src="https://example.com/logo.png" width="100px">

Còn dưới đây là ảnh base64:

<img src="data:image/png;base64,iVBORw0KGgoAA......==" width="100px">

Thay vì sử dụng URL, base64 là một chuỗi bắt đầu với dạng như sau: data:image/png;base64. Phần đầu tiên đại diện cho kiểu dữ liệu, còn các ký tự đằng sau dấu phẩy (“,”) đại diện cho ảnh của chúng ta.

Lợi thế so với cách sử dụng URL là dữ liệu cần thiết để kết xuất (render) ảnh đã có sẵn trong mã nguồn HTML, vì thế trình duyệt không cần tạo các yêu cầu HTTP bổ sung và cũng không cần tải file về.

Dưới đây là ảnh PNG:

Ảnh PNG – dung lượng 14KB

Còn đây là ảnh Base64:

Ảnh Base64 – dung lượng 17 KB

Ưu điểm:

  • Không làm gia tăng các yêu cầu HTTP để tải ảnh về
  • Kết xuất ảnh nhanh hơn
  • Lý tưởng cho các ảnh ở trên đường biên fold, logo, hoặc ảnh giữ chỗ (placeholder), vân vân

Nhược điểm:

  • Chuyển ảnh sang định dạng base64 có thể làm ảnh gia tăng kích cỡ lên 30%
  • Không thể cache phía trình duyệt được

Triển khai ảnh base64 nội tuyến trong WordPress

Bạn có thể chuyển bất cứ ảnh nào sang định dạng base64. Chỉ cần truy cập vào trang https://www.base64-image.de/ và tải ảnh của bạn lên. Sau khi chuyển đổi hoàn tất, bạn tick vào “copy code”.

Trong trình biên tập Gutenberg, bạn chọn ảnh và nhấn vào “Insert from URL” và paste đoạn mã mà bạn vừa copy vào. Thế là xong!

đưa ảnh base64 vào WordPress

2. Nén ảnh

Có một số thuật toán mã hóa ảnh có thể được dùng để nén ảnh, qua đó giúp giảm kích cỡ ảnh. Nó giúp tăng tốc website của bạn cũng như giúp tiết kiệm nhiều băng thông.

Dưới đây là ví dụ.

Đây là ảnh chưa nén:

Ảnh chưa nén - dung lượng khoảng 80KB
Ảnh chưa nén – dung lượng khoảng 80KB

Còn đây là ảnh đã nén:

Ảnh đã nén - dung lượng chỉ vào khoảng 30 KB
Ảnh đã nén – dung lượng chỉ vào khoảng 30 KB

Cả hai ảnh trên có cùng độ phân giải. Nhưng bạn có thể thấy kích cỡ đã được giảm từ 80KB xuống còn 30KB (62%).

Nếu bạn muốn tìm hiểu sâu hơn về nén ảnh, hãy tham khảo bài viết sau của KeyCDN (tiếng Anh).

Nén ảnh trong WordPress

A. Sử dụng Plugin

một số plugin nén ảnh rất chất lượng. Plugin ưa thích của tôi là ShortPixel. ShortPixel gửi từng ảnh đến máy chủ của họ và thực hiện kỹ thuật nén ảnh tốt nhất hiện có. Họ hỗ trợ kiểu nén mất chất lượng, glossy và nén không mất chất lượng. Nó cũng có thể tạo định dạng ảnh WebP.

Nén ảnh bởi ShotPixel
  • ShortPixel (khuyên dùng) – Có khả năng nén tốt nhất, miễn phí 100 ảnh/tháng.
  • reSmush.it – Hoàn toàn miễn phí với các ảnh có kích cỡ từ 5MB trở xuống.
  • Optimole – Miễn phí đến 1GB ảnh mỗi tháng.

B. Không sử dụng plugin

Có một số công cụ trực tuyến giúp bạn nén ảnh. Công cụ tôi thường dùng là compressor.io. Nó nhanh, miễn phí, có cả kiểu nén mất chất lượng và không mất chất lượng và hỗ trợ tất cả các định dạng.

nén ảnh bằng công cụ trực tuyến compressor.io

3. Ảnh đáp ứng

Giao diện của bạn có thể có khả năng phản hồi (responsive), nhưng ảnh của bạn có thể không. Phân phối ảnh có chiều rộng 1500px cho thiết bị di động có chiều rộng 800px là sự phí phạm lớn!

Dưới đây là ví dụ. Cùng ảnh nhưng được phân phối ở hai kích cỡ khác nhau (bạn có thấy bất cứ sự khác biệt nào không).

Ảnh chụp màn hình từ ví dụ của WPSpeedMatters
Ảnh chụp màn hình từ ví dụ của WPSpeedMatters

Thường thì ảnh được thêm vào HTML như dưới đây:

<img src="kien-cang-800w.jpg" alt="Kiến càng">

Vấn đề với lối tiếp cận này là bất kể thiết bị người dùng có là gì đi chăng nữa (di động hay máy bàn), cùng một bức ảnh lớn sẽ được phân phối.

HTML hỗ trợ thuộc tính srcset cho các ảnh để nói với trình duyệt biết rằng ảnh nào cần tải dựa trên độ rộng của thiết bị/PPI.

Mã ảnh đi kèm srcset:

<img srcset="kien-cang-320w.jpg 320w,
             kien-cang-480w.jpg 480w,
             kien-cang-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="kien-cang-800w.jpg" alt="Kiến càng">

Bạn có thể kiểm tra xem giao diện của bạn có hỗ trợ srcset hay không bằng cách chuột phải vào bất cứ ảnh nào và chọn “Inspect Element”. Nó sẽ trông giống như thế này:

mã nguồn dành cho srcset

Nếu giao diện của tôi không hỗ trợ SRCSET?

Bạn có ba tùy chọn:

  • Yêu cầu người lập trình giao diện sửa nó!
  • Sử dụng plugin có khả năng thêm srcset vào, chẳng hạn như Flying Images.
  • Resize ảnh nhanh chóng thông qua CDN (tôi khuyên khích làm theo cách này, tôi sẽ nói rõ hơn ngay bên dưới).

4. Phân phối ảnh thông qua CDN

Bạn đã tối ưu mọi thứ có thể, gồm ảnh ở định dạng mới, nén, và thay đổi kích cỡ ảnh, vân vân. Nhưng nếu độ trễ mạng cao hoặc máy chủ chậm thì phải làm thế nào?

CDN là gì?

Nếu bạn mới nghe đến CDN thì phần này tôi sẽ giải thích để bạn hiểu rõ hơn. CDN chính là mạng phân phối nội dung được thiết kế nhằm phân phối các file tĩnh như ảnh. Họ sẽ sao lưu các ảnh của bạn trên hơn 100 máy chủ trên toàn cầu. Khi ai đó yêu cầu ảnh, nó sẽ được phân phối từ máy chủ gần nhất, vì thế giúp giảm độ trễ mạng.

Vị trí máy chủ của BunnyCDN

Cách chọn dịch vụ CDN cho ảnh

Có một số dịch vụ CDN miễn phí cũng như trả phí. Tuy nhiên, không phải tất cả đều có khả năng tốt trong việc phân phối ảnh.

Có một số yếu tố bạn cần kiểm tra trước khi lựa chọn một dịch vụ CDN nào đấy:

  • Nén ảnh nhanh chóng.
  • Thay đổi kích cỡ ảnh nhanh chóng.
  • Chuyển ảnh sang định dạng WebP nhanh chóng.

Nếu bạn sử dụng ShortPixel, họ có addon CDN thực hiện công việc này thông qua ShortPixel Adaptive Images.

Một dịch vụ khác mà tôi thích dùng là BunnyCDN, họ có khả năng tối ưu ảnh rất nhanh chóng.

Tối ưu ảnh của BunnyCDN

Bạn đang sử dụng Cloudflare? Cloudflare có chất lượng tốt. Nhưng bạn cần biết rằng họ không thực hiện bất cứ kiểu tối ưu hóa ảnh nào trong gói miễn phí cả. Nếu bạn đang dùng Cloudflare bản pro, bạn có thể tham khảo hướng dẫn cách dùng ở đây.

(Dịch từ bài viết: 4 Levels of Image Optimization in WordPress, tác giả: Gijo Varghese, trang wpspeedmatters)

Back to Top