Praktik terbaik menangani gambar di situs web

9

Saya memindahkan situs eCommerce lama ke MVC 3 dan ingin memanfaatkan peningkatan desain. Situs ini saat ini memiliki gambar produk yang disimpan dalam 3 ukuran: thumbnail, medium (untuk tampilan dalam daftar) dan diperluas untuk tampilan yang diperbesar. Saat ini kami harus mengunggah 3 gambar terpisah yang berukuran tepat, memberikan 3 nama berbeda yang sesuai dengan apa yang diharapkan situs, dll. Sangat merepotkan.

Saya ingin mengunggah hanya 1 file, yang besar, lalu biarkan situs menguranginya ke ukuran yang diperlukan, dan saya ingin fleksibilitas untuk mengubah ukuran thumbnail dan daftar tergantung pada preferensi pengguna, faktor bentuk (misalnya ponsel, iPad , desktop), dll. mungkin memerlukan banyak salinan dari gambar yang sama. Pertanyaan saya adalah apakah gambar harus dikurangi kemudian disimpan beberapa kali saat diunggah dan jika demikian, apa konvensi penyimpanan / penamaan yang baik?

Gagasan lainnya adalah hanya menyimpan gambar tunggal tetapi mengubah ukurannya secara terprogram sebelum menyajikannya kepada klien. Adakah yang melakukan ini dan apa saja pengorbanannya selain beberapa siklus mesin lagi? Bagaimana Anda meneruskan gambar sementara di memori ke klien (tidak ada URL)?

asp.net image-manipulation

— Steve
sumber

13

Saya memimpin pengembang untuk perusahaan perjalanan yang berbasis di Inggris. Salah satu proyek yang saya laksanakan adalah versi web dari pustaka gambar kami yang dapat ditanyakan secara otomatis untuk menyediakan fotografi untuk situs kami. Ini berisi sekitar 150 ribu gambar, di mana sekitar 60-70 ribu tersedia di situs web (nilai tertinggi).

Kami memulai dengan mendefinisikan sekitar 5 ukuran, membuat versi ukuran ini dengan cepat dan menyimpannya di Amazon S3. Harga sangat minim tetapi Amazon dibangun untuk gagal dengan anggun, jadi kita sering melihat gambar yang hilang. Semakin kita mengembangkan situs kita, semakin kita benci hanya memiliki lima ukuran gambar yang tersedia.

Kami pindah ke model pengubahan ukuran dinamis, di mana kami dapat menambahkan parameter lebar dan / atau tinggi ke URI gambar apa pun untuk dirender dalam ukuran saat itu. Kami menyimpan gambar yang sudah diubah ukurannya (menggunakan hash MD5 dari URI permintaan sebagai nama file).

Untuk mendapatkan gambar # 12345 (gambar kami diambil melalui db, tetapi Anda dapat menggantinya dengan path file) dengan lebar 200 dan kualitas jpg 80%, format URI adalah:

http://images.domain.com/?imageid=12345&w=200&q=80

Solusi ini mudah diterapkan dan berfungsi dengan mulus - tidak ada penundaan yang jelas bagi pengunjung situs web, bahkan pada halaman dengan 20-30 gambar.

Kami melakukan ini semua dengan .net, meskipun saya juga telah menulis skrip ukuran gambar PHP yang melakukan hal yang sama.

Semoga itu bisa membantu, Adam

— adam
sumber

Yang lucu bagi saya adalah bahwa "mengubah ukuran" sebenarnya adalah bentuk caching - hanya yang sangat primitif dan terbatas. Caching setelah permintaan pertama adalah pendekatan yang biasa, dan - biasanya - yang lebih baik. Pengecualiannya adalah ketika Anda sebaliknya akan berurusan dengan volume besar data sekaligus , yang mungkin tidak terjadi di sini.

— Aaronaught

Brilliant @Adam (itu yang berbahasa Inggris terbaik saya), terima kasih atas posting yang bijaksana. Aku pergi.

— Steve

2

Pengolah Gambar

Imageprocessor adalah pustaka yang ringan dan dapat diperpanjang yang ditulis dalam C # yang memungkinkan Anda untuk memanipulasi gambar saat bepergian menggunakan .NET

Mengubah ukuran dengan cepat:

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff

ImageProcessor.Web hadir dengan caching sebagai standar. Setiap gambar yang diproses secara tidak sinkron di-cache baik di browser dan di server selama yang Anda pilih. Tembolok server secara cerdas menyimpan jutaan gambar dan secara diam-diam memperbarui sendiri jika gambar asli diubah atau cache kedaluwarsa.

— Soren
sumber

1

Dengan asumsi bahwa thumbnail hanyalah versi yang diubah ukuran dari gambar utama, maka saya pikir itu harus dilakukan pada waktu unggah, tetapi mungkin dijadwalkan sebagai pekerjaan latar belakang agar tidak mempengaruhi proses lain. Jika Anda mengubah ukuran dengan cepat, pastikan Anda men-cache gambar.

Yang menarik dari semua ini adalah bahwa thumbnail terbaik untuk beberapa gambar bukanlah ukuran sederhana dari master; Anda mungkin perlu memperbesar dan memperkecil dengan cara yang didorong oleh manusia. Anda mungkin ingin melakukan pengubahan ukuran otomatis, tetapi memiliki mekanisme yang memungkinkan penggantian dalam kasus-kasus khusus ini.

— Peter Rowell
sumber

0

Sedikit variasi pada apa yang disebutkan Adam:

(1) membuat halaman kesalahan khusus (aturan untuk gambar)

(2) Struktur nama file gambar harus:

ImageId_Width_Height_Quality

Satu-satunya pengecualian adalah gambar asli dan harus dinamai:

ImageId_Original

(3) Pada unggahan file misalnya: 1245_Original -> semua file dengan 1245_ * harus dihapus

(4) Halaman kesalahan khusus (dengan asumsi 1245_Original Exists) harus membuat secara dinamis file gambar yang diminta misalnya:

1245_250_400_80.jpg

dan juga melayani putaran pertama kalinya.

Akibatnya mengunggah gambar baru membersihkan cache.

— Malam gelap
sumber