Cách dễ dàng cung cấp hình ảnh đã thu phóng trong WordPress (Bước từng bước)

Bạn đã bao giờ truy cập một trang web và rời đi trong vài giây vì hình ảnh không' tải nhanh đủ? Đó' chính là những gì khách truy cập của bạn có thể đang trải nghiệm nếu bạn' không cung cấp hình ảnh đã được thu phóng trên trang WordPress của mình. 

Vấn đề này xảy ra khi hình ảnh của bạn quá lớn so với kích thước hiển thị, gây cho trang của bạn tải chậm và ảnh hưởng tiêu cực đến trải nghiệm người dùng.

Nhưng đừng lo lắng, chúng tôi đã sẵn sàng hỗ trợ bạn! Hãy làm theo hướng dẫn nhanh bên dưới để học cách phục vụ hình ảnh đã được thu phóng một cách dễ dàng!

Tại sao bạn phải phục vụ hình ảnh đã được thu phóng?

Hình ảnh đã thu phóng là những hình ảnh đã được thay đổi kích thước để phù hợp với các kích thước chính xác mà chúng sẽ được hiển thị trên một trang web. Điều này khác với các tệp tải lên gốc, thường có kích thước và độ phân giải lớn hơn nhiều.

Ví dụ, hình ảnh nổi bật gốc của bạn có thể là 4000 x 3000 pixel, nhưng website của bạn chỉ hiển thị nó ở kích thước 800 x 600 pixel. Nếu hình ảnh gốc được sử dụng thay vì phiên bản đã thu nhỏ, trang web của bạn sẽ tải chậm hơn.

Khi hình ảnh không được thu phóng đúng cách, trình duyệt phải thay đổi kích thước chúng một cách thủ công ngay lập tức. Điều này sẽ làm chậm tốc độ tải trang, buộc người dùng phải chờ và có thể làm tăng tỷ lệ thoát.

Việc sử dụng hình ảnh đã được thu phóng là quan trọng vì nếu không làm như vậy có thể dẫn đến một số vấn đề:

• Thời gian tải không cần thiết, vì người dùng phải tải xuống các tệp lớn hơn mức cần thiết.
• Hình ảnh bị pixel hoặc mờ, nếu hình ảnh quá nhỏ và bị kéo dài.
• Tăng thời gian xử lý, vì trình duyệt phải thay đổi kích thước hình ảnh ngay lập tức, gây ra độ trễ trong việc hiển thị nội dung.

Hướng dẫn từng bước

1. Sử dụng công cụ chỉnh sửa ảnh

Phương pháp này cung cấp việc thay đổi kích thước hình ảnh nhanh hơn bằng cách sử dụng các công cụ chỉnh sửa. Bạn có thể sử dụng các công cụ như Adobe Photoshop để tạo ra các hình ảnh được tỷ lệ đúng. Photoshop cho phép tùy chỉnh mở rộng để bạn có thể quyết định kích thước pixel dựa trên yêu cầu kích thước.

Nếu bạn đang tìm kiếm một lựa chọn miễn phí, các công cụ trực tuyến như PhotoPea là một tùy chọn tốt. Nhưng. cho hướng dẫn này, chúng tôi sẽ tập trung vào Photoshop vì các tính năng toàn diện của nó.

Để thay đổi kích thước hình ảnh trước khi tải lên, hãy làm theo hướng dẫn dưới đây:

• Mở hình ảnh của bạn trong Photoshop.
• Nhấp vào Image tab và chọn Image Size.

• Trong hộp thoại xuất hiện, thay đổi kích thước hình ảnh theo yêu cầu hiển thị của trang web. 

Ví dụ, nếu hình ảnh gốc của bạn là 1281 x 493 px và bạn muốn phóng to lên 3600 x 2400 px, hãy nhập các kích thước mới. 

• Thay đổi Độ phân giải thành 72 PPI cho việc sử dụng trên web, hoặc 300 PPI nếu bạn cần chất lượng in cao.
• Sau đó, chọn một phương pháp lấy mẫu lại. Hai tùy chọn phù hợp nhất cho tối ưu hoá web là:

• Nhấn OK để áp dụng các thay đổi. Hình ảnh của bạn đã được thay đổi kích thước.
• Để lưu hình ảnh, mở File tab và chọn Export.

