Is it bad programming practice to force a image to a smaller size

Question

I have images on my site and I' am re sizing them using CSS. Is it a bad programming practice to force a image to a smaller size.

CSS

body #phoneimage {
   max-width: 150px;
} 

OR

body #phoneimage {
   width: 150px;
} 

OR

body #phoneimage {
   min-width: 150px;
} 

Answer 1

It depends on the context.

In the past, browsers image resize quality was very poor. Modern browsers can resize most images quite well. However, resizing a very large image (i.e. 2000x1000) to a very small size (i.e. 200x100) may result in poor quality. As an aside, it is usually discouraged to upscale images as quality will suffer.

From a network (downloading/bandwidth) perspective, it is often discouraged. If an image is 800x600 and is sized to 640x480, the user will still need to download the 800x600 version in order to see the HTML sized 640x480 version. This is extra load on your server and increases the download time for the user.

Scaling images in HTML/CSS is most commonly used properly in the following contexts:

1. Responsive design. Based on the min-width you are using, I am guessing that this is the circumstance. If the site scales, images almost always have to scale as well. If an image must scale hundreds of pixels, you may consider swapping the image for a high/lower resolution image as needed.

2. Mobile-optimized websites. A 640x480 image HTML/CSS scaled to 320x200 will appear much sharper on a high-resolution (i.e. Retina) mobile device. Mobile devices have a very high PPI (pixels per inch) and can take advantage of the extra data. In fact, a 640x480 image rendered at 640x480 can appear blurry (in comparison to text or the OS interface) if the website is not scaled down to fill the device screen.

Answer 2

No it's not. Actually when you optimize images for Retina displays (or any display with a higher pixel density), this is common practice to make sure the image stays sharp.

It also is common practice to use larger background-images. Especially if you don't know the size of the container it is in, especially when the size can vary. Imagine you have a background-image over the whole page and you set it to background-image: cover. Now to make sure the image is sharp and clear for higher resolutions it's necessary to use a large background-image, even when it gets downsized.

So, it's not bad practice. But there always is a better practice. And that would be to optimize your images for any possible purpose. For example, if you have a responsive webpage it would be good practice to use smaller images for the mobile version to reduce bandwidth, e.g. with media queries:

/* For desktop */
@media all and (min-width: 600px) {
    body {
        background: no-repeat url(http://placehold.it/2400x1200');
    }
}

/* For mobile */
@media all and (max-width: 600px) {
    body {
        background: no-repeat url(http://placehold.it/1200x600');
    }
}

Said that, of course you shouldn't overdo it. It obviously would be bad practice if you upload a massive 5000x3000px image and resize this to something like 50x30px.