Logo lack of sharpness


(Pablo Aranegui) #1

Thanks for reading.
Why my logo don´t look sharp and crisp? The file is a .png 200x200px comes from Abobe Illustrator. Any suggestion to have a logo as sharp as the title or slogan? You can see it:
http://paresbiomagneticos.net/
TIA


(Rob Beattie) #2

Looks pretty good to me. Running Chrome on Windows on a 23 inch display. See attached.

Rob


(Gary) #3

Looks sharp to me. I notice that it is being resized to 180x180px so perhaps it is loosing some of the impact of a slightly larger original image.


(Pablo Aranegui) #4

Thanks Rob, Gary
I´m uploading the logo´s size in 180, 200, 212px checking if one of those makes the difference. I still clearly see a difference between logo and tittle´s sharpeness, on ipad and iphone at least.


(Jannis from inStacks Software) #5

For iPad, go to 2@ then.


(Gary) #6

Now you mention it is on mobile, I can see it. There is a max-height of 90% being applied to that image which is causing the issue. When set to %100 the image sharpens up.

See http://d.pr/i/53UQej


(Pablo Aranegui) #7

Good point Gary. How can I set the image without being resize? Usually I just drop the logo inside his box in RW configuration/setting/general. (By the way I don’t know why it’s resized)

Great suggestion Jannis. Where can I find 2@ info? Any link? Thanks


(Gary) #8

You could try this:

#logo img { max-height: 100%!important; }

Paste this exactly as above into the Page wide CSS code in RW Settings - Code - CSS

Although it might be better to contact the theme developer and ask for their advice as there may be other stuff going on that I don’t know about.

I have not tried this but it’s worth a try but if it doesn’t work, remove the code.


(Pablo Aranegui) #9

Thanks Gary. I’ve tried the piece of code. It doesn’t make any difference :frowning:
I’m gonna ask Adam from Elixir and the 2@ code. I want the logo sharp as it should be.


(Pablo Aranegui) #10

It isn’t the theme that is causing the soft edges, but the scaling of the image by the browser / device to fit the available space.
Nothing I can do to see my logo as it is.
Thank guys.


(Pablo Aranegui) #11

In case anyone would be interested,
CSS3’s Image-rendering property is a little help.
Here’s explaned:
https://css-tricks.com/almanac/properties/i/image-rendering/
In my case
#logo img {
image-rendering: crisp-edges;
}