Ergebnis 1 bis 27 von 27

Thema: Bilder Webtauglich machen

  1. #1
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard 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

  2. #2
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.813
    Partner-ID
    7421

    Standard

    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)
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen



  3. #3
    Contao-Nutzer Avatar von mokaki
    Registriert seit
    19.12.2009.
    Ort
    Bayern
    Beiträge
    154

    Standard

    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.

  4. #4
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    5.944
    Partner-ID
    107
    User beschenken
    Wunschliste

    Standard

    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.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    It's OpenSource. So invest with your code, your time to test and your support.

  5. #5
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard

    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

  6. #6
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.813
    Partner-ID
    7421

    Standard

    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.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen



  7. #7
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard

    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?

  8. #8
    Contao-Nutzer
    Registriert seit
    18.06.2017.
    Beiträge
    189

    Standard

    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.

  9. #9
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard

    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?

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

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

  11. #11
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard

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

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    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.

  13. #13
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard

    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?

  14. #14
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    Die Einstellung findest du im Seitenlayout.

  15. #15
    Contao-Fan
    Registriert seit
    14.09.2014.
    Beiträge
    263

    Standard

    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.

  16. #16
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Schnubi Beitrag anzeigen
    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.

  17. #17
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    140

    Standard

    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!

  18. #18
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    PHP-Code:
    <?php if ($image $this->getImageObject($inhalt->image, [nullnull1])): ?>
      <?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)

  19. #19
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    140

    Standard

    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'
                        
    ),
                    ), 
    Geändert von Eva (13.01.2021 um 16:44 Uhr)

  20. #20
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    PHP-Code:
    <?php if ($image $this->getImageObject($inhalt->image, [nullnull1])): ?>
      <?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)

  21. #21
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    140

    Standard

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

  22. #22
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

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

  23. #23
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    140

    Standard

    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!

  24. #24
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Eva Beitrag anzeigen
    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, [nullnull1], null'impressionen', ['fullsize' => true'overwriteMeta' => true'imageTitle' => implode(', 'array_filter([$inhalt->kurstitel$inhalt->kursleitung]))])): ?>
      <?php $this->insert('image', (array) $image); ?>
    <?php 
    endif; ?>
    (ungetestet)

  25. #25
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    140

    Standard

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

    Liebe Grüsse
    Eva

  26. #26
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    25.814
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

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

  27. #27
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    140

    Standard

    Das mache ich gerne

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •