Resizing images

HTML & CSS
1

I was wondering how, or if it is possible to resize an image placed by a css code.
for example
body
{background-image: url(images/image.jpg);
}
or
list-style-image: url(images/image.jpg);

Is there another command I can use to reduce it in size by 50 or 25%?
Thank you all & happy turkey day to us who do the turkey day thing. Happy thursday to everyone else.

2

Never use code to resize images, not in the HTML or the CSS.

If you are using code to make the image smaller than its natural size, you are forcing people to download a larger image than they will benefit from, and there’s a good chance that the browser will make a complete horlicks of resizing it and it will look shoddy. If you are using code to make image larger then it will definitely look shoddy.

If you want to change the size of an image, use an image editor to do that, and then put the image with the right dimensions onto your site. There are plenty of free image editors out there, and they will pretty much all do a much better job of resizing images than a browser will.

3

you could just apply width and heigh properties to the image in question using css. I am pretty sure that the width and height properties in the html tag are out of date.

So if the HTML was:

<!doctype html>
<html lang="en">
<head>
<title>Images</title>
</head>
<body>
<img src="assets/images/image.png"/>
</body>
</html>

and the styling could be

img{
     width:200px; /*assuming that is what you want it to be or you could do 200% so that it is twice as big as its normal size*/
      height:140px;
}

I would recommend you do not do that because it will make the resolution of said image horrible. However, if the image is a vector graphic then it will be fine regardless of hoe big or small you set it as.

if you made the image, I would recommend opening the original file in a graphics editor programme and resizing it.

4

Actually, it’s better to provide dimensions in the markup for replaced elements, like img, if for no other reason than so that the layout won’t shift about unexpectedly when the page loads.

5

Thanks all.
But was wondering what if it is a minor image. like a bullet image. I was wondering if you could use the widht/height to say drop it from 100px to 25px?
If advice is still a resounding no, I will go w/that & open photoshop back up.
Thanks
Daniela

6

It still applies :slight_smile:

7

:slight_smile: will follow advice & not code re-size!
thanks all.