2x Retina-quality logos?

Has anyone figured out a way to double image resolution? similar to how you’d add in a 2x sized version of your logo in Wordpress to display properly on Macbook Retina screens (and other high PPI screens).

Currently, any Bubble site looks fuzzy on a Retina display:

(in Bubble)

vs.

(in Wordpress)

2 Likes

What file format are you using? I was using .svg on one of my sites and didn’t notice any blurring, but I also wasn’t explicitly looking for it.

2 Likes

SVG was the answer! Thank you :slight_smile:

I tried PNGs, JPEGs and even GIFs and nothing looks remotely as good as SVG does.

Awesome, glad it worked for ya. In case anybody else is wondering, an SVG file is vector, while PNG/JPEG/GIF are rasterized. The rasterized files don’t scale well as the image is built at a certain resolution, but a vector file is a set of mathematical instructions that are resolution-independent. When you see those fancy icons that look great on any device, they’re using some form of vector format (this is why a lot of the icons you see on the web now, such as icomoon or fontawesome, are presented in a “font” format).

TL;DR: Use vectors where it makes sense!

2 Likes