Khắc phục lỗi “Thay đổi kích thước hình ảnh cho phù hợp” trên PageSpeed Insights cho trang WordPress

Hiểu nôm na đơn giản- bớt các thuật ngữ, thì chuyện này xảy ra khi ảnh hiển thị trên trình duyệt nhỏ hơn đáng kể kích cỡ ảnh mà bạn tải lên.

Ví dụ kích cỡ khung nhìn trình duyệt tối đa chỉ 800px, nhưng bạn dùng ảnh có kích cỡ những 1200px. 400px dư ra như vậy là phí phạm.

Cách sửa đơn giản thôi: bạn chuyển ảnh về kích cỡ phù hợp là xong.

Tuy nhiên vấn đề sẽ nặng nề hơn rất nhiều với trang có số lượng bài viết lớn, ví dụ 300 bài với gần 1000 ảnh phải sửa- bạn sẽ rất mất thời gian & nhàm chán khi sửa thủ công.

Chỉnh sửa thủ công sẽ diễn ra như thế này:

  1. Bạn vào từng bài viết tải ảnh lớn trên website về;
  2. Bạn dùng các các công cụ chỉnh sửa ảnh để thu nhỏ kích cỡ ảnh của nó;
  3. Bạn xoá ảnh lớn trên bài viết;
  4. Up ảnh nhỏ thay thế vào đúng vị trí trước đây của nó;
  5. Bạn ngửa mặt lên trời, chửi thề một câu rồi quay lại bước số một.

Nhân thực hiện một dự án gặp vấn đề tương tự, tôi muốn chia sẻ bạn cách khắc phục dễ dàng hơn bằng plugin.

Ví dụ về cảnh báo này:

cảnh báo từ PageSpeed Insights

Nếu bạn muốn tham khảo bài viết mô tả kỹ thuật về cách phát hiện lỗi trên từ chính PageSpeed thì tham khảo bài này.

OK, giờ là lúc chúng ta đi vào tìm hiểu plugin, nó có tên: Imsantiny

Từ nguyên: Im tôi đoán là Image tức ảnh, santiny là tỉnh tảo, đứng đắn. Zee, tên cũng hay đúng không ạ.


Trước hết chúng ta sẽ đi đến phần giới thiệu của plugin

Đoạn dưới đây được biên tập từ thông tin chính thức về plugin trên trang wordpress.org

Với Imsanity bạn dễ dàng thực hiện việc thay đổi tự động kích cỡ ảnh lớn mà bạn tải lên về kích cỡ phù hợp hơn. Chọn bất kỳ kích thước và chất lượng nào bạn muốn, và để Imsanity làm phần còn lại (em chỉ cần yêu anh thôi, cả thế giới để anh lo!). 

Khi người viết bài tải lên hình ảnh lớn hơn kích thước đã định cấu hình sẵn, Imsanity sẽ tự động thu nhỏ hình ảnh đó xuống kích thước bạn cài đặt và thay thế hình ảnh gốc bằng ảnh có kích cỡ phù hợp.

Imsanity cũng cung cấp tính năng thay đổi kích thước hàng loạt (bulk-resize) để thay đổi kích thước hình ảnh đã tải lên trước đó và giải phóng dung lượng ổ đĩa do ảnh lớn chiếm giữ. Bạn có thể thay đổi kích thước hình ảnh cụ thể, riêng lẻ từ kiểu xem danh sách (list view) của thư viện đa phương tiện (media library).

Plugin này rất phù hợp cho các blog không yêu cầu lưu trữ hình ảnh gốc có độ phân giải cao (hi-resolution) và / hoặc những người đóng góp không muốn (hoặc không hiểu cách để) tối ưu kích cỡ hình ảnh trước khi họ tải lên.

Các tính năng chính

  • Tự động rút gọn hình ảnh lớn thành kích thước “lành mạnh” hơn;
  • Tính năng thay đổi kích thước hàng loạt các ảnh cũ đã có sẵn trên website;
  • Thay đổi kích thước hình ảnh một cách chọn lọc, trực tiếp trong thư viện đa phương tiện (chế độ xem danh sách);
  • Cho phép cấu hình chiều rộng / chiều cao tối đa và lựa chọn chất lượng ảnh JPG;
  • Có tùy chọn chuyển đổi tệp BMP và PNG sang định dạng JPG để tiết kiệm hơn;
  • Rất dễ dùng, sau khi được bật, Imsanity không yêu cầu hành động phức tạp nào với người dùng;
  • Sử dụng các chức năng chia tỷ lệ hình ảnh tích hợp sẵn trong WordPress.

