Different color contrast between same image

Question

This is how to original image look like: 805px x 204px

And here is how to show the image later which scaling: 265px x 67px

Here is how to call the image on HTML:

<img id="logo" src="Photo/my-logo.png" alt="">

Here's how to call the image on CSS:

#logo {
    display: block;
    margin: 0;
    position: absolute;
    top: 2%;
    float: left;
    width: 15%;
    left: 0%;
    color:  #101010;
} 

The original image has 805px x 204px, therefore when write width: 100%; it to come many place from Monitor... . When scaling with Gimp the image to 265px x 67px, the black colour change the intensity..

My question, how can to avoid that the black colour changes the intensity.

Can please someone with easy words explain how to resolve my problem, Thanks!

Answer 1

Try this.

Make sure you are working on a copy of the original image, so you don't overwrite the original.

1. Do Filters > Generic > Erode. This will thicken up the black lines a bit.

2. Now scale the image to 265 x 67px

Result

Answer 2

There is nothing you can do in your code to avoid this effect when you scale down the image because it has nothing to do with the code. It simply has to do with the image itself. When you scale down the image, lines get thinner.

To avoid this issue, recreate the image at a smaller size with the same thickness.

What I recommend most is to convert whole logo into an SVG and use vector-effect="non-scaling-stroke". That way it will keep the same thickness and thus contrast at whatever scale you want, small or large, without blurriness.