5 Cách Tối Ưu Hoá Hình Ảnh Tốt Nhất 2019

Hình ảnh trong bài viết là một trong những nguyên nhân khiến tốc độ tải website bị ảnh hưởng. Giải pháp ở đây là chúng ta nên loại bỏ hết những hình ảnh nặng.

Ý mình không phải là bỏ hết tất cả hình ảnh trong bài viết ra mà là phải chỉnh kích thước hình ảnh nhỏ lại và giúp website tải nhanh hơn.

Chào bạn, mình là Bảo Trần và trong bài viết này, mình sẽ chỉ cho các bạn tối ưu hóa hình ảnh để giảm dung lượng website, cũng như tăng trải nghiệm người dùng nhé!

Giảm dung lượng hình ảnh là cách tốt nhất để tăng tốc độ website
Giảm dung lượng hình ảnh là cách tốt nhất để tăng tốc độ website

1. Tối ưu hóa với Plugin WP Smush

Một trong những cách mình hay làm nhất đó chính là sử dụng plugin, nghe đơn giản phải không nào? Đúng rồi đấy, chỉ cần cài plugin vào và phần còn lại để nó lo liệu hết.

Tuy nhiên, hiện nay hầu hết các plugin tối ưu hóa hình ảnh đều giới hạn lại dung lượng sử dụng. Buộc bạn phải mua thêm mới có thể tối ưu hóa hình ảnh tiếp và giá của chúng thì … ĐẮT VÃI.

Trong đó mình thấy WP Smush tuy có giới hạn, nhưng vẫn “đủ xài” đối với kho thư viện của mình (hơn 300 hình).

Bây giờ mình sẽ hướng dẫn bạn cài WP Smush nhé!

Khi bạn đã cài plugin này vào WordPress, vào mục Smush ở bên thanh công cụ bên trái. Sau đó nó sẽ hiện ra như này:

Phần này bạn bấm BEGIN SETUP, sau đó cứ tiếp tục Next cho đến hình dưới:

Mình sẽ giải thích những phần của Smush sau khi bấm BEGIN SETUP.

  • Automatic Compression: Tự động tối ưu hóa hình ảnh khi bạn tải ảnh lên. thông thường mình sẽ bật tùy chọn này. Đối với một số trường hợp, site chủ yếu là hình ảnh thì nên tắt nó đi để cho ảnh đẹp toàn diện. <- Tùy chọn
  • EXIF Metadata: Loại bỏ ngày tháng, địa điểm, … trong bức ảnh để giảm dung lượng. <- Nên bật
  • Lazy Load: Trì hoản tải hình ảnh không xuất hiện trên màn hình, chỉ nên bật khi bạn thấy hợp với site của bạn. Mình sẽ nói cụ thể ở phần tiếp theo <- Tùy chọn
  • Usage Data: Cho phép Smush thu thập dữ liệu tối ưu hóa hình ảnh, nếu bị lỗi Smush sẽ khắc phục trong phiên bản tiếp theo. <- Nên bật

Sau khi cài đặt xong, Smush sẽ tự động check hết tất cả hình ảnh của bạn. Nếu bạn muốn nén tất cả ảnh trong thư việc bấm vào nút “BULK SMUSH NOW”.

Đồng thời Smush cũng cho phép bạn nén từng ảnh trong mục thư viện.

Ngoài ra, Smush còn cho bạn thử dùng Smush Pro 30 ngày. Mình chưa dùng vì đăng ký có vẻ rườm rà, nếu bạn muốn thì nên thử xem sao.

Một số tính năng nổi bật của Smush Pro:

  • Nén hình ảnh nhẹ gấp 2 lần mà không gây vỡ ảnh với chế độ thông minh của Smush.
  • Hỗ trợ định dạng WebP.
  • Không giới hạn nén ảnh.
  • … vân vân và mây mây.

 

Đăng ký miễn phí Smush Pro trong 30 ngày
Đăng ký miễn phí Smush Pro trong 30 ngày

2. Giảm dung lượng ảnh 40-70% khi sử dụng định dạng JPG

Trước khi tải trên website cách giảm dung lượng tốt nhất là chuyển sang định dạng JPG (JPG 2000), tuy nhiên không có gì là hoàn hảo cả.

Mình phải chấp nhận nó không đầy đủ màu sắc và sống động như PNG, thông thường mình chỉ chuyển những ảnh cần thiết. Thí dụ ảnh phong cảnh, chân dung thì không nên chuyển sang định dạng JPG vì nó sẽ làm mất vẻ đẹp vốn có của nó.

Đây là kết quả mà mình thử nghiệm khi sử dụng Photoshop CC 2019 để nén:

PNG 770x350 205Kb
PNG 770×350 205Kb
JPG 770x350 84Kb
JPG 770×350 84Kb

Bạn thấy hình ảnh ở dưới vẫn sắc nét, vừa đủ nhưng dung lượng giảm rất nhiều luôn đúng không? JPG ở trên mình để quality 9, bạn có thể để 7 nếu muốn giảm nữa mắc dù nó hơi vỡ ảnh một chút.

Vậy nên lựa chọn ảnh mà nén cho phù hợp với cách mà bạn truyền tải cho người dùng nhé!

3. Nén ảnh nhờ Adobe Photoshop Cs6, Cc 2019

Khi dùng photoshop để chỉnh hình ảnh, mọi người thường dùng định dạng PNG để lưu hình ảnh đúng là nó đẹp thật, không bị vỡ ảnh các kiểu nhưng bù lại nó lại khiến host của bạn phải gánh một lượng lớn dung lượng từ hình ảnh. Buộc nó phải có băng thông cao và tốt, tuy nhiên không phải “Share Hosting” nào cũng có băng thông tốt, vì thường Share Hosting sẽ chia ra cho nhiều Host khác nữa.

