Skip to main content

On retina/high-density displays, your images look fuzzy. Compare the 1x image to 2x. Which one would you rather your visitors see?



Here’s a quick tutorial to include high-resolution retina ready images on your Unbounce Landing Pages / Convertables.



How to Install in Unbounce




Click Here for Instructions



🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.




Method 1: Heavily compressed HiDPI Image


This method takes advantage of an issue in Unbounce where background images aren’t resized.


Step 1: Prepare your image

Start with the original (or largest) version of your image. Open your image in an image editor, such as Photoshop or Gimp (free). Resize it down to 2x the desired size (For example, if you want it 200x300px then resize it to 400x600px).


Save it as a jpeg with low compression quality 20 (or even 0). It might looks poor at the 2x size, but when you shrink it to the 1x dimensions, it will look great. (Check out the multiple sources for this technique).


Step 2: Add the image to your page

Add a new Box element (not an image element). The Image element will resize your image when you publish, ignoring all the work you put into step 1.



In the new Box element properties, set the background to the image you resized to 2x. Resize the box to the desired 1x dimensions (200x300px in the example).



Step 3: Publish your page

That’s it! When you publish, Unbounce will serve the original image you made in step 1. This image will have 2x as many pixels, but, because it is highly compressed, it’s not much bigger than the 1x and will look sharp on both regular and high-density displays.



Method 2: SVGs for Logos and Icons
 If you are having this fuzzy image problem with logos and icons, you can try using SVGs. Look at how blurry our logo used to be.



Step 1: Save your image as an SVG

(There are lots of guides online for this.)


Step 2: Add the SVG to your Page

Unfortunately, Unbounce has no support for SVG (despite it being a popular web standard). So we have to use the HTML element to make it work.


Open the SVG file in a code/text editor (Notepad in Windows or Text Edit in OSX will work). It will look kind of like HTML. Copy it. 


Back in Unbounce, add a new HTML element to your page. Paste the SVG code.



Since Unbounce doesn’t render HTML in the editor, you can’t see it in the editor (left image below). But you can see it in the Preview mode and it will render when Published (right image below).


     



NOTE: SVG isn’t supported by Internet Explorer 8 and below. If you need support for this browser, you can use one of the many fallback techniques.


I personally use IEs conditional comments to hide the unsupported SVG in IE8 and less and to show a PNG encoded as data uri. This makes it all self contained on a single page, but does increase the size of the page a bit.







Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀




Want to take your Unbounce landing pages + Convertables™️ to the next level?

:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Forgot to mention all the previous threads on retina support:


Fantastic write up, Phillip! 


Retina image support is still in our development backlog, but until then this is an easy and straightforward workaround that gets the job done. Tested this on my own pages and it works like a charm.


Keep up the great work, my friend!

Phillip, do these two methods work better than the options you outlined here: /topics/simple-solution-for-image-compression-and-retina-imag…


Seems like the Javascript option is easier than all this image compression.

Thank you

David, the Javascript option is easier, but isn’t compatible with Unbounce. The other thread is asking Unbounce to support the easier options.

Is there any way to add a link to the box method? I’ve been using that to drop in our logo since reading this, but I was recently asked to add a link to our logo, and I’m not seeing a way to do that in Unbounce.


Outside of that, the box method is a solid workaround.

Hi Scott, 

I suggest creating a button and making it completely transparent, then simply place the button over top of the logo. Crafty, but it works. :) 

It would be nice if this feature could ship soon. Retina screens have been around for a number of years now.

Any update on retina support?

Thanks, this has solved my image resolution issue with retina/mobile screens. The only problem is that I now lose all the ALT tags on the images now that they’re in boxes.

Agree! This is nuts it still is not supported. 

It works. What sucks though is that now you have to do that for every image. The attached image is how I feel now knowing I have to do this for all 20 images and icons on my landing page  alt

How do I maintain image background transparency with this method? Once i save as JPEG then it loses the transparency. thanks

Hey Daniel!


Unfortunately, JPEG’s don’t offer the ability to change transparency levels the same way that PNG’s and GIF’s do. So, in this particular situation you’re at a bit of an impasse. All I could really suggest is that if your image is placed on a white background on your landing page, save the JPEG with a white background. It isn’t the most ideal solution but it may still give you the results you need. 


I hope this helps! 🙂

Also can’t link the images so only useful for static images.

@michele, I found a trick to put a link on the images. You have to add an image on top, and make it clear, and add a hyperlink to the image. Stupid work around of course being that it is 2016, but what can ya do :/ 

Thanks Paul. I’ll try that method on my landing pages.

Sorry! I meant adding a button, not an image. My mistake! 

The easiest way I have found is just to create a 2x bigger PNG file. Insert that on to your unbounce page. In the CSS panel just change the width, decrease by half roughly, the size you NEED it to look. That way you have the extra pixels for retina.


Works every time for me.

@digibomb I’ve tried that and Unbounce actually resizes the original photo and not just the CSS width / height

@tkfxin it resizes it? You should be able to use an !important and keep the width whatever you need. You could also just scale it it down in the page builder too, either in the properties panel or with the handle bars when image is sleeted.


Here’s an example of how to do it with PNG, not really relative to this thread but hopefully this helps you …


Desktop image size



Mobile image size - same image scaled down



See it in action here.

You can add a link to an SVG by editing the code a bit. Here’s an example:



<svg width="140" height="30" xmlns="http://www.w3.org/2000/svg" 

    xmlns:xlink="http://www.w3.org/1999/xlink">



  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG"

      target="_blank">

    <rect height="30" width="120" y="0" x="0" rx="15"/>

    <text fill="white" text-anchor="middle" 

          y="21" x="60">SVG on MDN</text>

  </a>

</svg>

Just wrap the elements you want to add a link to with <a xlink:href="#" target="_blank"></a>.

Awesome feedback @erikaalonso! Thank you!! 😁

Guys and gals at Unbounce, please get this done already. We would all love to see our logos sharp, and icons too. Now they look like smudges. I know you have a loooon pipeline (like everyone), but just bump it up, maybe. 😉


Thank you.

Well, since you asked so nicely @Domen_Kert… 🙂


I’ve shared this feedback with our team. Keep it coming!

Reply


Terms & ConditionsCookie settings