Bilder haben nach Veröffentlichung anderes Format

    Hallo zusammen,

    ich habe auf meiner Seite ein Bilderkarussel eingefügt. Dieses Soll mit den Maßen 1200 X 400 (H/B) angezeigt werden (habe ich auch entsprechend so eingestellt). Im Bearbeitungsmodus und im Responsivemode wird mir das dann auch entsprechend angezeigt. Wenn ich die Seite aber veröffentliche, wird mir das Bild in Originalformat riesig angezeigt. Ich verstehe nicht, warum. Ist das ein Schnittstellenproblem zwischen Elementor und Wordpress? Hier noch der Link: https://lebenszeitevents.de/schulklassestadtfuehrung

    Ich bin schon die ganze Zeit am Suchen, habe aber noch keine Lösung gefunden. Es wäre ein Traum, wenn mir jmd von Euch helfen könnte!

    Danke Euch schon mal!
    ivi

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von iviski


    ich habe auf meiner Seite ein Bilderkarussel eingefügt. Dieses Soll mit den Maßen 1200 X 400 (H/B) angezeigt werden (habe ich auch entsprechend so eingestellt).

    Code
    <div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7032-scaled.jpg" alt="_DSC7032" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7514-scaled.jpg" alt="Stadtführung 1234" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7853-scaled.jpg" alt="_DSC7853" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7922-scaled.jpg" alt="_DSC7922" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7778-scaled.jpg" alt="_DSC7778" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2022/02/191124_LebenszeitEvents_Stadtfuehrung-133-2-1-scaled.jpg" alt="191124_LebenszeitEvents_Stadtfuehrung-133 (2)" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2022/02/191124_LebenszeitEvents_Stadtfuehrung-9-scaled.jpg" alt="191124_LebenszeitEvents_Stadtfuehrung-9" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2022/02/191124_LebenszeitEvents_Stadtfuehrung-52-scaled.jpg" alt="191124_LebenszeitEvents_Stadtfuehrung-52" /></figure></div>            </div>

    Responsive Images sieht in Webdesign sieht eigentlich anders aus. auch das Format 1200 x 400 wäre dann falsch. Danach verwendet der Slider die -scaled version also auf 25x0px reduzierte Bilder.

    Anmerkung, die Alt-Tags sind eine Geringschätzung https://www.einfach-fuer-alle.de/

    Mit offenen Augen träumen

    Zitat von r23
    Code
    <div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7032-scaled.jpg" alt="_DSC7032" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7514-scaled.jpg" alt="Stadtführung 1234" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7853-scaled.jpg" alt="_DSC7853" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7922-scaled.jpg" alt="_DSC7922" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2020/02/DSC7778-scaled.jpg" alt="_DSC7778" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2022/02/191124_LebenszeitEvents_Stadtfuehrung-133-2-1-scaled.jpg" alt="191124_LebenszeitEvents_Stadtfuehrung-133 (2)" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2022/02/191124_LebenszeitEvents_Stadtfuehrung-9-scaled.jpg" alt="191124_LebenszeitEvents_Stadtfuehrung-9" /></figure></div><div class="swiper-slide"><figure class="swiper-slide-inner"><img class="swiper-slide-image" src="https://lebenszeitevents.de/wp-content/uploads/2022/02/191124_LebenszeitEvents_Stadtfuehrung-52-scaled.jpg" alt="191124_LebenszeitEvents_Stadtfuehrung-52" /></figure></div>            </div>

    Responsive Images sieht in Webdesign sieht eigentlich anders aus. auch das Format 1200 x 400 wäre dann falsch. Danach verwendet der Slider die -scaled version also auf 25x0px reduzierte Bilder.

    Anmerkung, die Alt-Tags sind eine Geringschätzung https://www.einfach-fuer-alle.de/

    Hi r23,
    ich bin ein absoluter Neuling und kann deine Antwort grad nicht 100% einordnen.... warum ist das Format 1200X400 falsch? Was kann ich machen, damit mir die Bilder länglich und nicht im Ursprungsformat angezeigt werden?
    Danke für den Hinweis! ich werde mir das anschauen und dahingehend die Website anpassen!

    Danke Dir für die Hilfe!

    Zitat von iviski


    warum ist das Format 1200X400 falsch?

    Man stellt für Smartphone, Tablet und Desktop unterschiedliche Bildformate zur Verfügung

    Code
    <picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>


    https://developers.google.com/web/fundamenta…sponsive/images

    Zitat von iviski


    ich bin ein absoluter Neuling und kann deine Antwort grad nicht 100% einordnen....

    https://developers.google.com/web/fundamenta…sponsive/images
    es wird hier ein kostenloser Kurs für [size=24]Responsive Images[/SIZE] angeboten
    https://www.udacity.com/course/responsive-images--ud882

    Du könntest auch
    https://www.linkedin.com/learning/responsive-images

    verwenden..

    Mit offenen Augen träumen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden