Best Practice - Umgang mit Bildern auf der Website

Ich portiere eine alte E-Commerce-Site auf MVC 3 und möchte Designverbesserungen nutzen. Auf der Website sind derzeit Produktbilder in drei Größen gespeichert: Miniaturansicht, Mittel (zur Anzeige in einer Liste) und erweitert für einen vergrößerten Look. Im Moment müssen wir 3 separate Bilder hochladen, die genau die richtige Größe haben, 3 verschiedene Namen angeben, die den Erwartungen der Website entsprechen usw. Es ist ein Schmerz.

Ich möchte nur eine Datei hochladen, die große, und dann die Site auf die erforderlichen Größen reduzieren lassen. Ich möchte die Flexibilität, die Größe von Miniaturansichten und Listen abhängig von den Benutzereinstellungen und dem Formfaktor (z. B. Mobil, iPad) zu ändern , Desktop) usw. benötigen daher möglicherweise viele Kopien desselben Bildes. Meine Frage ist, ob das Bild beim Hochladen reduziert und dann mehrmals gespeichert werden soll. Wenn ja, was ist eine gute Speicher- / Namenskonvention?

Die andere Idee besteht darin, nur das einzelne Bild zu speichern, aber die Größe programmgesteuert zu ändern, bevor es dem Client bereitgestellt wird. Hat jemand dies getan und was sind die Kompromisse außer ein paar weiteren Maschinenzyklen? Wie übergeben Sie ein temporäres Bild im Speicher an den Client (es gibt keine URL)?

Ich bin leitender Entwickler für ein in Großbritannien ansässiges Reiseunternehmen. Eines der von mir implementierten Projekte war eine Webversion unserer Bildbibliothek, die automatisch abgefragt werden kann, um Fotos für unsere Website bereitzustellen. Es enthält ungefähr 150.000 Bilder, von denen ungefähr 60-70.000 auf der Website verfügbar sind (die am höchsten bewerteten).

Wir haben zunächst etwa 5 Größen definiert, diese Größenversionen im laufenden Betrieb erstellt und in Amazon S3 gespeichert. Der Preis war minimal, aber Amazon ist so konstruiert, dass es elegant versagt, sodass wir oft fehlende Bilder sehen. Je weiter wir unsere Website entwickelten, desto mehr hassten wir es, nur fünf Bildgrößen zur Verfügung zu haben.

Wir sind zu einem dynamischen Größenänderungsmodell übergegangen, indem wir dem URI jedes Bilds Breiten- und / oder Höhenparameter hinzufügen können, damit es im laufenden Betrieb in dieser Größe gerendert wird. Wir speichern das Bild mit geänderter Größe zwischen (unter Verwendung eines MD5-Hashs des Anforderungs-URI als Dateinamen).

Um das Bild Nr. 12345 (unsere Bilder werden über eine Datenbank abgerufen, aber Sie können dies durch einen Dateipfad ersetzen) mit einer Breite von 200 und einer JPG-Qualität von 80% zu erhalten, lautet das URI-Format:

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

Diese Lösung war einfach zu implementieren und funktioniert nahtlos - selbst auf Seiten mit 20 bis 30 Bildern ist für den Website-Besucher keine Verzögerung erkennbar.

Wir machen das alles mit .net, obwohl ich auch ein PHP-Skript zur Größenänderung von Bildern geschrieben habe, das dasselbe tut.

Hoffe das hilft, Adam

ImageProcessor

Imageprocessor ist eine leichte, erweiterbare Bibliothek, die in C # geschrieben ist und es Ihnen ermöglicht, Bilder mit .NET im laufenden Betrieb zu bearbeiten

Schnelle Größenänderung:

<!--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 wird standardmäßig mit Caching geliefert . Jedes verarbeitete Bild wird sowohl im Browser als auch auf dem Server für eine Länge Ihrer Wahl asynchron zwischengespeichert. Der Server-Cache speichert intelligent Millionen von Bildern und aktualisiert sich automatisch, falls sich das ursprüngliche Bild ändert oder der Cache abläuft.

Angenommen, das Miniaturbild ist einfach eine verkleinerte Version des Hauptbilds, dann sollte es meiner Meinung nach zum Zeitpunkt des Uploads erfolgen, aber möglicherweise als Hintergrundjob geplant werden, um andere Prozesse nicht zu beeinträchtigen. Wenn Sie die Größe im laufenden Betrieb ändern, stellen Sie sicher, dass Sie das Bild zwischenspeichern.

Der Haken dabei ist, dass das beste Miniaturbild für einige Bilder keine einfache Größenänderung des Masters ist. Möglicherweise müssen Sie auf eine vom Menschen gesteuerte Weise zoomen und zuschneiden. Möglicherweise möchten Sie die automatische Größenänderung vornehmen, verfügen jedoch über einen Mechanismus, der in diesen speziellen Fällen eine Überschreibung ermöglicht.

Eine kleine Variation dessen, was Adam erwähnt hat:

(1) Erstellen Sie eine benutzerdefinierte Fehlerseite (Regel für Bilder)

(2) Die Struktur der Bilddateinamen sollte sein:

ImageId_Width_Height_Quality

Die einzige Ausnahme ist das Originalbild und sollte benannt werden:

ImageId_Original

(3) Beim Hochladen von Dateien, z. B.: 1245_Original -> Alle Dateien mit 1245_ * sollten gelöscht werden

(4) Die benutzerdefinierte Fehlerseite (unter der Annahme, dass 1245_Original vorhanden ist) sollte die angeforderte Bilddatei dynamisch erstellen, z.

1245_250_400_80.jpg

und auch beim ersten Mal servieren.

Beim Hochladen eines neuen Bildes wird der Cache gelöscht.