responsive images cho phép trang web của bạn có thể hiển thị trên tất cả các thiết bị di động mà không cần cuộn hay thu phóng để xem nội dung văn bản hay các hình ảnh. Nó đảm bảo khách truy cập của bạn sẽ có những trải nghiệm tuyệt vời nhất, bất kể là họ truy cập vào trang web thông qua máy tính, máy tính bảng hay điện thoại di động.

Khi hình ảnh của bạn không tương thích, dưới đây là cách mà nó hiển thị trên các thiết bị di động, khiến người xem phải cuộn để xem nó đúng cách. Đây thực sự không phải là điều mà bạn muốn khách truy cập phải trải qua đúng không?

Với bản cập nhập Mobilegeddon của Google, việc nâng cao trải nghiệm của khách truy cập trên các thiết bị di động trở nên quan trọng hơn bao giờ hết. Và việc hiển thị hình ảnh đúng cách trên tất cả các thiết bị yêu cầu phương thức mô phỏng linh hoạt hơn.

Đối với những người dùng WordPress mù công nghệ, có rất nhiều plugin sẽ giúp họ tạo những trang web với responsive images. Phần lớn đều sử dụng thuộc tính srcset- được hỗ trợ bởi hầu hết các thiết bị di động hiện đại.

Thuộc tính này cho phép các nhà phát triển thu gọn các hình ảnh lớn thành hình ảnh nhỏ hơn để phù hợp với màn hình của thiết bị. Điều này giúp thiết bị sử dụng ít tài nguyên hơn khi tải trang, cải tiến thời gian tải trang và giảm thiểu lượng băng thông rộng mà khách truy cập cần sử dụng để xem trang web.

Trong bài viết này, tôi sẽ lập danh sách 6 plugin responsive images dành cho các trang web WordPress để giúp bạn có thể cho những khách truy cập bằng điện thoại của mình những trải nghiệm tốt nhất.

1. RICG Responsive Images

Tạo bởi Tim Evko, plugin này đem đến trình responsive images mặc định tự động bằng cách bao gồm tất cả các kích cỡ có thể có của hình ảnh cho mỗi hình ảnh được tải lên. Theo nhận xét trên Tờ Smashing, plugin này giúp người dùng có được những responsive images ngay khi được cài đặt, không cần thêm bất kì thao tác nào cả.

Sebastian Green đã có một hướng dẫn khá chi tiết giải thích cách sử dụng plugin này để tạo responsive images trên WordPress. Tuy vậy, những nhà phát triển đã không bao gồm tính năng cho hướng dẫn nghệ thuật, tải rảnh tay và nén hình ảnh. Tôi đã có cơ hội phỏng vấn anh ấy, và được biết thêm một ít thông tin về plugin này. Mặc dù có rất nhiều các plugin responsive images khác, nhưng sự khác biệt của nằm ở chỗ họ “làm việc với những nhà lập trình chuyên nghiệp và những nhà phát triển đầu não của WordPress để xây dựng nên plugin này, với mục tiêu cuối cùng là khiến nó trở thành tính năng có sẵn đi kèm với mỗi cài đặt WordPress.”

Khi được hỏi plugin có làm việc với tất cả các giao diện cũng như các plugin khác không, anh ấy đã trả lời “ Plugin sẽ hoạt động được ở mọi nơi, miễn là giao diện wordpress không chặn tính năng thay đổi kích cỡ hình ảnh của WordPress khi người dùng tải chúng lên”

Anh ấy cũng nhấn mạnh rằng : “Trước đây, plugin sẽ không làm việc nếu như trình chỉnh sửa nội dung mặc định của WordPress bị thay thế. Chúng tôi đã thay đổi phương thích tiếp cận và tính trạng đó đã không còn diễn ra nữa. Chúng tôi hiện đang nghiên cứu việc những hình ảnh host trên CDN sẽ không được hỗ trợ tương thích, nếu như đường dẫn của chúng không đến từ tệp tin đa phương tiện của WordPress.”

”Bạn cũng không cần lo lắng về những hình ảnh đã thêm trước khi plugin được cài đặt, bởi vì nó đã tương thích, trở thành 1 phần trong trang web rồi.Thật sự thì đây là vấn đề mà chúng tôi tập trung nhất. Bất kì ai đã cài đặt phiên bản mới nhất của plugin sẽ có những responsive images đối với mọi hình ảnh tải lên, cả trong quá khứ, hiện tại và tương lai!” – Sebastian Green trả lời.

2. Post Script Responsive Images

Plugin này chỉnh sửa “the_content()” và tính năng hình bài viết bằng cách tái dựng lại hình ảnh bằng thuộc tính SRCSET. Nó sẽ cho phép chỉnh sửa hình ảnh về kích cỡ cần thiết và tự động làm việc với bất kì hình ảnh nào đã tải lên trước đó.

3. Responsify WP

Responsify WP là một phương pháp plug-and-play tìm kiếm các hình ảnh mô tả cũng như tất cả các hình ảnh bên trong nội dung và khiến chúng trở nên tương thích. Nó cung cấp hình ảnh cỡ lớn, cho phép bạn tùy chọn kích cỡ hình ảnh để sử dụng, đồng thời tạo hình nền tương thích.

4. SrcSet Responsive Images For WordPress

SrcSet cho phép bạn chỉ định một nhóm SrcSet tới một kích cỡ hình ảnh trong WordPress ( ví dụ: cỡ vừa hay lớn). Plugin này tự động hóa thuộc tính srcset dành cho tất cả các hình ảnh có liên kết hoặc nằm trong nội dung trang/ bài viết.

Nó cũng đi kèm với công cụ Tái tạo sẽ tìm kiếm các hình ảnh sử dụng kích cỡ trong nhóm SrcSet ở tất cả các bài viết và trang của bạn ( bao gồm cả kiểu bài viết riêng) và tự động thêm thuộc tính srcset vào các hình ảnh sẵn có.

5. Adaptive Images For WordPress

Adaptive images là một plugin  wordpress khác để xử lý thành responsive images. Nó hoạt động trên tất cả các kích cỡ màn hình thiết bị, dù mục đích chính của nó là trên thiết bị di động.

Theo bài viết của Josh Pollock, Adaptive sử dụng một tập hợp các kích cỡ bố cục được thiết kế sẵn dựa trên kích cỡ màn hình các thiết bị, kèm theo CSS và Javascript, để thích nghi với thiết bị đó.

Plugin này nhanh chóng thay đổi kích cỡ các hình ảnh, tùy theo kích cỡ màn hình thiết bị, để giảm thiểu thời gian tải trên di động. Nó tối ưu hóa hình ảnh gửi tới các thiết bị điện thoại, theo một cách nhanh chóng và mượt mà, vì vậy mà thời gian tải được giảm xuống nhanh chóng.

6. HISRC – jQuery Plugin For Adaptive Images

Hisrc là một plugin jQuery đơn giản dành cho responsive images trên các thiết kế web tương thích nhằm nâng cao tốc độ mạng và chất lượng hình ảnh cho di động. Cách hoạt động của nó là bằng tải trước một hình ảnh di động với thuộc tính IMG SRC cũ.
Sau đó plugin HiSRC jQuery sẽ xem xem liệu thiết bị có băng thông rộng không (như 3G), và nếu có, để hình ảnh di động trước ở đó. Nếu đường truyền tốt độ cao và tốt hơn, nó sẽ được thay thế bởi hình ảnh lớn hơn.

Phương Pháp tối ưu hình ảnh trên WordPress

Để nâng cao thời gian tải, và giảm yêu cầu về băng thông rộng của khách truy cập, việc tối ưu hóa kích cỡ hình ảnh cũng như cách thức hiển thị trước khi tải chúng lên là điều cần thiết. Và Google xếp hạng trang web dựa trên thời gian tải trang cho nên việc tối ưu hình ảnh là rất cần thiết cho trang WordPress của bạn.

Tôi thích sử dụng công cụ miễn phí có tên RIOT (Radical Image Optimization Tool) để nén hình ảnh xuống khoảng 50% trước khi tải chúng lên blog của mình. Điều tuyệt vời nhất đó là chất lượng hình ảnh giảm xuống không đáng kể nếu bị nén. Và kết quả thì cũng khá tương đương với các sản phẩm của thương mại đây.

Nó cũng có giao diện dễ sử dụng so với bản gốc với hình ảnh tối ưu hóa và thấy kích cỡ tệp tin kết quả ngay tức thì. Bạn sẽ có thể điều khiến việc nén hình ảnh, số lượng màu sắc, cài đặt dữ liệu meta ,… và chọn định dạng(JPG, GIF hoặc PNG) cho tệp tin kết quả của mình.

Bạn cũng có thể sử dụng plugin như WP SmushIt để nén hình ảnh dù không tốt bằng RIOT. Nếu bạn quyết định dùng cả 2, bạn có thể nén hình ảnh với RIOT trước khi tải chúng lên, và với WP SmushIt sau khi tải lên.

Một công cụ miễn phí khác mà bạn có thể sử dụng đó là – có cả bản online và bản tải về- cho phép bạn thay đổi kích cỡ, nén và tối ưu hóa tệp tin hình ảnh của mình. Để có thêm nhiều tùy chọn, hãy xem Làm thế nào để sử dụng file Web trong WordPress để giảm thời gian tải trang

Cho đến khi có phương pháp tốt hơn để hiển thị responsive images trên tất cả các thiết bị thì các plugin kể trên là lựa chọn tốt nhất để tối ưu hóa hiển thị hình ảnh khi truy cập trang web từ các thiết bị di động.

Nếu bạn thấy những thông tin trên hữu ích, hãy để lại bình luận phía dưới cho chúng tôi biết nhé!