Bilder Webtauglich machen

Hallo Leute,
ich hab da mal ne frage, wie händelt ihr eure Bilder.

Ich hab eine Seite auf der ich relativ viele Bilder hochlade, diese schneide ich aber vorher alle händisch mit PS zu und speichere die für Web so klein wie möglich.
Das is einfach sau viel Arbeit und die würde ich gerne sparen.

Der Traum wäre wenn ich die Bilder im originalformat hochlade (FTP) und Contao die selbst verkleinert und ich nur einstelle was die max Seitenlängen bei Breit oder Hochformt sind.
Natürlich sollten die auch komprimiert werden sonst wäre das Ladetechnisch natürlich wieder ein Problem.

Ausgeben tu ich alles über Metamodels/lightbox.

Bin gespannt wie ihr das so macht, achja ich kennne Stapelverarbeitung im PS :)

Das was Du willst macht doch Contao schon

• Bildgrößen - responsive images
• webp (ab Contao 4.9)
• Lightbox Bilgrößen (ab Contao 4.9 oder 4.10)

Ich empfehle Lightroom, auch zum sortieren großer Mengen Bilder.

Wenn du nicht so viel ausgeben willst, dann empfehle ich das kostenlose FastStone Image Viewer. Das hat ein um sehr viel einfacher zu bedienende Stapelverarbeitung.

Hallo Schnubi,

nutze für das erste „Eindampfen” der Dateigrößen JPEG.mini ( https://www.jpegmini.com/ ); sonst auch TinyPNG ( https://tinypng.com/ ) - dafür gibt es auch 2 Erweiterungen, die beim Hochladen Dateien schon verkleinern.

Prinzipiell die maximal benötigte Größe / Abmessungen hochladen.

Danke, da sind ja schon einige Vorschläge dabei die anklingen lassen das es was gibt.

Werds morgen mal alles duchgoogeln und mich dann mit weiteren Fragen hier melden :)

tiny.png nutze ich auch fürs erste Eindampfen. Dafür gibt es auch ein Plugin für Photoshop.

Hier noch ein Link zur Erweiterung von Christian Barkowsky, die @planepix oben erwähnt hat https://brkwsky.de/contao-tinypng-tinyjpg-erweiterung

Allerdings dachte ich es geht Dir eher um das was man direkt mit Contao erreichen kann.

Ein Plugin ist auch recht wenns eins is das gepflegt wird, wichtig is mir das ich die Originalbilder hochladen kann und nicht bearbeiten muss, will nur die bearbeiten die nicht gut sind.

Grober Ablauf wie ich das jetzt verstanden habe:
tinypng installieren,dann die Bilder über den Dateimanger hochladen, das komprimiert mir die Dateigrössen der Bilder (natürlich auf Kosten der Qualität) und im Contao Theme erstelle ich unter Bilder einen neuen Eintrag indem ich die maximlern Bildausgabegrössen angebe?

Also ich habe es bei mir so verstanden, dass Contao eigentlich alles an Board hat.
Bilder lade ich hoch und insofern die in den Einstellungen festgelegten Maximalwerte nicht überschritten werden, wird das Bild automatisch verkleinert. Wenn ich dann noch weitere "verkleinerungen" benötige, lege ich diese Bildgrößen im Template an und binde dieses an die entsprechende Stelle in meiner Seite ein. Somit kann ich auch verschiedene Bildgrößen bei unterschiedlichen Auflösungen ausliefern.

Bedenken sollte man meiner Meinung nach auch, wie groß das "Rohmaterial" ist. Ich habe Testweise Bilder im Bereich von 5000px Auflösung (Bildgröße so bei 5-6 MB) auf meinen Server hoch geladen und diese verkleinern lassen. Das erzeugt schon eine ordentliche Systemlast. Wenn es mal um ein zwei Bilder geht ist das sicherlich kein Problem. Wenn du aber 10-20 Bilder hochladen und bearbeiten möchtest, könnte es ein Problem werden.

Hm also ich hab da schon zwischen 10 und ab und zu 60 Bilder pro Upload.

Ich würde gerne festlegen zb. max grösse 1100px/800px (1100px für Bilder im Breitbildformat und 800px falls es hein Hochformat ist) beim Upload sollten die Bilder dann auf diese Grösse zugeschnitten werden und auch die sofort die Dateigrösse für Web optimiert werden.

Wie mmüsste ich das jetzt machen?

Die Bildgröße nach dem Upload kannst du in den System Einstellungen festlegen.

Danke spooky aber dann ist das Bild mit zb 4mb immernoch 4 mb nur halt resized oder?

Nein, wie kommst du darauf? Wenn du ein Bild verkleinerst, wird sich (zumindest bei vergleichbarer Qualitätseinstellung) auch die Dateigröße verkleinern.

Aber brauchst du das überhaupt? In Contao 4.9 kannst du ja eine Bildgröße für die Lightbox einstellen.

Sorry du hast recht, aber natürlich ist dann ein bild immer noch anstelle von 4mb zb 1,2 mb gross und optimiert wäre es vielleicht 250kb.

Sagen wir mal ich hab in einem Eintrag 60 Bilder, diese gebe ich in einem Metamodel aus und lasse nur ein Thumbnail anzeigen, alle anderen Bilder werden mit css augeblendet aber im Hintergrund geladen, somit macht das schon was aus bei der Ladezeit.

