0

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

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

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!

2
  • I'm not 100% sure what you are asking here. Isn't it just how it is when you scale a line drawing down? The lines get thinner so the "intensity" changes. Not all drawings look equally good at all sizes. Good logos are often designed in different variants for different sizes. If you only need the small size try making the lines bolder before scaling down.
    – Wolff
    Mar 28, 2020 at 15:38
  • Very Thanks for your answer!, because I'll the sizes from the logo smaller, I to come to this problem.... can Please give me an example of how to does it?
    – jdgs56z
    Mar 28, 2020 at 15:55

2 Answers 2

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

enter image description here

1
  • sorry you answer saw later... you have the best answer!, I wish you a nice day!
    – jdgs56z
    Mar 28, 2020 at 16:22
0

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.

2
  • Very Thanks for your answer!, now I'll learn how to try it...with Gimp can' t convert to SVG format, can you please say to me another?
    – jdgs56z
    Mar 28, 2020 at 16:09
  • 1
    @jdgs56z GIMP is not a vector image editor. Use Inkscape if you want vectors.
    – Billy Kerr
    Mar 28, 2020 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.