Hình ảnh là một phần quan trọng không thể thiếu của một website, giúp bài viết của bạn thêm sinh động và hấp dẫn. Thế nhưng cũng thật không may, hình ảnh cũng khiến website trở nên nặng nề, tăng thời gian tải trang, ảnh hưởng đến trải nghiệm của người đọc và thứ hạng trên các công cụ tìm kiếm. Quá nhiều hình ảnh cũng làm tăng băng thông máy chủ một cách đáng kể. Trong bài viết này, mình sẽ trình bày cách tối ưu hình ảnh làm tăng tốc độ load website, tăng độ thân thiện với các công cụ tìm kiếm. 1. Tối ưu kích thước hình ảnh Nên chỉnh sửa kích thước hình ảnh cho đúng với kích thước mà bạn sử dụng trên web. Tránh trường hợp bạn up lên web 1 hình ảnh quá lớn để sử dụng cho một thumbnail nhỏ. Bạn hoàn toàn có thể làm việc này bằng các phần mềm chỉnh sửa ảnh như Photoshop hay đơn giản nhất là dùng Paint. 2. Nén dung lượng hình ảnh Việc tiếp theo bạn cần làm là nén dung lượng hình ảnh xuống thấp nhất có thể mà vẫn giữ nguyên chất lượng ảnh. Có thể làm điều này bằng Photoshop, chọn Save for web. Ngoài ra còn một số công cụ online như Kraken.io, TinyPNG hay Compressnow... Mình thì hay dùng Kraken.io vì nó có 2 chế độ nén: Lossy và Lossless. Với chế độ nén Lossless, chất lượng hình ảnh sau nén sẽ được giữ nguyên 100%, có thể nén đến 20% dung lượng. Còn nếu chọn Lossy thì hình ảnh có thể nén lên đến 90% mà chất lượng ảnh nhìn bằng mắt thường hầu như không thay đổi. 3. Một số plugin tối ưu hình ảnh cho Wordpress tốt nhất Với Wordpress có rất nhiều plugin giúp bạn tự động tối ưu chất lượng hình ảnh như WP Smush.It, EWWW Image Optimizer, Kraken.io... Trên phương diện free thì mình đánh giá cao nhất là 3 plugin: Kraken.io, TinyPNG và EWWW Image Optimizer. Nếu chỉ thuần túy xét đến chất lượng nén ảnh mà không quan tâm đến các chức năng khác thì TinyPNG và Kraken.io là lựa chọn tốt nhất. Còn nếu bạn muốn nhiều chức năng hơn thì EWWW Image Optimizer sẽ là lựa chọn hàng đầu. 4. Tăng tốc website với Lazy Load Khi một hình ảnh được load, website của bạn gửi 1 request tới máy chủ, càng nhiều requests thì tốc độ web càng chậm. Chỉ có 2 giải pháp để khắc phục. Một là giảm số requests xuống bằng cách hạn chế hoặc không sử dụng hình ảnh trong bài viết. Nhưng thực tế hình ảnh luôn là một phần không thể thiếu trong một bài viết, nhất là với các bài viết hướng dẫn hay site ảnh. Cách thứ hai, thay vì gửi đồng thời requests load ảnh ngay khi tải trang thì sẽ chỉ gửi yêu cầu khi cần thiết. Đó là ý nghĩa của Lazy Load. Lazy Load giúp đẩy nhanh tốc độ tải trang bằng cách tải nội dung bài viết trước và hình ảnh liên quan sau. Khi người dùng cuộn trang tới đâu thì hình ảnh được load hiện ra tới đó, hiệu ứng này rất đẹp mắt và làm cho web load nhanh hơn. Bạn có thể xem bài viết này để trải nghiệm hiệu ứng Lazy Load nhé. Nếu bạn có khả năng can thiệp vào máy chủ thì có thể cài đặt Module-Pagespeed, trong đó một filter Lazyload Images rất hay, bật trong file config như sau: Apache: Mã: Select All ModPagespeedEnableFilters lazyload_images Nginx: Mã: Select All pagespeed EnableFilters lazyload_images; Với Wordpress, bạn có thể sử dụng các plugin lazy load như: Lazy Load, BJ Lazy Load, jQuery Image Lazy Load WP, Lazy Widget Loader đều khá tốt. 5. Tối ưu hình ảnh cho seo - Đặt tên file ảnh chứa từ khóa seo, các từ được phân cách nhau bởi dấu "-". - Các ảnh phải có đầy đủ thẻ Alt, thẻ Title và mô tả được viết tối ưu. - Hình ảnh trong bài viết nên đặt ở vị trí có nhiều từ khóa vây quanh. Mình thì thích làm việc này bằng tay cho đúng ý, nếu không thì các bạn dùng plugin SEO Friendly Images. 6. Tổng kết Có thể nói tối ưu hình ảnh là phần rất quan trọng trong việc tối ưu tốc độ load website. Với phương châm hạn chế dùng plugin, giải pháp tốt nhất là bạn hãy tối ưu hình ảnh bằng thủ công trước khi upload lên web. Còn nếu bạn không muốn mất thời gian vào việc này thì lựa chọn 1 plugin chất lượng để sử dụng cũng là một điều tốt. Các bạn hãy áp dụng một trong các cách tối ưu hình ảnh tăng tốc độ website ở trên để cảm nhận sự khác biệt nhé!