Cách tốt nhất để sử dụng Hình ảnh nổi bật cho thiết kế web đáp ứng là gì?

Tôi có một ý tưởng tuyệt vời và vì WordPress đã chăm sóc một số công việc, tôi chỉ cần tìm một phương pháp tốt để thực hiện công việc này.

Tôi đang làm việc trên một dự án cần đáp ứng cho tất cả các thiết bị, cho dù là máy tính để bàn hay thiết bị di động. Do đó, tôi muốn hình ảnh cũng phản hồi, nghĩa là các thiết bị di động không nên tải hình ảnh 50KB +.

Đối với mỗi trang hoặc bài đăng, tôi có thể thêm Hình ảnh nổi bật bằng cách sử dụng Hình thu nhỏ bài đăng, ở kích thước đầy đủ, hình ảnh có kích thước khoảng 950x250 ở mức ~ 60KB. Nếu tôi tải trang web trên iPhone / Android, tôi sẽ không muốn tải hình ảnh ~ 60KB, nhưng thay vào đó, tôi muốn tải hình thu nhỏ ở vị trí của nó.

Phương pháp mặc định cho hình ảnh phản hồi là làm cho chiều rộng của hình ảnh 100% của vùng chứa chính, do đó nó sẽ tự động thay đổi kích thước nếu vùng chứa chính cũng được thay đổi kích thước. Không phải là phương pháp tốt nhất cho hình ảnh lớn hơn.

Tôi đã nghĩ về việc thử kịch bản hình ảnh phản hồi của Tập đoàn Filament , nhưng tôi đã thử nó và nó không hoạt động đúng. Một cách có thể được thực hiện là thông qua phát hiện tác nhân người dùng, nhưng tôi không muốn thực hiện phương pháp này vì tác nhân người dùng có thể bị giả mạo.

Đây là một phương pháp khác để thay đổi kích thước hình ảnh một cách nhanh chóng , nhưng dường như điều này đang nhân đôi những gì WordPress đã làm.

Nếu có một cách để làm điều này với hình ảnh Thư viện phương tiện mà WordPress đã được mặc định, với tất cả các hình thu nhỏ đã thay đổi kích thước đã được tạo, điều đó sẽ thích hợp hơn.

Bước 1:

Xác định hai kích thước hình ảnh tùy chỉnh, ví dụ:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Bước 2:

Thực hiện phương tiện bạn đã chọn để xác định khách hàng. Có một số cách và phương pháp bạn sử dụng nằm ngoài phạm vi của câu hỏi này. Nhưng, giả sử bạn có một phương thức phù hợp với mình, hãy đưa kết quả ra một số biến, chẳng hạn như$mobile_device = true;

Bước 3:

Trong tệp mẫu của bạn, xuất hình ảnh có điều kiện, dựa trên máy khách.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Lưu ý: bạn có thể lặp lại if/else(hoặc làm a switch) cho nhiều yếu tố hình thức (nghĩa là kích thước màn hình). Chỉ cần thêm nhiều kích thước hình ảnh tùy chỉnh và kiểm tra có điều kiện cho từng kích thước màn hình bạn muốn hỗ trợ.

Cách tốt nhất là sử dụng lưới chất lỏng để xây dựng chủ đề WordPress và xóa giá trị chiều rộng và chiều cao của hình ảnh nổi bật thông qua chức năng để chia tỷ lệ. Một hướng dẫn về Làm hình ảnh WordPress đáp ứng :

Phương pháp 1: CSS

Thêm mã sau vào tệp CSS của bạn. Điều đó sẽ làm cho hình ảnh có thể mở rộng theo kích thước màn hình.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Xóa chiều cao và chiều rộng tự động trong <img>thẻ WordPress

Bây giờ kéo cửa sổ để xem tỷ lệ hình ảnh hoạt động. Bạn sẽ nhận thấy rằng những hình ảnh trong blog WordPress của bạn có tỷ lệ kỳ lạ. Họ chia tỷ lệ ngang tốt nhưng tỷ lệ dọc trong hình ảnh WordPress đều sai.

Để làm cho hình ảnh có thể thay đổi kích thước theo tỷ lệ trong WordPress, chúng tôi phải xóa giá trị chiều rộng và chiều cao tự động mà WordPress thêm cho < img >thẻ.

Ví dụ, chúng ta phải thay đổi điều này:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

Để điều này:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Đối với các hình ảnh trong một bài đăng hoặc trang tĩnh / trang mẫu, tất cả những gì bạn phải làm là, thêm CSS ở trên vào style.csstệp, sau đó xóa ‘width’và ‘height’các thuộc tính khỏi < img >thẻ trong trình chỉnh sửa WordPress của bạn. Đó là nó!

Nhưng đối với hình ảnh được hiển thị động bởi WordPress, chẳng hạn như hình thu nhỏ của bài đăng, chiều rộng và chiều cao cần phải được xóa động bằng cách sử dụng một chức năng.

Thêm chức năng sau vào functions.phptập tin của bạn .

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Sau đó, khi bạn gọi cho những hình ảnh thu nhỏ đăng trong trang template.php, hãy thay thế:

the_post_thumbnail();

Với cái này:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

Đó là nó. Kéo và thay đổi kích thước trình duyệt để xem hình ảnh WordPress phản hồi của bạn đang hoạt động!

---

Cách 2:

Ở trên sẽ không làm việc cho một số chủ đề.

