I can’t believe this still isn’t done yet. I spent so much time making sure each image is crisp. Such a time suck right now.
Using a box element with a background image appears to have a little better quality than using a regular image element. May be a better solution than using a custom html element and hosting images elsewhere.
Thanks for the support on this idea! We’re still going to leave this open for voting, but I wanted to suggest a workaround that might help you out until this is implemented.
Check out Phillip Barnes’ how-to article here:
The image handling is TERRIBLE. No vector support, blurred pictures unless you upload the exact size and no automatization. Apparently also no effort to fix these problems.
2 Methods for Crisp Icons or Graphics on Unbounce Pages.
- Hosting the SVG image (I hosted ours on HubSpot). BEST RESULTS
- Drop in an HTML box onto your Unbounce page and then copy the hosted images’ url. Paste the url into this HTML code, < img src=“place image url here” onerror=“this.onerror=null; this.src=‘place image url here’” > and done. You can only view the icon in preview or live, so re-sizing it is wonky.
- Use @Tim_Corlett idea (if you use PNGs, this is your method). GOOD RESULTS
- Add a box element to your page. Add a background image to that box, choose your PNG file and done. You can see your icon when re-sizing, it comes out pretty crisp (depending on how large the image was saved as) and no need to worry about SVG images.
Here are the results (normal image add, hosted SVG added via HTML, PNG as a background image).
We’ve had this issue a lot, and most of the time it can be cleared up by putting the image in a box as the background for some reason!
Hey @Andi1 – it’s still in our backlog, but I added some feedback to our internal roadmap system on your behalf.
I’d just like to vote for this – really would like this feature!
What we have noticed is if you make the images double the size, save out as .PNG, change extension to .GIF, upload and shrink 50%. They look crisp.
@Angela_Buttjes Woah, that’s awesome feedback! And definitely a decent workaround for the meantime. I haven’t heard of that being tried before. Did you figure that out on your own or read about it somewhere?
Is there not yet a solution for this? Or does unbounce expect Retina displays to go away?
Hey Robert! I’ve just sent you a DM hopefully you see it soon!
Thanks so much for all the feedback everyone! We’ll have an update for you all in the next week!
Where is the update? We are in 2018 and there is still no retina support.
We are considering moving all uses of unbounce to another solution as unbounce clearly fails miserably in image handling.
Retina image and SVG support was added a couple of months back.
Great. Where can I find more information about that?
We still have retina device issues in 2018 on Unbounce. I have not found a fix where I simply upload the picture and it works. A lot of other solutions works like this, and my patience is running out.
If you’re on an old plan then you won’t have access – you’ll need to swap over to the new plan to get a lot of the newer features e.g. Pro 99 to Essential.
Then you will see this when you add images in the page builder –
We’re already paying $150/month and you still want us to upgrade to get a basic feature like high-res images??? That is really frustrating.
Also, I just noticed that our old workaround - where we used a PNG inside a box element as a background image, no longer works. The image is no longer high res.
As they mentioned, .SVG and retina image support has been added to the builder, and is available to customers on all of our new pricing plans (Essential, Premium and Enterprise). However, the way it was developed conflicted with the box element workaround, so unfortunately that will no longer work.
I think it’s worth mentioning that customers on new pricing have access to new features that we’ve rolled out (our Unsplash integration, Page Redirects, Schedule Publishing, etc. etc.) as well as all upcoming feature releases. So it’s a good time to consider moving from our legacy plan to new pricing.
I can message you privately to discuss what plan might be best for you, since this is a public forum. Feel free to send me a direct message if you’d like to chat about that, or you can shoot me an email any time email@example.com
I have been trying to get sharp icons on my unbounce pages but never got successful with my edited icons.
But what worked for me, if i design or update the icons in Illustrator and export them in PNG. Uploaded quality on unbounce pages in reaaly sharp than the ones designed in Photoshop.
It happened for all my icons and this solution worked for me. Format remains as PNG but not sure what difference illustrator makes.
If this solutions works for anybody, that would be great.