I am very new to html/css. For a project I am working on, I'm trying to scale down an image, however, when I do so, the image becomes very blurry. I've tried resizing the png itself, and it looks slightly better, but is still blurry. Any help would be greatly appreciated.

<img style="display:block;float: left;
padding-right: 5px" width=140px height=150px
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">
<img style="display:block;float: left;
padding-right: 5px" width=140px height=150px
src="https://i.ibb.co/Nn6gLz6/portland-resized.png">

Here the left image is original and the right image is resized.

CodePudding user response：

you can use the css scale transformation that allow you to scale down a image without loosing quality

https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale()

.scale {
  transform: scale(0.7); 
}

<img style="display:block;float: left;
padding-right: 5px" 
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">

<img  style="display:block;float: left;
padding-right: 5px" 
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">

CodePudding user response：

Sometimes this happens because of the way a browser tries to interpolate smaller images.

You can add a style or css property called "image-rendering" to change the way it renders.

Here are some properties. Experiment to see which one works best for your image.

image-rendering: pixelated;
image-rendering: high-quality;
image-rendering: auto;
image-rendering: crisp-edges;

CodePudding user response：

You can use css instead of any other converters in online

• if you want to scale down based on height or width and be proportional,
• then set either height or width to the value,
• and the other property to auto

Note: Setting the other property to auto is not needed for this case, it's only said for understanding easily

.resizedI{
height:100px;
width:auto;
}

<img style="display:block;float: left;
padding-right: 5px"
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">
<img style="display:block;float: left;
padding-right: 5px" 
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">

CodePudding user response：

This answer explains logic and not a solution

Things to consider

• In browser, or real world, when a image is to be reduced in size(scale down),some pixels are sure to be get lost
• No matter how the image renders, some pixels are to be get lost
• The way the image renders is only defining which pixel the image need to get lost,and what color...,anyway the pixel get lost
• This will not be so for 12k or HD like televisions or monitors, because there(in tv) in just a 1cm it has lots of pixels that can decide the clarity.
• So finally pixel will be lost according to the monitor's/device capacity, if the monitor is a good ones, the pixel wont be lost(may be lost but very less).

CodePudding user response：

Thumbnail original size:

The blur effect comes because you try a thumbnail to resize. You can do it with vector images like SVG but not with png, jpg etc.