MyBB Community Forums

How do we make the logo "retina" friendly? Thanks.

graphics related guidance is beyond the scope of MyBB Support.

basically one should try using tutorials available on internet [search link]

(2020-04-09, 05:53 AM)Custard Apple Wrote: [ -> ]How do we make the logo "retina" friendly? Thanks.

Retina logos are generally 2X the resolution of your standard logo. This would need to be done whenever the logo was created as it's not possible to increase the resolution without a loss in quality after it has been rendered.

*LOL
What is "Retina"?
It's just a word!
This legend made by Apple has no effect on quality or resolution! It's no technology, it's neither freak nor special. It's nothing.
It's just a word!

Webdesign takes care of different devices, displays and resolutions - no matter which myth Apple is telling his disciples/idiots

Just create a high quality image and adapt to your website to fit devices outplaying a specific brand.

[ExiTuS]

(2020-04-14, 09:04 PM)[ExiTuS] Wrote: [ -> ]*LOL
What is "Retina"?
It's just a word!
This legend made by Apple has no effect on quality or resolution! It's no technology, it's neither freak nor special. It's nothing.
It's just a word!

Webdesign takes care of different devices, displays and resolutions - no matter which myth Apple is telling his disciples/idiots

Just create a high quality image and adapt to your website to fit devices outplaying a specific brand.

[ExiTuS]

That's not entirely true, if you've ever used an Apple 5K display you'd know that standard resolution logos often look pretty terrible.

Quote:That's not entirely true

Yes it is!

Quote:... you'd know that standard resolution logos often look pretty terrible.

There is no "standard resolution".
I am not talking about standard resolution, but about "webdesign takes care of different devices, displays and resolutions".

A webdesigner should also be able to even fit my 12K-double-plus-ultra-enterprise display, that I name "aniteR"!


Back to topic.
The designer must create high quality images that can be scaled on every display resolution in best quality.
If possible, best practise is using vector graphics (e.g. SVG) with proportional sizes to fit every screen/resolution (even my "12K aniteR")

[ExiTuS]

(2020-04-14, 10:07 PM)[ExiTuS] Wrote: [ -> ]There is no "standard resolution".

I think he means "standard" as in "average".

(2020-04-14, 10:07 PM)[ExiTuS] Wrote: [ -> ]If possible, best practise is using vector graphics (e.g. SVG) with proportional sizes to fit every screen/resolution

@Custard Apple, this would be one approach but as @R34P3R pointed out this should be done while creating the image as modifying it afterwards to meet resolution requirements could cause a loss of image quality.

Similarly, as @.m. pointed out this is beyond the scope of MyBB itself. You could get more information or resources on the matter by doing outside research.

(2020-04-09, 06:03 AM).m. Wrote: [ -> ]graphics related guidance is beyond the scope of MyBB Support.

basically one should try using tutorials available on internet [search link]

Hi .m., can you please let me know whereabouts the code is which references "logo.png". With thanks.

Hi,

I'm with [ExiTuS], create an SVG file of your Logo, and it'll adapt smooth to whatever screen/resolution you need.

Use Inkscape to transform your image to SVG.

If your logo it's an image hard to transform to SVG, use PNG instead with different resolutions and its respective CSS.

Thanks for the replies. Although I wasn't looking for information on how "retina" images work, or about graphics file formats. I was looking to find where I can control this specifically in myBB, regarding the main logo. So the answer I was looking for was this:

Templates > Header Templates > Header

AT LINE 5:

<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" title="{$mybb->settings['bbname']}" /></a>

Add a width attribute to the image tag, e.g.:

<img src="{$theme['logo']}" title="{$mybb->settings['bbname']} width=200px" />

Basically, a width half the actual pixel dimensions does the job. There actually is a standard resolution, 72ppi, which is the problem. I didn't really need to make a ton of @media calls.

What I wasn't looking for was "LOLZ Retina Apple fanboyz idIoTZ LolZ blah blah" complete with unhelpful comments such as "web design takes care of different devices". And I don't care if high-res images are referred to as "retina", "2x", 4x", or "high density", "high ppi", it's irrelevant. Anyway, Exitus is blocked, I don't have time for that!

Cheers everyone!