Nếu bạn là một trong số ít nó không hoạt động, bạn vẫn có thể giải quyết vấn đề hình ảnh của mình bằng chức năng bên dưới.

Thêm chức năng sau vào functions.phptập tin của bạn .

Điều này loại bỏ các thuộc tính chiều rộng và chiều cao nội tuyến khỏi hình ảnh được truy xuất the_post_thumbnail()và ngăn các thuộc tính đó được thêm vào hình ảnh mới được thêm vào trình chỉnh sửa.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

Một cách có thể được thực hiện là thông qua phát hiện tác nhân người dùng, nhưng tôi không muốn thực hiện phương pháp này vì tác nhân người dùng có thể bị giả mạo.

Đây không phải là một phương pháp tồi và thực sự là tiêu chuẩn công nghiệp, một WURFL tốt có xếp hạng độ chính xác rất cao, những phương pháp tôi đã sử dụng và kiểm tra luôn trả về kết quả chắc chắn và thử nghiệm độc lập (trên những gì tôi sẽ làm) phạm vi 98% +. Ai quan tâm nếu một số bot què đang giả mạo một tác nhân người dùng, dù sao họ cũng không có lý do chính đáng.

Đối với bước 2, tôi nghĩ rằng một trong hai phương pháp thực sự nhanh hơn, một truy vấn phương tiện WURFL hoặc CSS được hỗ trợ bởi PHP.

Trước tiên, bạn phải xác định rõ nhất là tốt nhất. Định nghĩa của tôi sẽ là: Hiển thị hình ảnh với hiệu ứng dự định của nhà thiết kế trên bất kỳ thiết bị hoặc màn hình nào Hiển thị hình ảnh với chất lượng như ban đầu Tiêu thụ lượng tối thiểu tuyệt đối của hệ thống và nhân lực (ví dụ: băng thông, CPU, thời gian của nhà thiết kế / lập trình viên)

Đây là những cách tiếp cận tôi đã thấy cho đến nay:

1. Tải hình ảnh kích thước đầy đủ và giảm trình duyệt xuống để phù hợp với bố cục. Xác định chiều rộng tối đa của hình ảnh là 100% và giảm tỷ lệ theo chiều rộng của vùng chứa.

Ưu điểm: Yêu cầu bên cạnh không có nỗ lực để thực hiện, tương thích trình duyệt chéo và được hỗ trợ bởi các trình duyệt cũ hơn.

Nhược điểm: Thường tải xuống nhiều dữ liệu hơn mức yêu cầu và sau đó dành chu kỳ CPU cho máy khách để thu nhỏ dữ liệu (chậm). Bạn có thể kết thúc với hình ảnh chất lượng rất kém tùy thuộc vào thuật toán chia tỷ lệ của trình duyệt. Không có khả năng cho hướng nghệ thuật và không thể điều chỉnh hình ảnh cho màn hình loại võng mạc.

2. Sử dụng truy vấn phương tiện để đọc các thuộc tính của khách hàng và tìm nạp một trong nhiều hình ảnh được tùy chỉnh cho các điểm dừng khác nhau trong thiết kế của bạn. (Đề xuất tiện ích mở rộng hình ảnh phản hồi HTML và thẻ thuộc tính srcset đang làm việc để tiếp cận phương pháp này vào thông số HTML).

Ưu điểm: Tải xuống nhanh hơn trên thiết bị di động. Có thể xử lý màn hình loại võng mạc. Cải thiện chất lượng hình ảnh kể từ khi hình ảnh được hy vọng xử lý bằng một số phương pháp chất lượng cao. Hướng nghệ thuật trở thành có thể.

Nhược điểm: Ai đó phải dành thời gian xử lý, cắt xén và quản lý nhiều phiên bản của cùng một hình ảnh. Mã hóa nhiều hơn: bây giờ bạn phải đánh vần từng phiên bản của hình ảnh theo một số cách và tạo các truy vấn phương tiện cho tất cả các bố cục mong muốn. Lặp lại ở trên cho mỗi và mọi hình ảnh bạn phục vụ. Sẽ chỉ hoạt động đối với các trình duyệt hỗ trợ CSS3 Media Queries hoặc các thẻ mới.

3. Tạo phần phụ trợ Tối ưu hóa hình ảnh cho bất kỳ màn hình hoặc bố cục nào bằng cách sử dụng một hình ảnh nguồn duy nhất khi đang di chuyển. Theo tôi, điều này tương đương với việc xử lý các hình ảnh phản hồi như một nhiệm vụ đàm phán nội dung giống như HTTP.

Ưu điểm: Nhà thiết kế không phải mất thời gian xử lý hình ảnh và quản lý nhiều phiên bản. Hình ảnh kích thước tối ưu nhất được gửi mỗi lần. Có thể xử lý màn hình loại võng mạc và điều chỉnh linh hoạt cho hướng nghệ thuật (mặc dù với một số nỗ lực thêm - phải biết nơi tập trung). Không cần đánh dấu đặc biệt hoặc thêm (cảnh báo dưới đây). Tương thích trình duyệt chéo và sẽ hoạt động cho các trình duyệt cũ hơn.

Nhược điểm: Phải nắm bắt và truyền thông tin về các thuộc tính trình duyệt và màn hình của máy khách. Lần đầu tiên tải hình ảnh có thể chậm hơn bất kỳ cách tiếp cận nào khác vì hình ảnh phải được xử lý (thường được lưu trong bộ nhớ cache cho các yêu cầu sau này).