Đa ngôn ngữ

Ngoài tiếng Anh, giao diện của Imsanity có sẵn một số ngôn ngữ, mỗi ngôn ngữ sẽ được tải xuống tự động khi bạn cài đặt plugin. Để giúp dịch Imsanity sang ngôn ngữ của bạn, hãy truy cập đường linhk sau: translate.wordpress.org/projects/wp-plugins/imsanity

Hợp tác / đóng góp

Imsanity được phát triển tại github.com/nosilver4u/imsanity

Hỗ trợ plugin

Plugin ban đầu được phát triển bởi Jason Hinkle (RIP / Đã mất). Sau đó được Shane Bishop duy trì và phát triển.


Các câu hỏi thường gặp

H: Việc cài đặt plugin Imsanity có làm thay đổi hình ảnh hiện có trong blog của tôi không?

TL: Kích hoạt Imsanity sẽ không làm thay đổi bất kỳ hình ảnh hiện có trước đó trên website của bạn. Imsanity chỉ thay đổi kích thước hình ảnh khi chúng được tải lên để nó không ảnh hưởng đến hình ảnh hiện có, TRỪ KHI bạn chủ động sử dụng tính năng “Thay đổi kích thước hình ảnh hàng loạt / Bulk Image Resize” trên trang cài đặt Imsanity. Tính năng Bulk Resize cho phép bạn nhanh chóng thay đổi kích thước hình ảnh đã có từ trước khi cài plugin Imsanity.


H: Tại sao tôi gặp lỗi khi nói rằng “Tệp không phải là hình ảnh”?

TL: WordPress sử dụng thư viện GD để xử lý thao tác hình ảnh. GD có thể được cài đặt và cấu hình để hỗ trợ nhiều loại hình ảnh khác nhau. Nếu GD không được định cấu hình để xử lý một loại hình ảnh cụ thể nào đấy thì bạn sẽ nhận được thông báo này khi cố tải nó lên. Để biết thêm thông tin, hãy truy cập trang php.net/manual/en/image.installation.php


H: Tôi muốn Imsanity bỏ qua một hình ảnh cụ thể để tôi có thể tải nó lên mà không bị thay đổi kích thước thì làm thế nào?

TL: Bạn có thể đổi tên file hình ảnh của mình, rồi thêm “-noresize” vào tên của nó. Ví dụ: nếu tệp của bạn có tên là “photo.jpg”, bạn có thể đổi tên nó thành “photo-noresize.jpg” và Imsanity sẽ bỏ qua nó, cho phép bạn tải lên hình ảnh có kích thước đầy đủ.

Nếu bạn là lập trình viên (hoặc có tiện ích), bạn cũng có thể sử dụng bộ lọc ‘imsanity_skip_image’ để bỏ qua việc thay đổi kích thước cho bất kỳ hình ảnh nào.


H: Imsanity có nén hoặc tối ưu hóa hình ảnh của tôi không?

TL: Khi Imsanity thay đổi kích thước hình ảnh nó có nén ảnh, nhưng nó chỉ sử dụng tính năng nén tiêu chuẩn của WordPress. Do đó, hình ảnh thu được không được mã hóa hiệu quả và có thể được tối ưu hóa thêm nữa (mà không làm giảm chất lượng) bằng plugin kiểu như EWWW Image Optimizernhiều plugin tối ưu hóa hình ảnh tương tự khác.


H: Imsanity sẽ thay đổi kích thước hình ảnh từ plugin X, Y hoặc Z?

TL: Nếu hình ảnh có thể được tìm thấy trong Thư viện đa phương tiện trên trang web của bạn, thì có khả năng Imsanity sẽ thay đổi kích thước của chúng. Imsanity sử dụng hook wp_handle_upload để xử lý các file tải lên mới và có thể thay đổi kích thước bất kỳ hình ảnh nào hiện có trong Thư viện đa phương tiện bằng cách sử dụng Bulk Resizer. Nếu hình ảnh không có trong Thư viện đa phương tiện, bạn có thể sử dụng plugin EWWW Image Optimizer để thay đổi kích thước của chúng.


