Photoshop Question posted in
The official user guide can be found here.

How to make a small logo on mobile look sharp? – Photoshop

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?

Tags:

2

Answers


  1. 0

    Use a SVG Rather Then Ico Format. Ico Formats Are Little Bit DIM as compared to SVG

    Login or Signup to reply.
  2. 0

    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 support srcset just fall back to src, there is no risk.

    <img src="myNormalImgForOldBrowsers.jpg" srcset="highResImg.jpg 2x, ultraHighResImg.jpg 3x" alt=" " />

    In this example I have used jpgs, but the images declared in the srcset example could just as easily be SVG

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search