Wie behebe ich die unterschiedliche Bild-Qualität bei Browsern?

[marcelgerard]

Hi Leute,

ich hab etwas was mir total verwirrt. Ich wollte kleinere Bilder in meine Seite eintragen, musste aber entsetzt feststellen, dass z.B Desktop und Smartphone Browser hier völlig gegensätzlich sind. Wenn ich das Bild original in einer Größe von z.B 115x32 Pixel hochlade und es einbette, zeigt der Chrome es scharf an, mein Galaxy S7 aber verpixelt. Lade ich das Bild anschließend einfach mal größer hoch z.B 719x200 Pixel, ist es auf dem Smartphone richtig scharf, aber im Chrome nicht mehr. Da stimmt doch was nicht? Woran liegt das und wie behebe ich das?

LG Marcel

 

[jappi00]

Ohne Quellcode wird es schwierig dir zu helfen

 

[marcelgerard]

hi @jappi00 - also es geht um diese Seite um die kleinen Logos unter der großen Fläche, Amazon, Spotify und Google. Diese Bilder sind im Desktop Browser total in Ordnung, werden aber auf Smartphones unscharf angezeigt.

Der html Code ist das hier:

<section class="as-distri-storeground mainflex-center">
    <ol class="as-distri-items">
        <li><img src="images/site_amazon.png" class="as-distri-item-1" alt=""></li>
        <li><img src="images/site_spotify.png" class="as-distri-item-1" alt=""></li>
        <li><img src="images/site_google.png" class="as-distri-item-1" alt=""></li>
    </ol>
</section>

CSS Code ist das hier:

.as-distri-items {
        display: flex;
        margin: 40px 0;
}

.as-distri-item-1 {
        display: block;
        margin-right: 0 20px;
}

.as-distri-item-2 {
        display: block;
        margin: 0 20px;
}

.as-distri-item-3 {
        display: block;
        margin-left: 20px;
}

Das Bild hat als Größe (Mit Photoshop so bearbeitet) 115x32 Pixel. Ich weiß an sich das Smartphones größere Bilder brauchen, aber wenn ich die Größer mache (Das Original ist 719x200 Pixel groß und gebe mit width und height die 115x32 an, ist es auf den Smartphones scharf, aber auf dem Desktop nicht.

LG Marcel

 

[jappi00]

In dem Code denn du mit geschickt hast setzt du aber nirgendwo die Bildgröße

 

[marcelgerard]

Das liegt daran, dass das Bild im Moment nur so groß ist wie ich es haben will. 115x32 Pixel. Im Browser wird es jetzt mit guter Qualität angezeigt und auf den Smartphones nicht. Wie soll ich es denn am besten machen? Das große Bild mal einsetzen und width und height einsetzen?

LG Marcel

 

[Gelöschtes Mitglied 36401]

So ein Problem ist mir völlig unbekannt. Wenn das Bild eine Originalgröße von 115x32 hat und auch nicht vom Browser skalliert werden muss, zeigt mein Galaxy A5 2017 die Grafik sauber an.

Du meinst die kleinen Grafiken unten auf https://gameplay.artistfy.com/test
Die sehen bei mir tadellos aus.

 

[marcelgerard]

Bei meinem Galaxy S7 sieht man deutlich das das Bild verpixelt ist, was sehr unschön aussieht. Ich verstehe das auch nicht wirklich und es verwirrt mich. Es ist aber auch auf dem Galaxy S5 verpixelt.

 

[Gelöschtes Mitglied 36401]

Auf meinem A5 sieht alles im Firefox und dem Android-Browser ok aus. Kann dein Problem echt nicht nachvollziehen, zumal mir so ein Problem bisher noch nicht zu Ohren gekommen ist.

 

[Tronjer]

Warum bindest du die Social-Media-Icons nicht als SVG ein?

 

[marcelgerard]

Ich verstehe das auch nicht. Ich hab jetzt mal folgendes gemacht. Auf der Seite sind jetzt zwei Logos von Amazon zu sehen. Das linke Logo ist das kleine Bild. Das hat als Original nur 115x32 Pixel. Das rechte Bild ist das große Bild das die Angabe 115x32 Pixel mit width und height hat. Vielleicht erkennt ihr jetzt einen Unterschied zwischen beiden? Mal auf Desktop und Smartphones checken.

@Tronjer ich kenne mich damit leider noch nicht so aus, ich fummel mich da erst rein.

 

[Gelöschtes Mitglied 36401]

Beide Logos sind sowohl auf dem Handy als auch auf dem Notebook bei mir ok. Da stimmt wohl was mit deinen Handys nicht.

 

[marcelgerard]

Wie ich nun erfahren habe, liegt es wohl daran, dass mein S7 alles in ULTRA HD anzeigt, was eine höhere Bildausgabe verlangt. Andere Programmierer sind mit dem Problem auch schon aneinander geraten.

 

[scbawik]

Wie ich nun erfahren habe, liegt es wohl daran, dass mein S7 alles in ULTRA HD anzeigt, was eine höhere Bildausgabe verlangt. Andere Programmierer sind mit dem Problem auch schon aneinander geraten.

Wie @Tronjer bereits angemerkt hat: Logos werden immer, wie auch andere Vektorgrafiken, als SVG eingebunden.
Aber zugegeben, sogar Größen wie Google, MS und co kriegen das teilweise nicht gebacken.

Ansonsten gibt es noch das srcset-Attribut, um Bilder in verschiedenen Auflösungen bereitzustellen.

Und ja, ich kann das Problem sowohl auf meinem Smartphone als auch auf dem 5K Desktop nachvollziehen.

 

[threadi]

Die Lösung per srcset ist die optimale. Hier mal ein Beitrag dazu:
https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/picture

Ich würde auch empfehlen hierbei für höhere Auflösungen auch hochgerechnete Bilder zu verwenden. Hier ein Beispiel: https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/