• Nhấn Export As và chọn bất kỳ định dạng tệp nào và điều chỉnh cài đặt để đạt kích thước tệp nhỏ nhất có thể mà không mất quá nhiều chất lượng hình ảnh.

2. Tận dụng các kích thước ảnh tích hợp sẵn của WordPress's

Nếu bạn không muốn cài đặt bất kỳ phần mềm bên thứ ba nào, bạn có thể sử dụng trình chỉnh sửa hình ảnh tích hợp sẵn trong WordPress. Với công cụ này, bạn có thể thực hiện các tác vụ chỉnh sửa hình ảnh cơ bản như cắt, lật và thay đổi kích thước.

Bạn có thể truy cập tính năng này bằng cách nhấp vào bất kỳ hình ảnh nào trong bài viết hoặc thư viện media của bạn. Ngoài ra, bạn có thể định nghĩa kích thước hình ảnh tùy chỉnh bằng cách chỉnh sửa tệp functions.php trong themecủa bạn.

Để mọi thứ đơn giản, hãy bắt đầu với hướng dẫn cơ bản dưới đây:

• Tải lên hình ảnh của bạn lên bài đăng WordPress của bạn. 

• Chọn hình ảnh, sau đó nhấp vào Thay thế và chọn Mở Thư viện Media từ menu.

• Trong thanh bên, nhấp vào Chỉnh sửa hình ảnh.

• Bạn sẽ được chuyển đến trình chỉnh sửa hình ảnh. Nhấp vào Thu phóng để thay đổi kích thước một hình ảnh

• Nhập kích thước mới cho hình ảnh của bạn. Ví dụ, thay đổi từ 1198 × 744 px đến 805 x 500 px. Tỷ lệ khung hình được cố định, vì vậy giá trị còn lại sẽ tự động điều chỉnh dựa trên chiều rộng hoặc chiều cao bạn nhập.

• Nhấn Scale nút để áp dụng các thay đổi.
• Hình ảnh của bạn đã được thu phóng và sẵn sàng để sử dụng trong bài đăng của bạn.

3. Sử dụng các plugin

• Cài đặt và kích hoạt WP Meta SEO trên trang WordPress của bạn.

• Từ bảng điều khiển WordPress của bạn, chuyển đến WP Meta SEO > Trình chỉnh sửa hình ảnh.

• Mở cài đặt Image SEO & HTML Resize.

• Bật tùy chọn Dynamic Image Resizing để cho phép WP Meta SEO tự động thay đổi kích thước hình ảnh dựa trên kích thước hiển thị của chúng.

• Xác định giá trị chiều rộng và chiều cao tối đa để kiểm soát cách hình ảnh được thay đổi kích thước ở phía người dùng.

Khi được bật, WP Meta SEO sẽ tự động điều chỉnh kích thước hình ảnh khi chúng được hiển thị trên trang của bạn, đảm bảo kích thước hình ảnh tối ưu mà không cần can thiệp thủ công. Cách tiếp cận này cải thiện tốc độ trang, nâng cao hiệu suất SEO và cung cấp trải nghiệm người dùng tốt hơn—đặc biệt đối với các trang web chứa nhiều hình ảnh websites. 

Để biết thêm chi tiết, bạn có thể khám phá tài liệu chính thức và tổng quan tính năng:

• WP Meta SEO Tính năng SEO hình ảnh & Thu phóng HTML
• Động Tài liệu về thay đổi kích thước hình ảnh

4. Triển khai hình ảnh đáp ứng bằng cách sử dụng thuộc tính srcset

Thuộc tính srcset được sử dụng trong thẻ của HTML để cung cấp các nguồn ảnh khác nhau cho các độ phân giải màn hình đa dạng. Khi thêm thuộc tính này, trình duyệt có thể chọn ảnh phù hợp nhất dựa trên thiết bị của người dùng.

Ví dụ, nếu người dùng truy cập website của bạn trên thiết bị di động có màn hình độ phân giải thấp, trình duyệt sẽ tải một hình ảnh độ phân giải thấp hơn để cung cấp trải nghiệm mượt mà hơn.

Nếu bạn muốn biết cách phục vụ hình ảnh đã thu phóng một cách thủ công, hãy làm theo các hướng dẫn dưới đây:

• Mở tệp HTML của website's bằng trình soạn thảo mã của bạn.
• Định vị thẻ cho hình ảnh bạn muốn tối ưu hóa.

