Image display better on small content

[Mudsaf]

So basically my problem is that the larger comment selection looks way uglier than small, both uses same image but i guess the larger one stretches it. How to fix, need to create larger image or any nice solutions?

 

Element properties

background-image: url("<image>");background-size: 100% 100%;

[newseed]

If your original image is smaller than what you would like it to be then you need to rebuild or create a new image that is large enough to fit your largest format/display that you require. Otherwise, small images being enlarged via css will only cause it to become blurring and of poor quality.

[davej]

If you have an image that is 200px wide it will begin to look degraded if you stretch it more than 200 pixels wide. That is why glossy magazines always required high-resolution images. They had a requirement for a certain number of dots-per-inch or dots-per-cm. You begin with an image that hopefully has more resolution than you need and then you resize down to what you need. That makes the image file size no larger than necessary so that it will be quicker to load. Any image editor will have a resize function.

[Mudsaf]

What you recommend to image size that has max 1000 width + height example 220px?

[davej]

The easy answer is 1000 x 220px but you should experiment and see for yourself. Is the banner a sharp detailed photographic image or just a blur or pattern? If it is a blur then you don't need sharpness. If it is any sort of repeating pattern then you can use smaller images and repeat. This is all old-school thinking though. There might be better options to consider now.

Edited August 6, 2013 by davej