My website logo has size of 300×50 px. It looks fine on desktop. But when I open my site on mobile, it gets smaller and looks blur like there are pixels around its edge.
How can I make it looks sharp even in very small size?
My website logo has size of 300×50 px. It looks fine on desktop. But when I open my site on mobile, it gets smaller and looks blur like there are pixels around its edge.
How can I make it looks sharp even in very small size?
2
Answers
Use a SVG Rather Then Ico Format. Ico Formats Are Little Bit DIM as compared to SVG
Your blurred image issue probably comes from using a non-retina or HiDPI image on a retina/HiDPI device. This means if you want to a 300x50px image to look sharp on a retina device you either need to use a vector based image (e.g. SVG) or a double(2x – e.g. iPhone6 – 600x100px) or triple sized image(3x – e.g. iPhone 6 Plus – 900x150px)
Use
srcset
. Srcset allows you to add multiple images to one img element allowing browsers that support it to pick the correct image for the device. As browsers that don’t supportsrcset
just fall back tosrc
, there is no risk.In this example I have used jpgs, but the images declared in the srcset example could just as easily be SVG