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.