Hướng dẫn kích thước ảnh wordpress

Kể từ phiên bản 5.3, WordPress bắt đầu giới hạn về kích thước hình ảnh tối đa khi upload. Cụ thể là những hình ảnh nào có chiều rộng/ cao lớn hơn 2560px thì sẽ bị scaled. Tức là WordPress sẽ tự động thay đổi kích thước ảnh đó, làm cho nó nhỏ hơn ảnh nguyên bản mà bạn upload lên.

Lý do WordPress làm việc này là vì họ cho rằng: những ảnh kích thước quá lớn là không thật sự cần thiết. Với giới hạn 2.560px (tối đa cho chiều rộng/ cao) như vậy là quá đủ. Việc thu nhỏ kích thước hình ảnh như vậy giúp trang web được nhẹ đi.

Sau nhiều năm giao lưu cùng anh em sử dụng WordPress, mình nhận thấy mọi người thường có xu hướng sử dụng hình ảnh có kích thước nhỏ. Hình ảnh đa phần có độ rộng dưới 800px, một số ít sẽ để độ rộng lớn hơn 1.024px. Ngoài ra, hình ảnh cũng được cố gắng nén sao cho nhẹ nhất có thể, nhằm tối ưu tốc độ tải trang. Nhưng hệ quả là ảnh của hầu hết các site thường khá MỜ.

Ảnh kích thước lớn, trước và sau khi upload lên website WordPress

Đối với các hướng dẫn bằng ảnh chụp màn hình mà mờ thì rất khó khăn để người đọc nhìn rõ và làm theo. Chính vì vậy, mình và một số anh em khác (bên Tinh Tế. vn là một ví dụ) có xu hướng sử dụng hình ảnh có độ nét cao để xem cho “sướng mắt” ^^.

Nhưng từ khi WordPress 5.3 ra mắt , đi kèm với tính năng “tự ý” thu nhỏ hình làm mình khá khó chịu, ảnh hiển thị trên web không còn là bản rõ nét nhất. Chính vì vậy mình đã tìm cách để ngăn việc tự ý thu nhỏ hình gốc này. Cụ thể thì anh em xem ở phần hướng dẫn thực hiện nhé !

KHUYẾN NGHỊ: Khi thực hiện điều này bạn sẽ đánh đổi tốc độ tải trang để lấy trải nghiệm xem hình ảnh nét & đẹp. Không nói chắc bạn cũng biết, ảnh nặng thì tốc độ tải trang sẽ lâu hơn rồi. Các SEOer hoặc các bạn chuyên tối ưu tốc độ website sẽ không thích điều này tí nào đâu ^^

Hướng dẫn cách ngăn WordPress “tự ý” thu nhỏ – scaled hình, làm giảm chất lượng ảnh gốc

Cách làm khá đơn giản, bạn chèn đoạn code dưới đây vào phía cuối cùng trong file functions.php của theme đang sử dụng là được.

// NGAN SCLAED ANH GOC
add_filter( 'big_image_size_threshold', '__return_false' );

Nếu bạn không muốn code chèn vào file functions.php bị mất sau khi cập nhật theme thì có thể dùng tham khảo bài viết: Thêm code vào theme function với plugin Functionality.

Bài này nội dung đơn giản vậy thôi, nếu bạn có điều gì đóng góp ý kiến hoặc thắc mắc thì cứ để lại bình luận bên dưới nhé, mình sẽ sớm phản hồi bạn.

Tối ưu hình ảnh cho Wordpress là một trong những công việc quan trọng của seo onpage, giúp cải thiện tốc độ tải trang và thứ hạng từ khóa trên Google.

Mặc định khi bạn tải một hình ảnh lên Wordpress nó sẽ tự động tạo thêm 3 phiên bản ảnh với các kích cỡ khác nhau. Bạn có thể tùy chỉnh các kích cỡ ảnh trong phần Settings (Cài đặt) → Media (Thư viện). Tại đây bạn sẽ thấy:

1. Ảnh thu nhỏ (Thumbnail Size)
2. Ảnh trung bình (Medium Size)
3. Ảnh lớn (Large Size)

Tuy nhiên, kể từ phiên bản Wordpress 4.4 thì các nhà phát triển đã âm thầm tích hợp thêm vào core của WP một phiên bản ảnh nữa với chiều rộng cố định là 768px, chiều cao tự động điều chỉnh theo tỷ lệ ảnh. Và thật buồn là bạn không nhìn thấy nó trong phần cài đặt thư viện ảnh ở trên.

Như vậy, mặc định với 1 hình ảnh (ví dụ: do-van-phuong.jpg) được upload lên website thì bạn sẽ thấy có thêm 4 kích thước ảnh khác (xem trong thư mục Uploads) như sau:

• do-van-phuong.jpg (ảnh gốc)
• do-van-phuong-150×150.jpg (ảnh Thumbnail)
• do-van-phuong-300×300.jpg (ảnh Medium)
• do-van-phuong-768×768.jpg
• do-van-phuong-1024×1024.jpg (ảnh Large)

Có thể bạn sẽ thắc mắc những phiên bản ảnh với các kích cỡ khác nhau này được tạo ra để làm gì? Wordpress có thực sự sử dụng chúng hay không?

Nội dung chính:

• 1 Tại sao cần nhiều kích cỡ ảnh như vậy?
• 2 Hướng dẫn tối ưu hình ảnh cho Wordpress
  • 2.1 1. Cài đặt kích thước ảnh khớp với vùng hiển thị trên website
  • 2.2 2. Loại bỏ size ảnh không sử dụng