Bạn nên lưu ảnh dưới định dạng JPG khi dùng Photoshop:

Lưu ở dưới định dạng JPG sẽ tốt nhất cho website
Lưu ở dưới định dạng JPG sẽ tốt nhất cho website

Ở đây, thường thì mọi người cũng hay chọn max quality là 12, tuy nhiên mình chỉ giữ còn 9 để ảnh vừa “đủ dùng”, thậm chí có vài bức mình để còn 7 nếu nó không quá thực sự cần thiết.

Giảm chật lượng ảnh để tăng tốc website
Giảm chất lượng ảnh để tăng tốc website

4. Loại bỏ bớt ảnh cắt của WordPress, Theme và Plugin

WordPress là một nền tảng giúp xây dựng website rất tốt, chính vì rất tốt nên các nhà phát triển của WordPress đã nghĩ ra một vài tính năng khá là dư thừa đối với mình. Tính năng cắt ảnh này mình nghĩ sẽ rất hữu ích nếu như website của bạn chuyên về ảnh, còn về dạng Blog như Blogcasestudy thì lại gây ra khá nhiều rắc rối.

  • Gây nặng Hosting, khi đã chứa một ảnh gốc còn phải chứa thêm bao nhiêu ảnh nhỏ.
  • Nhiều lúc gây lỗi thumbnail, ảnh gốc rõ đẹp nó cắt bé tẹo làm cái thumbnail bài viết xấu òm.
  • Khi tải trang buộc phải thêm những ảnh nhỏ kèm theo ảnh gốc.
Nhiều URL thừa từ ảnh cắt của WordPress
Nhiều URL thừa từ ảnh cắt của WordPress

Để loại bỏ chúng, bạn vào “Cài đặt -> Thư viện -> Chỉnh tất cả thành 0 -> Lưu thay đổi”.

Loại bỏ ảnh cắt của WordPress
Loại bỏ ảnh cắt của WordPress

Đến đây những ảnh mới bạn tải lên sẽ không tạo ra thêm những ảnh nhỏ nữa, tuy nhiên ảnh cũ vẫn còn. Bây giờ chúng ta phải cài đặt thêm plugin Regeneration Thumbnails để xóa những ảnh cũ.

Sau khi cài đặt xong, bấm vào “Công cụ -> Regenerate Thumbnails” và tick vào ô “Delete thumbnail files for old unregistered …”, tiếp theo bấm vào “Regenerate Thumbnails For All”

Xóa toàn bộ ảnh cắt gây nặng website
Xóa toàn bộ ảnh cắt gây nặng website

Đợi một lát, nó sẽ xóa toàn bộ ảnh cắt cũ.

Tuy nhiên, không phải chỉ WordPress mà Theme hay Plugin cũng tạo ra những ảnh nhỏ tương tự. Với trường hợp của mình, theme tạo ra khá nhiều ảnh cắt cho nên mình phải xóa chúng để cho nhẹ. Giao diện -> Sửa giao diện -> function.php -> Tìm kiếm từ khóa (Ctrl + F) -> seacrh từ “add_image_size” hoặc “set_post_thumbnail_size” -> Xóa toàn bộ chúng nó đi và lưu lại.

Sau đó quay trở lại Regenerate Thumbnails để xóa hết toàn bộ ảnh cắt của Theme.

Xóa code ảnh cắt trong function của giao diện
Xóa code ảnh cắt trong function của giao diện

5. Sử dụng Lazyload để giảm bớt dung lượng site

Lazyload theo cách dịch của mình nghĩa là một chế độ tải lười biếng, tức là chỉ khi bạn tác động tới nó, nó mới tải. Việc này khiến cho site nhẹ hơn, nhưng cũng có một chút rắc rối nếu site bạn toàn là hình ảnh.

Thực tế, bên nước ngoài họ khuyên rằng không nên sử dụng tính năng này, vì “tải lười biếng đồng nghĩa với việc tải trang chậm”. Mình thấy rất đúng, vì bên nước ngoài hạ tầng mạng của họ MẠNH!

Còn với cá nhân mình, hay nói chung hơn là đối với hạ tầng mạng ở VN, bạn cũng biết rồi đấy mạng VN mình củ chuối kinh khủng, tối ngày đứt cáp lên xuống.

Chính vì thế, việc giảm đi một dung lượng lớn từ ảnh sẽ giúp tăng tốc cho website rất nhiều, tăng trải nghiệm người dùng đến với trang hơn.

Nếu trang bạn theo dạng Blog, họ không kéo quá nhanh thì tính năng này rất hữu ích, còn đối với site mà toàn là hình ảnh thì mình nghĩ không nên sử dụng.

Trong phần trên mình đã chỉ bạn bật Lazyload của Smush rồi đó, nhớ không nào? Bây giờ vào Smush -> Lazyload và tùy chỉnh những hình ảnh và trang mà bạn muốn “chế độ tải lười” nhé!

Sử dụng tính năng Lazyload để giảm bớt lượt tải trang
Sử dụng tính năng Lazyload để giảm bớt lượt tải trang

Kết

Hi vọng với những cách trên đây, mình đã giúp các bạn biết cách nén ảnh tốt nhất. Từ đó giúp site của bạn chạy trơn tru nhất có thể, đối với mình ảnh vừa đủ nhìn là được đừng chú trọng vào chất lượng mà quên đi nhiều thứ khác các bạn nhé!

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

One Response

Write a Comment