Việc lưu trữ và quản lý file hình ảnh trên website sẽ không quá khó khăn nếu bạn chỉ có vài trăm tấm ảnh. Tuy nhiên, khi bạn nhận ra cần tối ưu hóa và quản lý chúng thì có thể đã muộn, gây ra nhiều khó khăn hơn.
Vì vậy, để giúp người mới hiểu rõ hơn về tính năng Media Library trên WordPress, mình đã viết một bài hướng dẫn đầy đủ về quản lý hình ảnh trên website.
I. Kiểm soát các size ảnh có trên website
1.1 Tìm hiểu size ảnh
Trong WordPress, để tối ưu hình ảnh hiển thị, hệ thống hỗ trợ chức năng tự động cắt một tấm ảnh thành nhiều kích thước khác nhau, mỗi kích thước sẽ được lưu dưới dạng một tấm ảnh riêng. Mặc định, WordPress có 3 kích thước ảnh như sau:
Và điều này có nghĩa là một tấm ảnh sẽ có 4 files khác nhau. Hãy cùng mở thư mục /wp-content/uploads ra mà xem nhé.
Vậy những kích thước ảnh này sẽ được sử dụng như thế nào?
Mặc định, WordPress tạo ra 3 kích thước ảnh bằng hàm add_image_size() với 3 key là:
Nếu theme của bạn có hàm gọi file media tương ứng với tên hoặc số kích thước của ảnh, thì ảnh sẽ tự động được lấy ra. Chẳng hạn, nếu muốn lấy ảnh kích thước dạng thumbnail, bạn sẽ sử dụng:
Ngoài ra khi chèn ảnh vào bài, bạn cũng có thể lựa chọn size cần chèn để tránh chèn các ảnh to qua làm bài viết tải lâu hơn.
Nhìn chung, chức năng này có ưu điểm là giúp website của bạn hiển thị ảnh gọn gàng hơn và tải nhanh hơn.
1.2 Xóa size ảnh
Tuy nhiên, nhược điểm của chức năng này là về lâu dài, khi tạo ra quá nhiều ảnh, nó sẽ tốn nhiều dung lượng ổ cứng hơn. Tôi từng gặp một trường hợp phải di chuyển dữ liệu WordPress từ máy chủ này sang máy chủ khác với dung lượng lên tới gần 30GB chỉ riêng cho ảnh.
Vậy làm thế nào để ngăn WordPress không tạo thêm ảnh nữa? Cách đơn giản nhất là vào Settings -> Media và đặt tất cả các thông số về 0 như trong hình dưới đây.
Đưa các tham số về 0 để tắt tự động sinh ra ảnh.
Nhưng điều đó chưa phải là tất cả. Nếu bạn cài thêm một số plugin khai báo kích thước ảnh mới, chúng sẽ tiếp tục tạo ra thêm ảnh, chẳng hạn như plugin NextGen Gallery hay Yet Another Related Posts. Vậy làm thế nào để ngăn chặn việc này? Hãy cài đặt plugin AJAX Thumbnail Rebuild.
Sau đó, truy cập vào phần Tools -> Rebuild Thumbnail, bạn sẽ thấy danh sách các key kích thước ảnh đang có trên website được hiển thị dưới dạng các ký tự in nghiêng.
Bạn chèn đoạn code sau vào file functions.php trong theme để vô hiệu hóa nó
Hãy nhớ thay đổi tên key của kích thước ảnh cho phù hợp với bạn và đặt mỗi kích thước ảnh trên một dòng unset. Từ bây giờ, khi bạn upload ảnh lên, nó sẽ không tự động cắt ra các kích thước mà bạn đã xóa nữa.
Vậy khi đã xóa kích thước ảnh, các file ảnh cũ của kích thước đó có bị xóa không? Câu trả lời đơn giản là không, nhưng bạn có thể tự xóa chúng. Hãy xem tiếp phần 1.3 để biết thêm chi tiết.
1.3 Xóa các ảnh không sử dụng
Ảnh không sử dụng ở đây nghĩa là file ảnh đó không được đính kèm vào bài viết nào cả. Để xóa các ảnh đó, bạn có thể sử dụng plugin miễn phí Media Cleaner
II. Tạo gallery ảnh trên WordPress
Mặc định, WordPress không chỉ cho phép bạn chèn từng tấm ảnh vào bài viết mà còn hỗ trợ tạo một gallery riêng, giúp hiển thị nhiều hình ảnh cùng lúc trong bài viết.
Để tạo gallery, bạn nhấn vào nút Add Media trong khung soạn thảo, chọn Create Gallery, sau đó chọn các tấm ảnh bạn muốn thêm vào gallery và nhấn nút Create New Gallery.
Sau khi tạo gallery, bạn có thể sắp xếp lại thứ tự các hình ảnh và nhấn nút Insert Gallery phía dưới để hoàn tất. Khi gallery được chèn vào bài viết, các ảnh sẽ hiển thị theo dạng này.
Hình ảnh hiển thị dạng grid.
Nếu bạn muốn có thêm hiệu ứng click vào sẽ mở hình ảnh với size lớn bằng popup thì cài thêm plugin Responsive Lightbox.
III. Tối ưu dung lượng hình ảnh
Hình ảnh trên web có thể có dung lượng và chất lượng vượt quá nhu cầu của bạn, nhưng bạn có thể giảm dung lượng hình ảnh mà không làm giảm chất lượng.
Để thực hiện điều này hoàn toàn tự động, bạn có thể cài đặt plugin EWWW Image Optimizer, một công cụ miễn phí hỗ trợ nén ảnh hàng loạt. Plugin này cũng tự động giảm dung lượng ảnh mỗi khi bạn upload ảnh lên bài viết.
Điểm nổi bật của plugin này là hỗ trợ nén ảnh thông qua dịch vụ đám mây của họ, điều này đặc biệt hữu ích nếu máy chủ của bạn không đủ mạnh để thực hiện việc nén. Khi sử dụng tính năng đám mây, bạn sẽ phải trả một khoản phí nhỏ hàng tháng, nhưng bù lại, tài nguyên của máy chủ sẽ không bị tiêu hao trong mỗi lần nén ảnh.
IV. Sửa ảnh trực tiếp trên WordPress
WordPress cung cấp nhiều tính năng cho phép bạn chỉnh sửa ảnh trực tiếp trên website, nhưng có thể nhiều người đã bỏ qua. Để sử dụng các chức năng này, hãy vào Media, chọn một tấm ảnh bất kỳ và nhấn Edit.
Tại đây, bạn có thể xoay ảnh, cắt ảnh hoặc thay đổi kích thước của ảnh.
Sau khi sửa xong và save lại, WordPress sẽ tự động xuất ra một tấm ảnh là kết quả sau khi chỉnh sửa.
V. Tăng tốc thời giạn load ảnh với cache
Hầu hết các hình ảnh trên website thường chỉ cần được upload hoặc xóa mà không cần chỉnh sửa thêm. Do đó, bạn nên thiết lập cache trình duyệt cho các file ảnh để cải thiện tốc độ truy cập của khách hàng trong lần truy cập thứ hai trở đi, nhờ vào việc cache đã được lưu trữ trên máy tính trong một khoảng thời gian nhất định.
Để thực hiện điều này trên host, bạn mở file .htaccess trong thư mục gốc của website và chèn đoạn mã sau vào đó:
Số 2592000 nghĩa là số giây sẽ được lưu lại trong cache của trình duyệt và nó sẽ tự làm mới sau quãng thời gian này. Bạn có thể đặt một con số khác lâu hơn.
Lời kết
Đó là những kinh nghiệm của tôi trong việc tối ưu hóa quy trình quản lý và sử dụng hình ảnh trên website WordPress, và hy vọng rằng chúng sẽ hữu ích cho bạn. Mặc dù lưu trữ hình ảnh trên host có thể tốn thêm băng thông và dung lượng, nhưng nó an toàn hơn so với việc sử dụng liên kết hình ảnh từ bên ngoài, vì bạn không thể đảm bảo rằng các ảnh đó sẽ không gặp vấn đề trong tương lai. Thêm vào đó, các cấu hình hosting hiện đại thường đủ khả năng để cung cấp dung lượng và băng thông cho một số lượng lớn hình ảnh, vì vậy bạn không cần phải lo lắng quá nhiều về vấn đề này.