Die Einstellung für die Lightbox hab ich noch nicht gefunden, wo wäre die denn, funktioniert das auch im MM bei der Lightbox?

Die Einstellung findest du im Seitenlayout.

Ahh ok hab ich eingestellet, das heisst jedes Bild das in einer lightbox angezeigt wird immer auf meine Settings runtergerechnet wird und dann auf der Seite mit den Werten ausgegeben wird?

Wenn ich das richtig verstanden habe dann fehlt jetzt nur noch der teil für web optimieren umd die Dateigrössen zu verkleinern.

Zitat:

---

Zitat von Schnubi

Wenn ich das richtig verstanden habe dann fehlt jetzt nur noch der teil für web optimieren umd die Dateigrössen zu verkleinern.

---

Manche Hosting Provider bieten das Google PageSpeed Modul zur Aktivierung an. Da werden die Bilder dann automatisch (nach den Gesichtspunkten von Google, was nicht immer "richtig" ist) optimiert.

Wenn ich die Bildgrösse für die Lightbox im Seitenlayout aktiviere, wird das leider nicht übernommen. Ich vermute, es liegt daran, dass ich bei dieser Installation mit einem Rocksolid Custom Element arbeite.

Der Code, mit dem das Bild ausgegeben wird:

HTML-Code:

---

<?php if ($image = $this->arrData['getImageObject']($inhalt->image, array('','',1))): ?>
<div class="bild">
        <a data-lightbox="impresssionen" title="<?php if ($inhalt->kurstitel): ?><?php echo $inhalt->kurstitel ?><?php endif; ?><?php if ($inhalt->kursleitung): ?>, <?php echo $inhalt->kursleitung ?><?php endif; ?>" href="<?php echo $image->singleSRC ?>">
                <?php
                $this->insert('picture_default', $image->picture);
                ?>
        </a>
</div>
<?php endif ?>

---

Kann mir evt jemand weiterhelfen, was ich bei der Ausgabe noch ergänzen muss, damit die Bildgrösse in der Lightbox dann auch greift?
Danke!

PHP-Code:

---

<?php if ($image = $this->getImageObject($inhalt->image, [null, null, 1])): ?>
  <?php $image->fullsize = true; ?>
  <?php $image->overwriteMeta = true; ?>
  <?php $image->imageTitle = implode(', ', array_filter([$inhalt->kurstitel, $inhalt->kursleitung])); ?>
  <?php $this->insert('image', (array) $image); ?>
<?php endif; ?>

---

(ungetestet)

Lieber Spooky

Danke für Deine Antwort. Leider habe ich jetzt keinen Link mehr um das Bild, um es in der Lightbox zu öffnen. Vermutlich liegt es am fehlenden "fullsize"? Es ist hier ein Custom Element mit folgender Config:

PHP-Code:

---

'image' => array(
                    'label' => array(
                        'de' => array('Bild', 'Bitte wählen Sie das gewünschte Bild aus.')
                    ),
                    'inputType' => 'fileTree',
                    'eval' => array(
                        'fieldType' => 'radio',
                        'filesOnly' => true,
                        'extensions' => 'jpg,jpeg,png,gif,svg',
                        'mandatory' => true,
                        'tl_class' => 'w100'
                    ),
                ), 


---

PHP-Code:

---

<?php if ($image = $this->getImageObject($inhalt->image, [null, null, 1])): ?>
  <?php $image->fullsize = true; ?>
  <?php $image->overwriteMeta = true; ?>
  <?php $image->imageUrl = $image->singleSRC; ?>
  <?php $image->imageTitle = implode(', ', array_filter([$inhalt->kurstitel, $inhalt->kursleitung])); ?>
  <?php $this->insert('image', (array) $image); ?>
<?php endif; ?>

---

(ungetestet)

Funktioniert leider immer noch nicht. Es erzeugt nach wie vor keinen Link, um das Bild in der Lightbox zu öffnen.

PHP-Code:

---

<?php if ($image = $this->getImageObject($inhalt->image, [null, null, 1], null, null, ['fullsize' => true, 'overwriteMeta' => true, 'imageTitle' => implode(', ', array_filter([$inhalt->kurstitel, $inhalt->kursleitung]))])): ?>
  <?php $this->insert('image', (array) $image); ?>
<?php endif; ?>

---

(ungetestet)

Perfekt, jetzt funktioniert es :)
Jetzt muss ich nur noch irgendwie das data-lightbox="impressionen" unterbringen, damit man sich durch alle Bilder klicken kann und nicht jedes einzeln öffnen muss.

Hat mir sehr weitergeholfen, danke Dir!

Zitat:

---

Zitat von Eva

Jetzt muss ich nur noch irgendwie das data-lightbox="impressionen" unterbringen, damit man sich durch alle Bilder klicken kann und nicht jedes einzeln öffnen muss.

---

PHP-Code:

---

<?php if ($image = $this->getImageObject($inhalt->image, [null, null, 1], null, 'impressionen', ['fullsize' => true, 'overwriteMeta' => true, 'imageTitle' => implode(', ', array_filter([$inhalt->kurstitel, $inhalt->kursleitung]))])): ?>
  <?php $this->insert('image', (array) $image); ?>
<?php endif; ?>

---

(ungetestet)

Danke!
Jetzt kann ich mich durch alle Bilder klicken, wunderbar!

Liebe Grüsse
Eva

You are welcome ;). Like, subscribe and share! :Þ

Das mache ich gerne :)