Tối ưu hóa hình ảnh là một trong những cách giúp website bạn tải nhanh hơn, đem lại trải nghiệm tốt cho người dùng lẫn sự đánh giá cao từ các công cụ tìm kiếm như Google.
Hình ảnh được xem là nguyên nhân lớn khiến cho hầu hết website tải chậm, mặc dù tối ưu hóa hình ảnh thường được bỏ qua nhiều vì không nhiều người thấy được tầm quan trọng của kích thước hình ảnh.
Dưới đây mình sẽ hướng dẫn 5 cách tối ưu hóa hình ảnh giúp cho website tải nhanh hơn mà không cần phải thao tác phức tạp.
1. Tối ưu hóa hình ảnh 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.
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 2021 để nén:
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 2021
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:
Ở đâ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.
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.
Để 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”.
Đế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”
Đợ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.
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é!
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!