Tại sao cần nhiều kích cỡ ảnh như vậy?

Rất đơn giản, chúng được sinh ra để giúp Wordpress tối ưu hơn. Cụ thể, Wordpress cho phép các nhà phát triển giao diện có thể tạo ra nhiều phiên bản ảnh với kích thước tùy ý để hiển thị tại các vị trí khác nhau trên website. Ví dụ:

• Ảnh Thumbnail (150px) dùng làm ảnh đại diện của bài viết;
• Ảnh Medium (300px) dùng làm ảnh đại diện chuyên mục (category);
• Ảnh Large (1024px) dùng để minh họa trong nội dung bài viết;

Bạn nghĩ mà xem, nếu bạn muốn sử dụng 1 hình ảnh minh họa thật rõ nét có kích thước lớn (chẳng hạn 1920px) nhưng cái khung website (chiều rộng website) lại chỉ có 980px thì sao nhỉ? Trình duyệt web sẽ tự điều chỉnh hình ảnh 1920px về độ rộng 980px để hiển thị vừa đẹp với website của bạn. Như vậy người dùng phải tải về hình ảnh 1920px nhưng họ chỉ xem được với kích thước 980px.

Thay vì chèn ảnh gốc, bạn có thể sử dụng phiên bản ảnh cỡ lớn Wordpress 4.40 thì người dùng cũng không thấy sự khác biệt nào cả. Vì ảnh Wordpress 4.40 cũng sẽ được trình duyệt điều chỉnh về 980px cho vừa với khung website.

Rõ ràng, việc sử dụng ảnh Wordpress 4.40 là tối ưu hơn hẳn. Vì hình ảnh Wordpress 4.40 dung lượng nhỏ hơn ảnh gốc 1920px nên người dùng sẽ tải nhanh hơn. Qua đó cũng giúp tiết kiệm băng thông cho máy chủ. Về mặt SEO, Google cũng đánh giá cao những trang web được tối ưu như vậy.

Hướng dẫn tối ưu hình ảnh cho Wordpress

Mặc định Wordpress chỉ tạo ra 4 phiên bản ảnh như tôi đã nói ở trên, nhưng tùy vào Theme và các Plugins bạn sử dụng mà có thể sẽ có nhiều phiên bản ảnh khác. Cụ thể như nào bạn cứ vào thư mục Uploads để xem là rõ nhất.

Nếu website sử dụng tất cả các phiên bản ảnh này thì không vấn đề. Nhưng nếu không sử dụng thì sẽ là một sự lãng phí tài nguyên. Việc lưu trữ nhiều hình ảnh sẽ làm tốn dung lượng đáng kể của hosting. Do đó, nếu không tối ưu ảnh thì bạn có thể đang gặp 3 vấn đề sau:

1. Ảnh được tự động tạo ra nhưng không dùng đến;
2. Kích thước ảnh to hơn vùng hiển thị gây tốn băng thông;
3. Kích thước ảnh nhỏ hơn vùng hiển thị dẫn đến vỡ hình;

Dù là vấn đề nào thì bạn cũng nên khắc phục ngay.

1. Cài đặt kích thước ảnh khớp với vùng hiển thị trên website

Việc đầu tiên bạn cần làm là cài đặt kích thước ảnh trong phần Settings (Cài đặt) → Media (Thư viện) chính xác với vùng ảnh hiển thị trên website. Ví dụ với blog dovanphuong.com này:

Vùng ảnh hiển thị trên website

Vùng hiển thị ảnh đại diện bài viết (lấy ảnh thumbnail) trong chuyên mục rộng 244px. Còn vùng hiển thị ảnh đại diện bài viết trên sidebar (lấy ảnh medium) rộng 298px. Do đó tôi cài đặt thư viện ảnh tương ứng trong Wordpress như sau:

Cài đặt thư viện ảnh Wordpress

Như vậy, hình ảnh lấy ra sẽ có kích thước tương đương với vùng hiển thị. Trang web như vậy gọi là tối ưu.

2. Loại bỏ size ảnh không sử dụng

Để ngăn chặn Wordpress tự động tạo ra ảnh nhưng không sử dụng, bạn chèn đoạn code sau vào file Wordpress 4.46 trong theme bạn đang sử dụng:

////////// Không cho tự động tạo ảnh thu nhỏ //////////
function dvp_remove_default_image_sizes( $sizes) {
    unset( $sizes['thumbnail']); //Không cho tạo ảnh thumbnail
    unset( $sizes['medium']); //Không cho tạo ảnh medium
    unset( $sizes['large']); //Không cho tạo ảnh large
    unset( $sizes['medium_large']); //Không cho tạo ảnh medium_large
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'dvp_remove_default_image_sizes');

Có một cách dễ hơn, không cần sửa code là sử dụng plugin EWWW Image Optimizer. Bạn vào phần cài đặt plugin trong Wordpress 4.47, chuyển qua tab Wordpress 4.48 để vô hiệu hóa những size ảnh không dùng đến.

EWWW Image Optimizer giúp bạn resize ảnh nhanh chóng

Bên cạnh 2 giải pháp trên, bạn cũng có thể sử dụng plugin để nén ảnh giúp giảm dung lượng để tiết kiệm không gian lưu trữ của hosting cũng như băng thông.

Lưu ý rằng: Đối với những hình ảnh đã tải lên trước đó, bạn phải dùng plugin Regenerate Thumbnails để tạo lại kích thước ảnh mới.