​PageObject: Bild

Die Displays der verschiedenen Zugangsgeräte (Smartphones, Notebooks etc.) haben unterschiedliche Größe und Pixeldichten. Moderne Websites stellen pro Bild daher mehrere Versionen zur Verfügung, damit der Browser das für seine Größe kleinstmögliche Bild laden kann. Bei pixolino werden von jedem Bild zwölf Versionen automatisch erzeugt und — wenn gewünscht ladezeitoptimiert — bereitgestellt.

Ein Bild anlegen

Sie können Bilder in den Formaten JPEG (empfohlen) oder PNG24 auf den Server laden. Die Formate GIF und PNG8 eignen sich nicht. Das hochgeladene Bild darf maximal 50 MB groß sein. Die maximale Kantenlänge für im Browser angezeigte Bilder is 1.500 px, was bedeutet dass die Variante für Bildschirme mit dreifacher Pixeldichte mit maximal 4.500 px Kantenlänge generiert wird. Die Kantenlänge der Originaldatei ist nicht begrenzt.

Zu jedem Bild müssen Sie einen Titel eingeben, aus dem automatisch die Dateinamen der generierten Versionen gebildet werden. Das Originalbild wird gespeichert, die Datei allerdings nicht analog der zur Auslieferung bestimmten Versionen benannt. Sie können den Bildtitel auch nachträglich noch ändern, die Dateinamen werden automatisch angepasst.

Für Inhaltsbilder ist eine Bildunterschrift notwendig, die standardmäßig unterhalb des Bildes ausgegeben wird. Die Darstellung — und eventuell das Verhalten bei Berührung mit Maus oder Finger — der Bildunterschrift ist in die Gestaltungsvorlage einprogrammiert.

Inhaltsbilder vs. Schmuckbilder

Auf Websites wird zwischen Inhalt und Gestaltung unterschieden. Meistens ist das Einhalten dieser Trennung Aufgabe des Entwicklers. Bei pixolino übernehmen diese Arbeit der Entwickler der Gestaltungsvorlage und die pixolino-Software. Bei der Einbindung von Bildern ist jedoch auch der Autor der Seite gefragt. Es gilt zu unterscheiden zwischen Bildern, die zum vermittelten Inhalt gehören, und Bildern, die rein dem Design dienen.

Standardmäßig wird ein Bild als Inhalt eingebunden. Mit dem Anhaken der Option »​Bild ist ein Schmuckbild und kein Seiteninhalt« wird das Bild jedoch als Schmuckbild eingebunden — also als Designelement.

Für Schmuckbilder ist keine Bildunterschrift notwendig. Ebenso wird der Titel des Bildes nicht als Alternativtext dem Bild hinterlegt — gleichwohl er ebenfalls zur Bildung des Dateinamens herangezogen wird.

Bildgröße (Breite)

Zur Darstellung des Bildes können Sie zwischen vier Breiten wählen:

  • 25 % Breite
  • 50 % Breite
  • 75 % Breite
  • 100 % Breite

Die Breite können Sie für vier Gerätetypen (Bildschirmgrößen) getrennt festlegen:

  • Rechner mit großem Display und Smart-TVs
  • Notebooks und Desktop-Rechner
  • Tablets
  • Smartphones

Entwickler können die verfügbaren Breite-Optionen je Gerätetyp in der Gestaltungsvorlage einschränken, falls das Design der Vorlage dies verlangt.

Eingabemöglichkeit für die Breite des eingebundenen Bildes: Auf großen Displays wird das Bild mit 50 % Breite, auf Notebooks und Tablets mit 75 % Breite und auf Smartphones mit 100 % Breite dargestellt

​Die Größenangaben können Sie auch nachträglich noch verändern, ohne dass Sie das Bild nochmals hochladen müssen. Die Originaldatei, welche Sie beim Anlegen des Bildes übertragen haben, wird auf dem Server gespeichert. Sobald Sie die Größenangaben ändern, werden die Versionen des Bildes ausgehend von der Originaldatei neu berechnet.

Ausmaße des Bildes in Pixeln

Die tatsächlichen Maße der Bilder (Breite x Höhe in Pixeln) wird bestimmt durch die Angaben zur Spaltenbreite in der Gestaltungsvorlage. Fehlen diese Angaben in der Gestaltungsvorlage, verwendet die Software Standardwerte, die möglicherweise jedoch nicht zur besten Bildqualität führen.

Verschieben per »Drag and Drop«

Wird das Bild zwischen zwei dynamischen Bereichen verschoben, denen unterschiedliche Spaltenbreiten in der Gestaltungsvorlage zugewiesen wurden, dann werden die optimierten Bildversionen entsprechend den Anforderungen des nun aktuellen dynamischen Bereichs neu erstellt. Es kann daher einige Sekunden dauern, bis das Umsortieren eines Bildes abgeschlossen ist.

