Mein Website-Logo hat eine Größe von 300x50 px. Es sieht auf dem Desktop gut aus. Aber wenn ich meine Website auf Mobilgeräten öffne, wird sie kleiner und sieht verschwommen aus, als ob es Pixel um ihren Rand herum gibt.Wie macht man ein kleines Logo auf dem Handy scharf?
Wie kann ich es selbst in sehr kleiner Größe scharf aussehen lassen?
Verwenden Sie ein SVG lieber dann Ico Format. Ico-Formate sind wenig DIM im Vergleich zu SVG
Ihr unscharfes Bild Problem kommt wahrscheinlich von der Verwendung eines nicht-Retina oder HiDPI-Bild auf einem Retina/HiDPI-Gerät. Das bedeutet, wenn Sie ein 300x50px Bild scharf auf einem Retina Gerät sehen wollen, müssen Sie entweder ein vektorbasiertes Bild (zB SVG) oder ein doppeltes (2x - zB iPhone6 - 600x100px) oder dreifaches Bild (3x - zB iPhone 6) verwenden Plus - 900x150px)
Verwenden Sie srcset. Mit Srcset können Sie mehrere Bilder zu einem img-Element hinzufügen, damit Browser, die es unterstützen, das richtige Bild für das Gerät auswählen können. Da Browser, die srcset nicht unterstützen, einfach auf src zurückgreifen, besteht kein Risiko.
<img src="myNormalImgForOldBrowsers.jpg" srcset="highResImg.jpg 2x, ultraHighResImg.jpg 3x" alt=" " />
In diesem Beispiel habe ich JPGs, aber die Bilder im srcset Beispiel erklärt ebenso leicht SVG
Was Sie verwenden mobiles Gerät sein könnte? Wenn es sich um ein Display mit einer x2-Skala handelt, müssen Sie ein größeres Logo verwenden, da Ihr Gerät das Bild auf die gewünschte Größe skaliert und es dann nicht besonders scharf aussieht. – beeef
Verwenden Sie ein Vektorbildformat? – jonrsharpe
Ich habe einige gelesen und sie schlagen Benutzer Tracing-Funktion auf AI oder Photoshop vor. Ich habe es versucht und es hat nicht funktioniert. Nicht sicher, ob ich es richtig mache oder nicht. (Ich habe vorher weder KI noch Photoshop benutzt :() – KingkongP