En iyi uygulama - görüntüleri web sitesinde işleme

MVC 3'e eski bir e-ticaret sitesi taşıyorum ve tasarım geliştirmelerinden yararlanmak istiyorum. Site şu anda 3 boyutta depolanmış ürün resimlerine sahiptir: küçük resim, orta (bir listede görüntülemek için) ve yakınlaştırılmış bir görünüm için genişletilmiş. Şu anda tam olarak doğru boyutta 3 ayrı resim yüklemek zorundayız, sitenin beklediği 3 farklı ad sağladık vb. Bir acıdır.

Yalnızca 1 dosya, büyük dosya yüklemek istiyorum, ardından sitenin gerekli boyutlara indirmesini istiyorum ve kullanıcı tercihlerine, form faktörüne (ör. Mobil, iPad) bağlı olarak küçük resim ve liste boyutlarını değiştirme esnekliği istiyorum , masaüstü) vb. için aynı resmin birçok kopyasına ihtiyaç duyulabilir. Benim sorum, görüntü küçültülmeli ve sonra yükleme sırasında birkaç kez kaydedilmelidir ve eğer öyleyse iyi bir depolama / adlandırma kuralı nedir?

Diğer fikir, yalnızca tek bir görüntüyü saklamak, ancak istemciye sunmadan önce programlı olarak yeniden boyutlandırmaktır. Bunu yapan var mı ve birkaç makine döngüsünün yanı sıra ödünleşmeler nelerdir? Geçici bir görüntüyü bellekte istemciye nasıl iletirsiniz (URL yoktur)?

İngiltere merkezli bir seyahat şirketi için baş geliştiriciyim. Uyguladığım projelerden biri, görüntü kütüphanemizin sitemize fotoğrafçılık sağlamak için otomatik olarak sorgulanabilen bir web versiyonuydu. Web sitesinde yaklaşık 60-70k kullanılabilir (en yüksek puan alan) yaklaşık 150k resim içerir.

Yaklaşık 5 boyut tanımlayarak, bu boyut sürümlerini anında oluşturarak ve Amazon S3'te depolayarak başladık. Fiyat çok düşüktü, ancak Amazon zarif bir şekilde başarısız olmak için inşa edildi, bu yüzden çoğu zaman eksik görüntüleri görürüz. Sitemizi ne kadar çok geliştirirsek, yalnızca beş boyutta resim kullanmaktan o kadar nefret ettik.

Dinamik bir yeniden boyutlandırma modeline geçtik, böylece herhangi bir görüntünün URI'sine genişlik ve / veya yükseklik parametreleri ekleyerek bu boyutta anında görüntülenmesini sağlayabiliyoruz. Yeniden boyutlandırılan görüntüyü önbelleğe alırız (istek URI'sının MD5 karmasını dosya adı olarak kullanarak).

Görüntü # 12345 (resimlerimiz bir db aracılığıyla getirilir, ancak bunu bir dosya yolu ile değiştirebilirsiniz) 200 genişliğinde ve jpg kalitesinde% 80, URI biçimi şöyle olur:

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

Bu çözümün uygulanması kolaydı ve sorunsuz çalışıyor - 20-30 resimli sayfalarda bile web sitesi ziyaretçisinde fark edilebilir bir gecikme yok.

Tüm bunları .net ile yapıyoruz, ancak aynı şeyi yapan bir PHP resim yeniden boyutlandırma komut dosyası yazdım.

Umarım yardımcı olur, Adam

ImageProcessor

Imageprocessor, C # ile yazılmış, .NET kullanarak anında görüntüleri değiştirmenize izin veren hafif, genişletilebilir bir kütüphanedir

Anında yeniden boyutlandırma:

<!--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 standart olarak önbelleğe alma ile birlikte gelir . İşlenen herhangi bir görüntü, seçtiğiniz tarayıcıda hem tarayıcıda hem de sunucuda eşzamansız olarak önbelleğe alınır. Sunucu önbelleği milyonlarca görüntüyü akıllıca depolar ve orijinal görüntü değişikliği veya önbellek süresinin dolması durumunda sessizce kendini günceller.

Küçük resmin sadece ana görüntünün yeniden boyutlandırılmış bir sürümü olduğunu varsayarsak, yükleme sırasında yapılması gerektiğini düşünüyorum, ancak belki de diğer işlemleri etkilemeyecek şekilde bir arka plan işi olarak planlanmış olur. Anında yeniden boyutlandırırsanız, görüntüyü önbelleğe aldığınızdan emin olun.

Bütün bunlar, bazı görüntüler için en iyi küçük resmin , master'ın basit bir yeniden boyutlandırılması değil ; insan odaklı bir şekilde yakınlaştırıp kırpmanız gerekebilir. Bir şeyi otomatik olarak yeniden boyutlandırmak isteyebilirsiniz, ancak bu belirli durumlarda geçersiz kılmaya izin veren bir mekanizmaya sahip olabilirsiniz.

Adem'in bahsettikleri konusunda ufak bir değişiklik:

(1) özel bir hata sayfası oluşturma (resimler için kural)

(2) Görüntü dosya adlarının yapısı şöyle olmalıdır:

ImageId_Width_Height_Quality

Tek istisna orijinal görüntüdür ve şu şekilde adlandırılmalıdır:

ImageId_Original

(3) Dosya yüklemesinde örneğin: 1245_Original -> 1245_ * olan tüm dosyalar silinmelidir

(4) Özel hata sayfası (1245_Original Var Olanlar) dinamik olarak istenen resim dosyasını oluşturmalıdır (ör:

1245_250_400_80.jpg

ve ayrıca ilk seferde servis yapın.

Aslında yeni bir resim yüklemek önbelleği temizler.