Bilder, die gepinnt wurden, können nur innerhalb des gleichen dynamischen Bereichs verschoben werden, nicht aber zwischen unterschiedlichen Bereichen. Da alle gepinnten Elemente auf das gleiche Bild verweisen, könnte dieses nicht mehr für den dynamischen Bereiche optimiert werden – da es ja in mehreren Bereichen vorkäme.

Beschränkung des Seitenverhältnisses

Der Entwickler der Gestaltungsvorlage kann für einzelne oder alle dynamische Bereiche das zugelassene Seitenverhältnis der dort platzierten Bilder festlegen. Dies ist dann sinnvoll, wenn das Design nur mit einem bestimmten Bildformat funktioniert, beispielsweise für Bilder, die im Kopfbereich der Seite eingebunden sind (sog. Aufmacherbilder) und daher sehr breit, aber wenig hoch sein dürfen.

Sollte das Bild, das Sie hochgeladen haben, diesem Seitenverhältnis nicht entsprechen, werden die zur Auslieferung an den Browser bestimmten Versionen automatisch beschnitten, sodass sie dem gewünschten Seitenverhältnis entsprechen. Der Mittelpunkt des neuen Bildformats entspricht dem Mittelpunkt der Originaldatei. Beim Zuschneiden wird der größtmögliche Ausschnitt verwendet.

​Ladezeitoptimiert komprimieren

Standardmäßig ist die Option »ladezeitoptimiert komprimieren« aktiviert. Sie bewirkt, dass die für die Auslieferung erzeugten Versionen des Bildes mit einer mittleren Kompression gespeichert werden. Die komprimierten Bilder werden schneller vom Server zum Browser übertragen und damit schneller angezeigt, was das Benutzererlebnis positiv beeinflusst und von Suchmaschinen als aufwertender Faktor gewertet wird.

Wird diese Option nicht gesetzt, werden die Bilder nur mit einer sehr leichten Kompression gespeichert. Sie sollten die Option nur dann abwählen, wenn ein Bild durch die Kompression Artefakte bekommt (das sind Bildstörungen, die vor allem zwischen scharfen Übergängen unterschiedlicher Farben auftreten).

​Kopieren und Einfügen

Wird ein auf der Seite eingebundenes Bild kopiert und woanders eingefügt, werden die Bilddateien (Original und Variationen) kopiert bzw. neu angelegt. Damit ist sichergestellt, dass das Bild für den dynamischen Bereich optimiert ausgeliefert wird und neben einer eindeutige Bildunterschrift auch einen eindeutigen Dateinamen führt. Bildunterschrift und Dateinamen können Sie nach dem Einfügen anpassen — die Einstellungen beim Originalbild bleiben davon unberührt.

Das Einfügen eines kopierten Bildes kann einige Sekunden in Anspruch nehmen, da die Bildvarianten generiert werden müssen, bevor das Bild angezeigt werden kann.

​Verstecken und Löschen

Die Bilddaten (Originaldatei und optimierte Versionen) werden nicht nur dann vom Server entfernt, wenn das PageObject gelöscht wird, sondern auch dann, wenn die Seite, auf der das PageObject platziert wurde, gelöscht wird. Das Löschen kann nicht rückgängig gemacht werden.

​Es genügt nicht, das PageObject auf unsichtbar zu stellen, um die darin bereitgestellten Bilddateien dem Internetzugriff zu entziehen. Sollen die Bilder nicht mehr über das Internet erreichbar sein, müssen Sie das PageObject löschen.

Bilder-Sitemap

Alle freigegebenen Bilder werden automatisch einer Bilder-Sitemap hinzugefügt. Diese Sitemap ist für normale Websitebesucher nicht zu sehen, liefert Suchmaschinen aber Informationen, welche Bilder auf der Website eingebunden sind.

Als für die Sitemap freigegeben gelten alle Bilder, die

  • sichtbar sind (zu erkennen an dem grünen Symbol in der Redaktionsumgebung)
  • nicht als Schmuckbild angelegt wurden
  • sich auf einer Seite befinden, die sichtbar ist (Option »Seite ist sichtbar und kann aufgerufen werden«) …
  • … und für welche die Option »Seite wir in Sitemap aufgeführt« aktiviert ist …
  • … und für welche die Option »Seite darf von Suchmaschinen indiziert werden« aktiviert ist
  • sich innerhalb einer Website befinden, die nicht versteckt oder für Suchmaschinen gesperrt wurde.

Die Bilder-Sitemap wird in der robots.txt automatisch referenziert und ist erreichbar unter:

http://SUBDOMAIN.pixolino.com/sitemap_images.xml
http://DOMAIN/sitemap_images.xml