Apakah mengubah ukuran gambar CSS masih merupakan ide yang buruk?

Itu selalu terlihat bahwa menggunakan atribut width / height pada gambar yang bukan merupakan gambar asli sebenarnya adalah ide yang buruk. Ini bisa berarti gambar yang di-pixalated atau ukuran unduhan yang lebih besar daripada yang diperlukan.

Tapi, apakah ini masih menjadi masalah? Saya tidak akan menyarankan peningkatan ukuran foto, tetapi perampingan seharusnya tidak menjadi masalah asalkan tidak terlalu berbeda dari aslinya dan menjaga skala.

Sebagai contoh, saya memiliki foto yang berukuran 600x400 dan saya menempelkan lebar 400px di atasnya. Sebagian besar peramban modern menurunkan gambar dan sepertinya rendering masih layak.

Jadi, apa pandangan semua orang tentang ini?

Jangan khawatir tentang penskalaan (sebagian besar browser akan membuat gambar berskala baik-baik saja, menurut pengalaman saya), khawatir tentang ukuran muatan yang Anda kirim ke pengguna akhir.

Tentu, Anda bisa berargumen bahwa Anda hanya menyia-nyiakan sejumlah kecil bandwidth di kedua ujungnya untuk piksel tambahan yang Anda kirim tanpa niat untuk menggunakan, tetapi ada biaya waktu juga.

Untuk setiap gambar yang Anda kirim pada ukuran di atas yang dibutuhkan, Anda menambahkan sedikit keterlambatan pada pemuatan halaman untuk pengguna Anda. Untuk situs web dengan hanya beberapa gambar ini tidak akan menjadi masalah, tetapi untuk situs dengan sejumlah besar aset pendukung Anda akan mulai menambahkan penundaan yang nyata, dan penundaan akan dikenakan biaya uang .

Juga, sehubungan dengan biaya bandwidth kecil, karena lalu lintas situs Anda naik, demikian juga biaya bandwidth kecil.

Jadi, hemat uang perusahaan Anda dan habiskan 30 detik, Anda harus menyesuaikan ukuran gambar sendiri! :)

Seperti biasa, lakukan benchmarking Anda, tetapi kecuali jika aplikasi ini benar-benar populer / mission-critical, saya tidak akan terlalu khawatir tentang perampingan dari 600 menjadi 400 jika Anda berada dalam situasi di mana Anda perlu sering mengganti lebar. Jika ini hanya satu kali, tentu saja, jalankan convert -geometry 400x photo1.jpg photo2.jpg, tetapi jika ini adalah aplikasi yang Anda gunakan dengan cepat, mungkin ada hal-hal yang lebih penting untuk dikhawatirkan, bahkan dalam ranah kinerja. misalnya latensi; pre-emptively memuat gambar, misalnya.

Ukuran gambar dapat menjadi penting pada perangkat seluler, di mana ukuran gambar besar memiliki efek triple-whammy dari pemuatan lambat (broadband seluler), membutuhkan waktu lebih lama untuk di-render (perangkat keras tingkat rendah), dan - setelah dirender - tidak sepenuhnya terlihat pada resolusi tinggi bagaimanapun.

Anda mungkin juga ingin melihat gambar yang responsif. Ada banyak pekerjaan yang telah dilakukan orang, misalnya perampingan otomatis - dan kemudian caching - gambar di server adalah pendekatan yang baik jika ini banyak muncul.

Masalahnya adalah payload, browser akan memberikan apa saja dalam ukuran apa pun (terutama ukuran yang lebih kecil yang Anda bicarakan)

Untuk situs volume tinggi, bahkan satu byte pun penting. Anda tidak ingin mengirim data yang tidak diinginkan.

Ngomong-ngomong tentang Ide buruk, sebenarnya bukan ide buruk untuk menyesuaikan lebar / tinggi beberapa piksel atau mungkin 10 atau 20 piksel. Tapi itu ide yang sangat buruk jika Anda menyusutkan gambar besar menjadi thumbnail :)