Apa cara terbaik untuk menggunakan Gambar Unggulan untuk desain web responsif?

Saya punya ide cemerlang dan karena WordPress sudah menangani beberapa pekerjaan, saya hanya perlu menemukan metode yang bagus untuk membuat pekerjaan ini.

Saya sedang mengerjakan proyek yang harus responsif terhadap semua perangkat, apakah itu PC desktop atau gadget seluler. Jadi, saya ingin gambar juga responsif, artinya perangkat seluler tidak boleh memuat gambar 50KB +.

Untuk setiap halaman atau posting, saya dapat menambahkan Gambar Unggulan menggunakan Thumbnail Posting yang, pada ukuran penuh, gambar adalah sekitar 950x250 pada ~ 60KB. Jika saya memuat situs web pada iPhone / Android, saya tidak ingin gambar ~ 60KB dimuat, tetapi sebaliknya ingin thumbnail kecil dimuat di tempatnya.

Metode default untuk gambar responsif adalah membuat lebar gambar 100% dari wadah induk, sehingga akan mengubah ukuran secara otomatis jika wadah induk juga diubah ukurannya. Bukan metode terbaik untuk gambar yang lebih besar.

Saya berpikir untuk mencoba skrip gambar Grup Filament yang responsif , tetapi saya mencobanya dan itu tidak berhasil. Salah satu cara ini dapat dicapai adalah melalui deteksi agen-pengguna, tetapi saya lebih suka tidak melakukan metode ini karena agen-pengguna dapat dipalsukan.

Berikut adalah metode lain untuk mengubah ukuran gambar dengan cepat , tetapi ini tampaknya menduplikasi apa yang telah dilakukan WordPress.

Jika ada cara untuk melakukan ini dengan gambar Galeri Media bahwa WordPress telah menjadi default, dengan semua thumbnail yang telah diubah ukurannya telah dibuat, itu akan lebih baik.

Langkah 1:

Tentukan dua ukuran gambar khusus, misalnya:

<?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
?>

Langkah 2:

Terapkan cara yang Anda pilih untuk menentukan klien. Ada beberapa cara, dan metode mana yang Anda gunakan di luar ruang lingkup pertanyaan ini. Tetapi, dengan asumsi Anda memiliki metode yang sesuai untuk Anda, hasilkan hasilnya ke beberapa variabel, seperti$mobile_device = true;

Langkah 3:

Dalam file template Anda, output gambar secara kondisional, berdasarkan pada klien.

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

Catatan: Anda bisa mengulangi if/else(atau melakukan a switch) untuk beberapa faktor bentuk (yaitu ukuran layar). Cukup tambahkan beberapa ukuran gambar khusus, dan uji kondisi untuk setiap ukuran layar yang ingin Anda dukung.

Cara terbaik adalah dengan menggunakan kotak fluida untuk membangun tema WordPress, dan menghapus nilai lebar dan tinggi gambar unggulan melalui fungsi untuk penskalaan proporsional. Sebuah tutorial tentang Membuat gambar WordPress responsif :

Metode 1: CSS

Tambahkan kode berikut ke file CSS Anda. Itu akan membuat gambar terukur sesuai dengan ukuran layar.

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

Menghapus tinggi dan lebar otomatis di <img>tag WordPress

Sekarang seret jendela untuk melihat penskalaan gambar dalam aksi. Anda akan melihat bahwa gambar dalam skala blog WordPress Anda aneh. Mereka penskalaan horizontal baik tetapi penskalaan vertikal pada gambar WordPress semuanya salah.

Untuk membuat gambar dapat diperbesar secara proporsional di WordPress, Kami harus menghapus nilai lebar dan tinggi otomatis yang ditambahkan WordPress untuk < img >tag.

Sebagai contoh, kita harus mengubah ini:

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

Untuk ini:

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

Untuk gambar yang ada di pos atau halaman statis / halaman templat, yang harus Anda lakukan adalah, tambahkan CSS di atas ke style.cssfile, dan kemudian hapus ‘width’dan ‘height’properti dari < img >tag di editor WordPress Anda. Itu dia!

Tetapi untuk gambar yang ditampilkan secara dinamis oleh WordPress, seperti posting thumbnail, lebar dan tinggi harus dihapus secara dinamis menggunakan fungsi.

Tambahkan fungsi berikut ke functions.phpfile Anda .

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

Kemudian ketika Anda memanggil gambar-gambar thumbnail posting di halaman template.php Anda, ganti:

the_post_thumbnail();

Dengan ini:

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

Itu dia. Seret dan ubah ukuran browser untuk melihat gambar WordPress responsif Anda beraksi!

---

Metode 2:

