Bilder werden in Blogbeiträgen runterskaliert

[bulli]

Hallo.

ich bin gerade dabei einen Blogbeitrag zu verfassen. in dem Blog soll zwischen textbereichen immer mal bilder dargestellt werden.

Die auflösung beträgt ca 1000*500

jedoch werden diese dann auf ca 480*159 runterskaliert.

kann ich das umgehen? ich brauch unbedingt die größere auflösung.

ich hab es mit jpg und png files versucht

[Gabe]

Hey @bulli 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Die Themes arbeiten auch auf unterschiedlicher Weise mit Bilder und du hast dein Theme nicht erwähnt. Du kannst deine Bilder und deren Verhalten aber gerne in der Developer Console selber analysieren - siehe meinen Artikel dazu hier. Da wirst du wahrscheinlich erkennen können, dass deine Bilder in .webp umgewandelt werden. Aber siehe weitere Tipps und Ressourcen dazu unten, wie du die Bilder optimieren kannst:

Aber alles zu den Bilder im Theme wird in unserem englischen Blogartikel hier erläutert. Siehe da den Abschnitt "Blog Images". Hier auch ein Community Thread zum Thema.

Ein paar weitere pro-Tipps dazu:

• Hochauflösende Bilder hochladen: Shopify erlaubt Bilder bis zu 4472 x 4472 Pixel. Stelle sicher, dass deine hochgeladenen Bilder hochauflösend, aber innerhalb dieses Limits sind, um Qualitätsverluste während der Kompression zu minimieren​ (Shopify)​.

• SVG-Format verwenden: Einige Benutzer haben festgestellt, dass das Hochladen von Bildern im SVG-Format die Qualität besser beibehält als andere Formate wie JPG oder PNG. SVGs sind vektorbasierte Bilder und verlieren beim Skalieren keine Qualität​ (Shopify Community)​.

• Bilddimensionen optimieren: Stelle sicher, dass deine Bilder den empfohlenen Dimensionen für ihre spezifische Verwendung entsprechen. Für Blogbilder empfiehlt Shopify 1200 x 800 Pixel für die Desktopansicht​ (Shopify)​. Die Verwendung der richtigen Dimensionen hilft, unnötiges Skalieren durch die Plattform zu vermeiden.

• Überprüfen der Theme- und CSS-Einstellungen: Manchmal kann die Art und Weise, wie Bilder durch das CSS deines Themes behandelt werden, zu Unschärfe führen. Stelle sicher, dass das CSS die Bilder nicht in einer Weise streckt oder komprimiert, die die Qualität verschlechtert. Durch Anpassung oder individuelles Codieren der Bildanzeige kann die Klarheit beibehalten werden​ (Shopify Community)​​ (Shopify Community)​.

• Responsive Bilder verwenden: Implementiere Techniken für responsive Bilder mit Attributen wie srcset, um verschiedene Bildgrößen für verschiedene Geräte bereitzustellen. Dies stellt sicher, dass das bestmögliche Bild basierend auf der Bildschirmgröße des Benutzers angezeigt wird, was sowohl die Qualität als auch die Ladezeiten verbessert​ (Shopify)​.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[bulli]

Hallo Gabe,

vielen Dank für die schnelle rückmeldung.

hier ist mal ein link zu dem Artikel. Der Artikel ist noch in Bearbeitung und nicht fertig.

Die Grafik vom "Mahlgut vor der Extration" ist mit 1784*590 pixeln hochgeladen. wird aber irgendwie limitiert. 

Wenn man die Bilder in einem neuen Tab öffnent, werden diese in voller Größe Dargestellt. 

ich benutze das 'Craft' Theme. 

ich bin jetzt mal durch all deine links und dein video durch und habe leider nichts gefunden, was sich auf meine Problemstelleung anwenden ließe.

Von dem vitool aus deinem vido könnte man meinen, dass ein unsichtbarer dei Bilder im Blog begrenzen würde

[Gabe]

Hey @bulli 

Du meinst dieses Bild, korrekt? Wenn ja, da ist irgendwo ein 🪱 drin denn es gibt den folgenden Fehler:

Ich habe es mal aufgeblasen auf 27" 4k und konnte eigentlich keine grosse runterskalierung erkennen: https://screenshot.click/12-27-3fz6t-6uojt.png 

Probiere mal folgendes im Liquid Code:

• Setze die Breite und Höhe des Bildes direkt im HTML-Tag, um sicherzustellen, dass das Bild nicht skaliert wird.

<div style="text-align: left;">
    <img src="https://cdn.shopify.com/s/files/1/0814/9631/0100/files/Mahlgut.jpg?v=1718118841" 
         alt="" 
         style="float: none; width: 1000px; height: 500px;">
</div>

• Du kannst auch eine Klasse in deinem CSS definieren, die die Bilder in der gewünschten Größe darstellt.

.full-width-image {
    width: 1000px;
    height: 500px;
    max-width: 100%;
    height: auto;
}

• Und dann im HTML anwenden:

<div style="text-align: left;">
    <img src="https://cdn.shopify.com/s/files/1/0814/9631/0100/files/Mahlgut.jpg?v=1718118841" 
         alt="" 
         class="full-width-image">
</div>

• Hier etwas CSS um sicherzustellen, dass Bilder nicht auf eine niedrigere Auflösung skaliert werden:

img {
    max-width: 100%;
    height: auto;
}

Das sollte sicherstellen, dass die Bilder ihre maximale Breite ausnutzen und proportional in der Höhe skaliert werden, ohne dass sie über die verfügbaren Containergrößen hinausgehen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[bulli]

hey @Gabe 

ja. genau. das ist eines der bilder. hier ist das original (1200*397) und bei mir wird es so im browser ausgegeben. 

ich habe jetzt ein wenig rumprobiert und auf die Bilder einenLink gelegt. so dass man auf das original bild gelangt, wenn man auf die miniaturansicht klickt. 

[Gabe]

@bulli 

Probiere mal meinen obigen Code Vorschlag aber vorzugsweise nur den CSS und unserer Anleitung hier.

Probiere auch den folgenden:

.original-size-image {
   width: auto; /* Bild mit natural width */
   max-width: 100%; /* Verhindert overflow in kleineren containers */
   height: auto; /* Aspect Ratio beibehalten */
   display: block; /* Bestimmt - no extra space below image */
   margin: 0 auto; /* Bild zentrieren */
}

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[bulli]

wow. danke für die detaillierte Hilfe @Gabe 

ich bin leider keine html- oder css-programmierer. 

ich habe alle 3 bespiele des css-codes in meinem Theme unter benutzerdefiniertes CSS versucht. jedes mal ein den block eingefügt, gespeichert und dann im blog fenster wo ich den blogbeitrag erstelle ggf auch speichern und Vorschau gewählt. in der Darstellung hat sich nie etwas verändert

<div style="text-align: left;">
    <img src="https://cdn.shopify.com/s/files/1/0814/9631/0100/files/Mahlgut.jpg?v=1718118841" alt="" style="float: none; width: 1000px; height: 400px;">
</div>

<div style="text-align: left;">
    <img class="full-width-image" alt="" src="https://cdn.shopify.com/s/files/1/0814/9631/0100/files/Mahlgut.jpg?v=1718118841">
</div>

die bilder werden  offensichtlich in der breite begrenzt auf 762 pixel 

---

<div style="text-align: left;">
<img src="https://cdn.shopify.com/s/files/1/0814/9631/0100/files/Mahlgut.jpg?v=1718118841" alt="" style="float: none; width: 1000px; height: 400px;">
</div>

<div style="text-align: left;">
<img class="full-width-image" alt="" src="https://cdn.shopify.com/s/files/1/0814/9631/0100/files/Mahlgut.jpg?v=1718118841">
</div>

[Gabe · Accepted solution]

@bulli 

Ach, leider sieht es nicht gut aus da irgendwie die Bilder im Blog nicht änderbar sind. Ich habe es jetzt mit folgenden zwei CSS Snippets ausprobiert aber ohne Erfolg:

img {
   max-width: none !important;
   width: auto !important;
   height: auto !important;
}

Und:

<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Beispielseite</title>
 <style>
   img {
     max-width: none !important;
     width: auto !important;
     height: auto !important;
   }
 </style>
</head>
<body>
 <p>
   <span>
     <img src="//cdn.shopify.com/s/files/1/0002/2783/5906/files/shopify-retail-kit_large.jpg?v=1560939191" alt="" style="display: block; margin-left: auto; margin-right: auto;">
   </span>
 </p>
</body>
</html>

Enttäuschend ...

[bulli]

hey @Gabe ,

vielen dank für deine Mühe. vor allem für die schnelle Unterstützung. 💪

Ich werd mich mit den links auf den Bilder behelfen. 

[bulli]

bei mir hat das jetzt geholfen 

[Gabe]