Problem beim Zoomen von Webseitenbildern oder Qualitätsverlust auf Mobilgeräten

Ich erstelle eine responsive Website und mein Logo verliert an Qualität, wenn ich die Website auf einem Mobilgerät (iPhone, Android) öffne http://kadmos.li/web/ji/stck.html Meine Logogröße beträgt 266 x 68 Pixel und ich bin die Größe nicht auf eine ansprechende Größe ändern. Wenn ich diesen Link im Desktop-Browser öffne, ändert sich die Qualität des Logos nicht, aber wenn ich ihn auf iOS oder Android öffne, sieht das Logo nicht gut aus.Geben Sie hier die Bildbeschreibung ein

Als Lösung habe ich mein Logo 2x größer gemacht, die Bildbreite beträgt jetzt 532px statt 266px. Da ich aber eine feste Breite von 266px für mein Logo benötige, habe ich dies mit CSS eingestellt. Und es scheint alles in Ordnung zu sein und es sieht auf allen Browsern und Geräten gut aus. http://kadmos.li/web/ji/solution.html

Aber in jedem Fall ist es nicht gut, das Bild 2x größer zu haben, als Sie brauchen. Und dafür möchte ich fragen, ob jemand mit einem solchen Problem konfrontiert war und eine bessere Lösung dafür hat.

Vielen Dank im Voraus

Hallo! Möchten Sie ein Beispiel mit Ihrem Logo in Originalgröße hochladen? Dann ist es einfacher festzustellen, was schief läuft.
Du kannst nicht beides haben. Sie verwenden entweder 2x-Bilder, damit es auf Retina-Bildschirmen gut aussieht, oder Sie tun es nicht und akzeptieren, dass es auf Retina-Displays leicht verschwommen aussieht. FWIW, für Dinge wie Logos und Symbole bedeutet das Bild mit 2x in Pixelabmessungen selten, dass es 2x in der Dateigröße ist. Oft können Sie die Pixel verdoppeln, aber die Dateigröße nur geringfügig erhöhen.
Danke für Rückmeldungen, burnso das Logo ist in Originalgröße in den Links verfügbar, die ich gepostet habe

Antworten (4)

Ehrlich gesagt sehe ich das Problem nicht wirklich. Das Erhöhen der Auflösung dieses bestimmten Bildes sollte nicht zu einer sehr viel größeren Dateigröße führen. Zumindest nicht, wenn Sie es richtig komprimieren.

In jedem Fall ist es wahrscheinlich die beste Option, Medienabfragen wie hier aufgeführt zu verwenden :

Zum Einbinden von hochauflösenden Grafiken, aber nur für Bildschirme, die diese nutzen können. "Retina" ist "2x":

@media  (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi)
{ 
    /* Retina-specific stuff here */ 
}

Oder andere hochauflösende:

/* 1.25 dpr */ @media  (-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */ 
}

/* 1.3 dpr */ @media  (-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */ 
}

/* 1.5 dpr */ @media  (-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */ 
}

Andere geeignete Lösungen, wie die Verwendung von SVG mit einem PNG-Fallback, sind hier und hier aufgeführt .

Ich würde vorschlagen, dass Sie Ihr Logo als .svgDatei exportieren, damit es in Retina-Geräte passt, wenn dies Ihr beabsichtigtes Ziel ist. Da SVG nicht von allen Browsern vollständig unterstützt wird, würde ich vorschlagen, PNG-Fallback mit Modernizr zu implementieren:

<img src="logo.svg" onerror="this.src=logo.png">

if (!Modernizr.svg) {
  $("img[src$='.svg']")
    .attr("src", fallback);
}

SVG-Fallback per CSS-Tricks

Danke für den Kommentar, im Moment interessiere ich mich mehr für PNG-Lösungen, aber ich werde auch das überprüfen

1.-Sie müssen einen Bildtyp "png" für Tropfenverzerrungen verwenden (Verwenden Sie natürliche Größen für mobile Geräte). 2.-Überprüfen Sie die Bildschirmauflösung von Mobiltelefonen. Der Auflösungsbildschirm der heutigen Tage ist großartig
.

<meta name="viewport" content="width=device-width,user-scalable=no">

3.-Verwenden Sie ein benutzerdefiniertes CSS-Bild für den mobilen Anteil

  header {
    background: -webkit-image-set( url(images/logo.jpg)    1x,
                                   url(images/logo_2x.jpg) 2x);
    height: auto; /* height in CSS pixels */
    width: 1064/* width in CSS pixels */px;
}

Verwenden Sie auch die Größe in Pixeln, die Sie benötigen

Verwenden Sie die Empfehlung wie hier

Das Festlegen der Breite des imgIn und an sich wird das Problem nicht beheben. Das Bild muss außerdem doppelt so groß sein wie die Größe, die Sie in HTML/CSS angeben.

Ich würde vorschlagen, dass Sie eine SVG-Datei aus dem ursprünglichen Logo-Creative erstellen

Hallo Shailesh, willkommen bei GDSE und danke für deinen Beitrag. Könnten Sie bitte Ihre Antwort erweitern? Warum ist Ihre Antwort eine gute Lösung für die Frage? Wir mögen motivierte, argumentierte Antworten, damit sie auch für spätere Besucher von Wert sind. Nochmals vielen Dank und viel Spaß auf der Seite!
Problem beim Zoomen von Webseitenbildern oder Qualitätsverlust auf Mobilgeräten
AntwortenHierDatenschutz-Bestimmungen1y, 0v