Hình ảnh là một trong những yếu tố quan trọng nhất của một trang web tử tế. Chúng thu hút sự chú ý của khách truy cập, giúp nội dung của bạn dễ chia sẻ hơn và buộc người dùng thực hiện hành động (chẳng hạn như mua sản phẩm của bạn).
Tuy nhiên, việc thêm hình ảnh có độ phân giải cao hoặc những hình ảnh có kích thước tệp lớn, có thể làm cho trang web của bạn chậm và mang lại trải nghiệm người dùng kém cho người dùng cuối. Thực sự không có lý do gì để cung cấp trải nghiệm người dùng kém với rất nhiều công cụ có thể giúp bạn nén hình ảnh của mình mà không làm giảm chất lượng đáng kể và thậm chí tự động hóa quy trình cho bạn.
Trong bài viết này, tôi sẽ chỉ cho bạn nhiều cách tối ưu hóa hình ảnh để sử dụng trên web và cụ thể hơn là trên các trang web WordPress.
Chọn định dạng tệp phù hợp
JPEG và PNG là hai trong số các định dạng tệp hình ảnh phổ biến nhất trên Web. JPEG là định dạng nén thường được sử dụng cho ảnh có nhiều màu, trong khi PNG tốt hơn rất nhiều cho ảnh có văn bản, hình minh họa, biểu trưng, ảnh chụp màn hình và hình ảnh trong suốt. Một định dạng phổ biến khác là GIF phù hợp nhất với hình ảnh có ít màu hoặc hình ảnh có vùng lớn cùng màu. Ngày nay, GIF chủ yếu được sử dụng cho các hình ảnh động trên Web.
Hầu hết các phần mềm chỉnh sửa hình ảnh đều cho phép bạn lưu tệp của mình ở nhiều định dạng khác nhau. Chọn đúng định dạng sẽ đảm bảo rằng bạn có được hình ảnh sắc nét nhất có thể, điều này sẽ nâng cao trải nghiệm người dùng trên trang web của bạn.
Sử dụng đúng kích thước và độ phân giải
Bạn cần phải cẩn thận khi thêm hình ảnh vào trang web của mình. Đây được coi là phương pháp hay nhất để lưu hình ảnh của bạn ở cùng chiều rộng và chiều cao mà nó sẽ xuất hiện trên trang web và ở kích thước tệp nhỏ nhất có thể mà không làm giảm chất lượng.
Nén hình ảnh của bạn trước khi tải lên
Có rất nhiều công cụ sẽ giúp bạn nén hình ảnh của mình trước khi tải chúng lên máy chủ. Ví dụ, Photoshop có tính năng “lưu cho Web &thiết bị” tiện dụng cho phép bạn chọn cài đặt định dạng và chất lượng. Bạn cũng sẽ thấy kích thước tệp cho hình ảnh của mình khi bạn áp dụng một cài đặt cụ thể. Các công cụ thao tác hình ảnh khác như GIMP cung cấp các tùy chọn tương tự.
Các công cụ nén trực tuyến cũng tồn tại, chẳng hạn như Picresize, Kraken.io và TinyPNG, nơi bạn có thể tải lên hình ảnh có độ phân giải cao, tối ưu hóa chúng và tải xuống định dạng nén để sử dụng trên Web.
Nén hình ảnh sau khi tải lên
Một số plugin tồn tại cho mục đích này và một trong những plugin phổ biến hơn là WP Smush giúp tối ưu hóa các định dạng JPEG, PNG hoặc GIF riêng lẻ hoặc hàng loạt bằng cách sử dụng các máy chủ chuyên dụng. Nó chỉ đơn giản là loại bỏ siêu dữ liệu và các màu không sử dụng khỏi tệp để giảm kích thước tệp. Với phiên bản miễn phí, bạn bị giới hạn hình ảnh 1MB trở xuống, nhưng bạn có thể loại bỏ giới hạn này bằng cách nâng cấp lên phiên bản Pro cho phép tối đa 5MB.
Một plugin tuyệt vời khác có chức năng tương tự là EWWW Image Optimizer có thể giúp bạn chuyển đổi hình ảnh của mình sang định dạng tạo ra kích thước tệp thấp nhất có thể.
Có những cái khác có sẵn trên kho lưu trữ WordPress, vì vậy hãy thoải mái khám phá. Đó là hai cái tôi đã sử dụng trước đây và cả hai đều hoạt động tốt, vì vậy chúng cũng đủ tốt cho bạn.
Gắn thẻ hình ảnh của bạn đúng cách
Ngoài việc thay đổi kích thước hình ảnh của bạn, một cách tuyệt vời để cung cấp trải nghiệm tốt trên trang web của bạn là gắn thẻ hình ảnh của bạn đúng cách. Điều này có nghĩa là luôn sử dụng “ alt ”Trong trường hợp không thể tải hình ảnh của bạn hoặc cho trình đọc màn hình để khách truy cập của bạn sẽ nhận được mô tả dựa trên văn bản của hình ảnh. Nó cũng giúp các công cụ tìm kiếm lập chỉ mục hình ảnh trên trang web của bạn tốt hơn và có thể mang về cho bạn một lượng truy cập tìm kiếm đáng kể.
Thêm chú thích khi cần thiết là một cách tuyệt vời khác để giúp khách truy cập trang web của bạn hiểu hình ảnh tốt hơn. Cung cấp thẻ tiêu đề mô tả thích hợp và tên tệp hình ảnh cũng giúp theo cách tương tự. Vì vậy, thay vì lưu hình ảnh của bạn dưới dạng “ FXSCSUYE.jpg, ”Sử dụng tiêu đề và tên mô tả với các từ khóa có liên quan đến chủ đề và trang web của bạn. Điều này cũng tốt từ quan điểm SEO.
Tải chậm
Lazy Loading là một kỹ thuật được nhiều trang web sử dụng để tiết kiệm băng thông bằng cách chỉ tải hình ảnh khi người dùng cuộn đến khung xem của hình ảnh. Một vài hình ảnh đầu tiên sẽ tải ngay lập tức, nhưng những hình ảnh khác sẽ đợi cho đến khi người dùng ở gần hình ảnh đó trước khi tải. Thêm tính năng này vào trang web của bạn sẽ tiết kiệm băng thông cho bạn và người dùng của bạn và cải thiện tốc độ của các trang web của bạn. BJ Lazy Load là một plugin tuyệt vời để thêm Lazy Loading vào trang web WordPress của bạn.
Sử dụng Mạng phân chia nội dung
Sử dụng Mạng phân phối nội dung (CDN) sẽ giảm tải đáng kể trên máy chủ của bạn và tăng hiệu suất trang web của bạn. Một CDN sẽ chỉ phục vụ tài nguyên từ máy chủ gần nhất với vị trí của người dùng yêu cầu nó. Ví dụ:nếu một khách đến từ Bắc Kinh yêu cầu một hình ảnh và CDN bạn đang sử dụng có máy chủ đặt ở Seoul và Sydney, thì hình ảnh sẽ được cung cấp từ máy chủ ở Seoul.
MaxCDN là một CDN được đánh giá cao mà bạn có thể dùng thử, ngoài ra còn có những CDN khác như CloudFlare, CDN.net, v.v.
Kết luận
Tối ưu hóa hình ảnh để sử dụng trên Web là một trong những cách lớn nhất để cải thiện thời gian tải trang và trải nghiệm người dùng tổng thể của trang web của bạn. Nếu bạn có bất kỳ kỹ thuật tối ưu hóa nào khác mà bạn muốn chia sẻ, hãy làm như vậy trong phần nhận xét bên dưới.