Bad image quality on mobile website

Question

I have been searching around for this subject but I keep finding those really really long articles and I'm not even sure if they are relevant for my issue so I'm asking here :)

I'm creating a mobile website and there is something weird with the images:

lets say my image is 200x100 pixels, and I'm using the following code:

<img src="img/my_img.png" width="200" height="100" />

or:

#myImg {
   width: 200px;
   height: 100px;
   background: url(img/my_img.png);
}

when I open my website on desktop it will look fine, but when I check it on my mobile the image has really bad quality, seems like its stretching it.

i don't know if it has anything to do with my html code, but maybe its my viewport?

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

Answer 1

Is the device you're using a retina device? If so, you will need to create a retina image(400px/200px) and then set the width/height to 200px/100px in the CSS.

Answer 2

I have just answered another question similar to this, in regards to the images I have been having the exact same problem.

I am pleased to say I have now managed to find a solution that works perfectly

Firstly when creating the images make them (if possible) 4x bigger than you need them. So that they are super high res.

Then when you are adding the image into your HTML, define the height and width of what you want the image to actually be.

For example if you wanted an image to view 100px x 100px create the image at 400px x 400px. Then define the image height and width within the img tag.

The image will keep the resolution and the DPI but literally just be smaller.

Yeay! We have an image that renders perfectly on all devices!

I hope this helps my friend!

Answer 3

Also watch out if you're using WordPress sometimes it automatically resizes images for you and renders those instead,