Click here to Skip to main content
15,886,873 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi, I have a website lets[DELETED].com. The logo is on the top and the size of the image logo is 80x50. However, when I open the webpage on mobile and even desktop, it seems the image is blurry a little.

I added the size of the image in my tag in HTML. And in CSS, I set it max-width to 100%. I have not resized the image at all in my CSS as 80x50 is a size which suits all devices even with the smallest screen width.

Why the image seems blurry on mobile and also on desktop?

What I have tried:

Well, I set the max-width to 100% in CSS.
Posted
Updated 2-Apr-21 22:10pm
v2

1 solution

FIrst off, don't post your domain name unless you want to be taken as a spammer and kicked off the site. Especially with a name like that which looks very spammy - I have edited it to hide the address so you don't get kicked of as we really don't like spammers here.

Second, 80x50 is a tiny image. On my phone, the screen is 415 PPI - so a 80x50 image will be ~2/10th inch (5mm) by ~1/10th inch (3mm)
That's not a "legible size" for an image!

When you stretch an image, you can't "add information" because what you have to work with only represents individual pixels at best (and not even that fine a grain if the image is a lossy compression such as JPG for example) so what you get in an enlarged images looks either pixelated or blurry depending on the algorithm used to stretch it.
What you see in NCSI and CSI and suchlike TV shows where the selfie can be zoomed in to see the killers registration number in the reflection from the victims eye is fiction: it can't be done!

When you create a logo, make it BIG. My avatar was created at 4096x4096, and stored as a "native" PaintShop Pro file format to preserve all the layers and very pixel. That was then used to generate smaller images such as the 140x140 I use here as a lossless PNG image. If I need a bigger image - 512 x 512 for example - I will generate that as a PNG from the original PSP file, not from the small 140x140 PNG.

Shrinking images is fine: you throw away info but you generally can get a good result.
Enlarging them is a mistake: you do not get a good result!

Use an image that is the right size for your target if you can by creating multiple resolution images, and shrink if you must. But don't enlarge them!
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900