H: Tại sao tôi cần plugin này?

TL: Ảnh được chụp bằng bất kỳ máy ảnh hiện đại nào & hầu hết điện thoại di động hiện đại ngày nay đều quá lớn để hiển thị kích thước đầy đủ trong trình duyệt. Điều này làm lãng phí dung lượng trên máy chủ web của bạn và lãng phí cả băng thông cho khách truy cập khi họ xem các ảnh này.

Imsanity cho phép bạn thiết lập giới hạn tốt hơn để tất cả các hình ảnh tải lên sẽ bị giới hạn ở kích thước hợp lý, nhưng vẫn đủ lớn cho nhu cầu của một trang web thông thường. Imsanity kết nối với WordPress ngay sau khi tải hình ảnh lên, nhưng trước khi quá trình xử lý WordPress diễn ra. Vì vậy, WordPress vẫn hoạt động hoàn toàn giống trước theo mọi cách, ngoại trừ nó sẽ giống như thể người viết bài đã chủ động thu nhỏ hình ảnh của họ đến kích thước hợp lý trước khi tải lên.

Bạn có quyền thay đổi, chỉ định cấu hình giới hạn kích thước mà imsanity sử dụng. Giá trị mặc định đủ lớn để lấp đầy toàn bộ màn hình của người duyệt web trung bình mà không cần thu nhỏ lại, vì vậy nó vẫn đủ lớn để sử dụng trong hầu hết trường hợp.


H: Website của tôi ở dạng nào thì không nên sử dụng plugin này?

TL: Bạn có thể không muốn sử dụng Imsanity nếu bạn sử dụng WordPress làm trang tải xuống ảnh gốc, để cung cấp hình ảnh có độ phân giải cao cho in ấn hoặc sử dụng WordPress làm kho lưu trữ ảnh độ phân giải cao.


H: Nhưng WordPress đã tự động chia rút gọn hình ảnh của tôi rồi cơ mà?

TL: Khi một hình ảnh được tải lên, WordPress sẽ giữ bản gốc và tùy thuộc vào kích thước của bản gốc, noa sẽ tạo ra tối đa 4 bản sao có kích thước nhỏ hơn của tệp (Lớn, Trung bình-Lớn, Trung bình, Hình thu nhỏ) để nhúng vào các trang của bạn. Trừ khi bạn có nhu cầu chụp ảnh đặc biệt, bản gốc thường nằm ở đó không sử dụng, nhưng chiếm dung lượng ổ đĩa.


H: Insanity có nghĩa là gì vậy?

TL: Imsanity là viết tắt của “Image Sanity Limit”. Giới hạn tỉnh táo là một thuật ngữ để giới hạn một thứ gì đó xuống một kích thước hoặc giá trị hợp lý.


H: Tôi phải truy cập trang nào để được hỗ trợ?

TL: Các câu hỏi có thể được đăng trên diễn đàn hỗ trợ tại wordpress.org/support/plugin/imsanity nhưng nếu bạn không nhận được câu trả lời, vui lòng sử dụng đường link sau: ewww.io/contact-us.


Hướng dẫn sử dụng plugin Imsanity

phần cài đặt của Imsanity

Chúng ta đi vào các giải thích chi tiết:

  • Images uploaded within a Page/Post: tức là chiều rộng & chiều cao ảnh tối đa tính ra pixel khi bạn đẩy ảnh lên Page hoặc Post. Nhưng ảnh lớn hơn sẽ được Imsanity thu gọn về kích cỡ tối đa này. Mặc định là 1920, bạn có thể thay đổi sang kích cỡ khác nếu muốn;
  • Images uploaded directly to the Media Library: tương tự như trên, chỉ khác là thông tin này chỉ áp dụng cho các ảnh up trực tiếp lên thư viện đa phương tiện (media library);
  • Images uploaded elsewhere (Theme headers, backgrounds, logos, etc): tương tự như trên, chỉ khác là thông tin này chỉ áp dùng có các ảnh ở những vị trí khác như header của giao diện, ảnh nền, ảnh logo, v.v…
  • JPG image quality: chất lượng hình ảnh. Giá trị được phép nhật từ 1 – 100. Giá trị mặc định là 82. Tuy nhiên tôi thường thay đổi lại thành 100, tức là giữ nguyên chất lượng. Imsanity tôi chỉ dùng để thay đổi kích cỡ, tôi không muốn nó can thiệp đến vấn đề chất lượng;