Di atas tidak akan berfungsi untuk beberapa tema.

Jika Anda salah satu dari sedikit yang tidak berfungsi, Anda masih bisa menyelesaikan masalah gambar menggunakan fungsi di bawah ini.

Tambahkan fungsi berikut ke functions.phpfile Anda .

Ini menghilangkan atribut lebar dan tinggi sebaris dari gambar yang diambil dengan the_post_thumbnail(), dan mencegah atribut tersebut ditambahkan ke gambar baru yang ditambahkan ke editor.

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; 
}

Salah satu cara ini dapat dicapai adalah melalui deteksi agen-pengguna, tetapi saya lebih suka tidak melakukan metode ini karena agen-pengguna dapat dipalsukan.

Ini bukan metode yang buruk dan sebenarnya adalah standar industri, WURFL yang baik memiliki peringkat akurasi yang sangat tinggi, yang saya gunakan dan diuji selalu mengembalikan hasil yang solid dan pengujian independen (di atas apa yang akan saya lakukan dengan susah payah) tampaknya memilikinya di kisaran 98% +. Siapa yang peduli jika beberapa bot lumpuh memalsukan agen-pengguna, mereka tidak ada di sana untuk alasan yang bagus.

Untuk langkah 2 saya pikir salah satu metode turun ke yang sebenarnya lebih cepat, PHP yang didukung WURFL atau permintaan media CSS.

Pertama, Anda harus mendefinisikan "terbaik". Definisi saya adalah: Merender gambar dengan efek yang diinginkan perancang pada perangkat atau layar Merender gambar dengan kualitas yang sama seperti aslinya Mengkonsumsi jumlah minimum absolut sistem dan sumber daya manusia (yaitu bandwidth, CPU, waktu desainer / programmer)

Berikut adalah pendekatan yang saya lihat sejauh ini:

1. Muat gambar ukuran penuh dan turunkan skala peramban agar sesuai dengan tata letak. Tentukan gambar max-lebar 100% dan diperkecil oleh lebar wadahnya.

Kelebihan: Tidak memerlukan upaya untuk mengimplementasikan, kompatibel dengan browser lintas dan didukung oleh browser lama.

Cons: Seringkali mengunduh lebih banyak data dari yang dibutuhkan dan kemudian menghabiskan siklus CPU pada klien untuk menurunkannya (lambat). Anda mungkin menghasilkan gambar dengan kualitas sangat buruk tergantung pada algoritma penskalaan browser. Tidak ada kemungkinan untuk arah artistik dan tidak dapat menyesuaikan gambar untuk tampilan jenis retina.

2. Gunakan kueri media untuk membaca properti klien dan mengambil salah satu dari beberapa gambar yang disesuaikan untuk breakpoint berbeda dalam desain Anda. (Usulan Ekstensi Gambar Responsif HTML dan Tag atribut srcset sedang berupaya memanggang pendekatan ini ke dalam spesifikasi HTML).

Kelebihan: Unduhan lebih cepat pada perangkat seluler. Dapat menangani tampilan jenis retina. Peningkatan kualitas gambar karena gambar di mana diharapkan diproses menggunakan beberapa metode berkualitas tinggi. Arah artistik menjadi mungkin.

Cons: Seseorang harus menghabiskan waktu memproses, memotong dan mengelola banyak versi dari gambar yang sama. Lebih banyak pengkodean: kini Anda harus mengeja setiap versi gambar dengan beberapa cara dan membuat kueri media untuk semua tata letak yang diinginkan. Ulangi langkah di atas untuk setiap gambar yang Anda sajikan. Hanya akan berfungsi untuk browser yang mendukung CSS3 Media Queries atau tag baru.

3. Buat backend Optimalkan gambar untuk layar atau tata letak apa pun menggunakan gambar sumber tunggal dengan cepat. Menurut pendapat saya, ini setara dengan memperlakukan gambar responsif sebagai tugas negosiasi konten seperti HTTP.

Kelebihan: Desainer tidak perlu menghabiskan waktu memproses gambar dan mengelola beberapa versi. Gambar dengan ukuran paling optimal dikirim setiap saat. Dapat menangani tampilan jenis retina dan secara dinamis menyesuaikan arah artistik (meskipun dengan sedikit usaha - harus tahu ke mana harus fokus). Tidak diperlukan markup khusus atau tambahan (peringatan di bawah). Kompatibel dengan browser lintas dan akan bekerja untuk browser lama.

Cons: Harus mengambil dan mengirimkan informasi tentang browser dan properti layar klien. Pertama kali gambar dimuat mungkin lebih lambat daripada dalam pendekatan lain karena gambar harus diproses (biasanya di-cache untuk permintaan nanti).