Why do my icons / images look fuzzy on mobile?


#1

:x: The Problem

“My images are super blurry on mobile.”

“My icons are fuzzy on iphone/android. What’s going on?.”

“Our logo looks low-resolution, how do we enable retina images in Unbounce? My logo needs to be sharp!”

“How do I make image less blurry on mobile version in Unbounce?”


:thought_balloon: How it Works

Generally when this happens the issue you are seeing is due to our image compressor and it’s lack of retina support at the moment. We’re always working to improve our application, and our product team is hoping to fix this the future (in fact, you can vote on this very idea), but for now our image hosting simply doesn’t support 2x retina images.


:white_check_mark: Possible Solutions

1) Re-size Before Uploading
Before you upload the image in the Unbounce app, re-size the image to the specified dimensions in an image editor, such as PhotoShop or Pixlr, etc. instead of re-sizing it in the app.

2) Try .GIF Format
Try converting any text, images or logos into GIF format. GIFs are great for logos and smaller sized files, and they also tend to retain their quality on the web.

3) Host the Image Outside of Unbounce
Finally, another customer came up with their own solution for optimizing retina images for mobile. Basically, they uploaded the full size image to a web service, copied the image url, then wrote some html with a smaller size than the full resolution. So for example,

<img src="http://yourimagehostedhere.com/iLuxXty.jpg" width="309px" height="476px" />

4) Workarounds from the Community
There are also some fancy workarounds that have been built by other customers right here in the Community. Our friend @Phillip created this step-by-step guide on how to force retina images in Unbounce which you can find here:


:raising_hand: Vote for this Feature

Unbounce is committed to building the best builder on the planet, so if this is something that is important to you, please share your feedback and vote for this feature in the Community!


:link: Related Resources

For a more detailed instruction on how to use Mobile Responsive, check out this Academy article. Alternatively, you can check out this workshop that walks through all of this (and much more) in a helpful video.


Mobile Responsive FAQ's