Ở trên là các tuỳ chọn quan trọng nhất, các tuỳ chọn ít quan trọng hơn bao gồm:

  • Convert BMP To JPG: chuyển ảnh BMP thành JPG, chỉ áp dụng cho các ảnh mới upload lên sau khi cài plugin, những ảnh BMP có sẵn không thể chuyển định dạng hoặc thay đổi kích cỡ;
  • Convert PNG To JPG: chuyển ảnh PNG sang JPG, chỉ áp dụng cho các ảnh mới upload lên sau khi cài plugin, những ảnh PNG có sẵn bạn có thể dùng các plugin khác, chẳng hạn EWWW Image Optimizer;

Còn tuỳ chọn cuối cùng lại cần để ý:

  • Delete Originals: loại bỏ các ảnh gốc lớn mà WordPress vẫn giữ lại sau khi dùng nó để chia thành các ảnh nhỏ hơn. Mặc định là không tick chọn.

Cuối cùng bạn nhấn Save Changes để lưu các cài đặt.

Nếu bạn muốn thay đổi hàng loạt các ảnh trên website thì click vào Start Resizing All Images. Tuy nhiên trừ khi bạn chắc chắn cao, còn không thì nên thay đổi các ảnh cụ thể từ list view trong media library trước đã. Nếu bạn vẫn muốn sử dụng tính năng thay đổi kích cỡ ảnh hàng loạt, trước tiên cần backup website để dự phòng đã.


Hướng dẫn sử dụng

Bạn vào thư viện media, chọn chế độ list view:

Với ảnh nào bạn muốn thay đổi kích cỡ, bạn nhấn vào chữ Resize Image:

thay đổi kích cỡ ảnh từ phần List view

Tiếp theo bạn vào các bài viết và chọn lại cách định dạng kích cỡ ảnh cho nó.

Bình thường khi bạn up các ảnh lớn, WordPress sẽ tạo ra các ảnh nhỏ hơn, rồi mặc định để ảnh của bạn là Large, hoặc Medium, vì kích cỡ mặc định (Full size) lúc này là đặc biệt cao. Bạn chỉ cần click vào ảnh trong phần biên tập bài viết sẽ thấy tuỳ chọn này:

Kích cỡ ảnh đưa vào trong bài viết

Tuy nhiên sau khi bạn Resize thì Full Size mới là kích cỡ phù hợp hơn. Bạn click vào ảnh và chọn Full Size cho thay thế cho Large (hoặc Medium):

chọn ảnh full size

Cuối cùng bạn nhấn lưu.

Như vậy là xong, về bản chất, các ảnh cũ trên website của bạn đã sử dụng kích cỡ ảnh nhỏ hơn trước để hiển thị cho người dùng.

Tại sao tôi vẫn thấy các cảnh báo của PageSpeed Insights?

Thực tế bạn đã tiết kiệm băng thông và tăng tốc cho website, nhưng có thể vẫn còn cảnh báo từ PageSpeed Insights. Nguyên nhân là vì mã nguồn của ảnh vẫn còn liệt kê các ảnh lớn vào (Larger hoặc/và Medium):

mã nguồn của ảnh trong bài viết

Chuyện này không quan trọng, tuy nhiên nếu bạn muốn điểm số tốt hơn (về hình thức hoặc muốn tiết kiệm ổ đĩa), bạn cần xoá các ảnh lớn, trung bình đã tạo trước đó.

Kết luận

Sửa thủ công vẫn cho chất lượng tốt hơn, nó loại bỏ không chỉ ảnh gốc dư thừa, mà còn cả các ảnh nhỏ hơn (nhưng vẫn rất lớn), ngoài ra đoạn mã trên trang cũng cập nhật, giúp website vượt qua dễ dàng bài đánh giá điểm số. Tuy nhiên ngoài nhược điểm mất thời gian, thì sửa thủ công cần phải đổi lại tên các ảnh để nó hiển thị chính xác. Chắc chắn nó sẽ làm bạn mất thời gian thêm nữa (bạn phải nhập lại các thẻ Alt, các mô tả bên cạnh ảnh nếu có), dĩ nhiên cũng có thể làm người nhạy cảm về SEO hơi lo lắng.

Leave a Comment