• Chỉnh sửa thẻ và thêm thuộc tính srcset, như trong hình ảnh. 

Trong ví dụ này, 100w và 400w cho biết độ rộng thực tế của mỗi hình ảnh. Trình duyệt sẽ sử dụng thông tin này để quyết định hình ảnh nào sẽ tải cho thiết bị của người dùng'.

• Lưu các thay đổi và tải lại website của bạn để xem kết quả.

Cách xác định hình ảnh chưa được thu phóng

Sau khi học cách tối ưu hóa hình ảnh, việc xác định hình ảnh nào vẫn cần được thu phóng và hình ảnh nào đã được tối ưu cũng rất quan trọng.

Có hai cách phổ biến để kiểm tra bất kỳ hình ảnh chưa được thu phóng nào, hoặc bằng cách sử dụng công cụ hoặc thực hiện kiểm tra định kỳ trên trang web. Hãy làm theo hướng dẫn dưới đây:

1. Sử dụng Google PageSpeed Insights

Đây là một công cụ thiết yếu cung cấp các đề xuất để giúp làm cho website của bạn nhanh hơn. Các đề xuất này được tạo ra thông qua phân tích sâu bằng Google Lighthouse. Một đề xuất phổ biến là điều chỉnh kích thước đúng cho bất kỳ hình ảnh nào được đánh dấu là chưa được thu phóng.

Để thực hiện kiểm tra nhanh, bạn có thể làm theo hướng dẫn dưới đây:

• Mở Google PageSpeed Insight tại https://pagespeed.web.dev.

• Dán đầy đủ URL của trang web của bạn vào trường nhập liệu.
• Nhấp Analyze để bắt đầu quá trình.
• Chờ cho nó hoàn thành. PSI sẽ sau đó cung cấp cho bạn báo cáo hiệu suất.
• Cuộn xuống để tìm mục được gắn nhãn Kích thước hình ảnh đúng.
• Nếu có, bạn sẽ thấy danh sách các hình ảnh chưa được thu phóng được tìm thấy trên trang web của bạn.

Nếu một trong các hình ảnh của bạn được đánh dấu là chưa thu phóng, Google PageSpeed Insights có thể đưa ra một số đề xuất, bao gồm:

• Phục vụ hình ảnh ở định dạng thế hệ mới, chẳng hạn như WebP, AVIF, JPEG XR, hoặc JPEG2000.
• Thay đổi kích thước hình ảnh một cách chính xác để đáp ứng các yêu cầu kích thước khác nhau, chẳng hạn thay đổi kích thước thành 1000 x 1000 px cho trang chi tiết sản phẩm, hoặc 400 x 400 px cho trang danh sách sản phẩm.
• Sử dụng lazy loading, vì vậy chỉ những hình ảnh hiển thị trên màn hình của user's được tải ngay lập tức.

2. Thực hiện kiểm tra định kỳ trang web

Thực hiện các cuộc kiểm tra trang web định kỳ cung cấp cho bạn những hiểu biết sâu sắc về sức khỏe và hiệu suất của site's.

Khi kiểm tra, hãy cố gắng ưu tiên xem xét kiến trúc trang web và trải nghiệm người dùng của bạn để phát hiện bất kỳ vấn đề tiềm ẩn nào.

Quá trình này cũng có thể phát hiện các cơ hội tối ưu hóa hình ảnh. Hãy chắc chắn kiểm tra trang web của bạn trên các thiết bị khác nhau, như điện thoại di động, máy tính bảng và máy tính để bàn, nhằm đảm bảo trải nghiệm nhất quán.

Ngoài ra, hãy chú ý xem hình ảnh có được thu phóng đúng không. Nếu không, đừng quên làm theo hướng dẫn ở trên.

Kết luận

Việc sử dụng hình ảnh đã được thu phóng là cần thiết để tối ưu hiệu suất trang web, đặc biệt trên các thiết bị di động. Nó giúp các trang của bạn tải nhanh hơn và giảm tỷ lệ thoát.

Tuy nhiên, việc mở rộng một số lượng lớn hình ảnh có thể tốn thời gian. Hãy cân nhắc sử dụng một plugin như WP Media Folder, cho phép bạn tự động thay đổi kích thước, sắp xếp và thay thế hình ảnh đồng thời đảm bảo chúng luôn được tối ưu cho hiệu suất.