2016-05-30 14 views
0

Wir verwenden einen thumbor Image-Server, um automatisch unterschiedliche Auflösungen von Bildern zu generieren, die von unseren Benutzern hochgeladen wurden.Namenskonventionen für verschiedene Größen eines Bildes

Die Bilder werden an verschiedenen Orten verwendet: mittelgroße Profilbilder, kleine Bilder bei Listen, größere Bilder auf Detailseiten, noch größere Bilder in Galerien. Einige Varianten haben ihr ursprüngliches Seitenverhältnis, andere müssen in einen 4: 3 Rahmen eingepasst werden und haben einen grauen Hintergrund.

Bildgrößenbezeichner wie "klein", "mittel" und "groß" haben keine Bedeutung und können alles bedeuten. Leider habe ich keine dokumentierte Namenskonvention für diese Situation gefunden.

Welche Namenskonventionen für Bildgrößen sind bekannt und welche funktionieren am besten in der Webanwendungsumgebung?

+0

Warum mit dem Pixel nicht für die Namensgebung bemessen? Es ist skalierbar, da Sie nicht auf einvernehmliche Benennungen wie "size1", "size2", "size3" eingeschränkt sind (weil, was ist, wenn Sie eine neue Größe zwischen 'size1' und 'size2' brauchen), oder 'small', 'medium ',' groß '(aus dem gleichen Grund). imgx48, imgx96, imgx250 scheint einfach zu mir ... – Narxx

+0

Ich mag die Bootstrap-Stil Namenskonvention: xs, sm, md, lg, xl. Zum Beispiel 'org-md-pp' Tag für' original frame, midium sized, Profilbild'. Und '4.3-sm-gp' für' 4: 3 Rahmen, klein, Galeriebild'. –

+0

@EmreBolat Bootstrap's Namenskonventionen haben dafür gesorgt, dass es nur 3 Knickpunkte gibt. Wenn Sie weitere Größen hinzufügen möchten, müssen Sie sehr kreativ mit Ihren Namenskonventionen umgehen. feste Größen Namensgebung sinnvoll, sie sind leicht zu lesen und skalierbar. – Narxx

Antwort

0

Wir haben mit der folgenden Lösung angesiedelt:


  1. Zuerst haben wir eine Liste aller Bildgrößen, deren Seitenverhältnis und Stile, die im Frontend benötigt werden.
  2. Wir haben sie in Eimer mit ähnlichen Größen, demselben Seitenverhältnis und denselben Stilen gruppiert
  3. Sie haben einen Namen abhängig von der Position ihrer Verwendung, ihrem Stil und ihrer Größe/Aspekt.

Am Ende hatten wir eine Liste mit den folgenden Namen:

  • thumbnail (kleine Bilder, 40px breit)
  • small (passen in 300x225)
  • list43grey (für einige Listenansichten , 4: 3 Seitenverhältnis, grauer Hintergrund)
  • listquad (für einige Listenansichten, Seitenverhältnis 1: 1, Crop-Fit)
  • detail (großes Bild auf Detailseiten, 800x400)
  • fullscreen (Voll screenbares Galerie, 1600x1200)
1

Meine Empfehlung wäre so etwas wie dieses:

alle unterschiedlichen Verhältnisse Betrachten Sie auf das System haben, zum Beispiel:

  • 2x3
  • 1x1
  • 1x2
  • 3x4

Geben Sie e ach einen Namen, wie:

  • 2x3 - Landschaft
  • 1x1 - Quadrat
  • 1x2 - verbreiten
  • 3x4 - Porträt

dann die Namen als Präfixe für die verschiedenen Größen verwenden für Jedes Bild:

landscape_300 ergibt ein Bild mit 3x4-Verhältnis, 300px breit.

Square_96 ein 96px x 96px Bild ergeben, und so weiter ...

Verwandte Themen