[Resolved] Retina display /logo

[Stephen]

Hi,

Am I correct in saying…

– if I use a png logo on my site I need to add 1 png file in Site Identity under Logo, and another png file (twice the size, with file name logo @2x.png) under Retina Logo?

– alternatively, its better to create an svg logo, and add in Site Identity under Logo. Then I don’t need to upload another logo under Retina Logo?

Hope that make sense?

Thanks
Steve

[Tom]

Hi Steve,

That’s correct. No need to name the retina anything specific, but it should be twice the size of the regular logo.

You can use an SVG instead, but be aware that IE doesn’t support them.

[Stephen]

Hi Tom,

I created a retina logo, twice the size, but it looked worse than the standard logo, and became the main logo for some reason.

I’ll try again tomorrow.

Thanks
Steve

[Tom]

It certainly shouldn’t look worse – it’s the same image but resized down to the original logo dimensions. How can you tell which logo is displaying? Are they different?

[Stephen]

Hi Tom,

May be I’ve got this completely wrong? Do you mean same file and then resized with CSS?

Thanks
Steve

[Tom]

You should have two separate files, which should be identical logos.

The original should be one size: 50 x 50 for example

The retina should then be 100 x 100 (just an example).

However, they should be identical logos.

[Stephen]

Thanks Tom. That’s what I tried, but it didn’t work.

I must have screwed-up the image when I saved it.

I’ll try both methods, png and svg to which works.

I installed the recommended plugin but wp won’t allow me to add the svg to a page. Possibly a plugin issue, so I’ve requested support in his forum.

Many thanks for your help 🙂

Steve

[Tom]

No problem – let me know if you have any other questions 🙂

[Stephen]

Hi Tom,

I managed to get it working, with your help of course 🙂

Thanks
Steve

[Tom]

Awesome, glad I could help! 🙂

[Matthias]

quick follow up to that.
Do retina images need a specific name/file format? I wonder about this 2x.
Or can i simply use jpg, png etc. and upload that in the customizer for retina.

Does generatepress rename the image? or can i simply upload e.g. a 500×500 logo.png image as normal logo and a 1000×1000 logo.png for retina.

Another dumb question just out of interest – as i didnt dive into that and maybe you know. the term retina is apple products only isn’t it? But other devices use that to, right?

[David]

Hi there,

Retina Images – you can name them what you want. They should be the same file format as the original logo. Just need to x2 the size in pixels.

WP/GP will do the rest regarding the markup browsers will use to recongnise it as the retina image.

Yep, Retina is an Apple trademark – but the image will be used by any HD device that uses 2x images.

[Author]

Posts