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.
sumber
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 :
sumber
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.
sumber
diplay:none;
. Layout responsif yang efektif cenderung desain minimal karena ini.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:
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.
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.
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).
sumber