Skip to main content

Recently found that even the SVG workaround offered here on another post failed and was not able to load full SVG files when we added several fairly large SVG’s to a single page.



Reached out to support who tried to help me out a bit and suggested that the issue was likely to be the number of SVG files on the page, but declined to help any further than that as afterall it was a fair bit of custom coding. Despite it being a ‘feature request’ suggested some 6 years ago I was told it’s not really on the road map.


Anyway, background of the issue aside, this did lead me on a bit of a mission trying to find a workaround and even started signing up with alternative landing page vendors as our pages and brand absolutely require and depend on a very high resolution as we use detailed graphics to communicate what would otherwise take hundreds of words on a technical subject - and who wants to read reams of text on a landing page?!


I stumbled on a blog post about Adobe’s relatively new ‘Export to Screen’ functionality. I run Adobe Creative Cloud on my mac with all the latest versions (as of August 2017 time of writing) and found I had the feature. So I opened my SVG in Adobe Illustrator.


Once opened, simply go to File>Export>Export for screens…


42

42662×502 81.1 KB


I usually scale up to 2x or 3x and used the default settings that were there. The PNG output is fantastic and highly detailed - far far superior to photoshop or anything else I have tried. It seems to optimise the file to a decent file size too.


53

53673×533 23.5 KB


And that’s it, there you go!


And by the way, set the images as background to a box instead of adding as an image - get much better results this way too.

Hey Matt!!


Wow, you just made my day!!


As you can imagine, uploading .SVG files is something that customers bring up to our Support team quite frequently, but beyond the workarounds that we have on-hand for these requests – our knowledge into alternative methods for these scenarios can only go so far before it starts straining our resources.


I hadn’t seen this option in Illustrator before (I’m a Photoshop girl, myself), I can already think of so many customers who are looking for alternative ways to export high res .PNG’s.


Additionally, without going into too much detail, our Product team is currently working on our image uploader in the builder as we speak, as it’s garnered enough attention from our customers over the years.


I’m really glad that you ended up finding an alternative method, and stuck with Unbounce! I promise these requests don’t just sit on a pile with a coffee mug sitting on top of them. We collect each and every request and it gets individually passed along to our Product Feedback platform, which then gets dissected by each respective team to see which issues are causing the biggest stir.


I do admit, 6 years is a long time to wait for this to roll out, but every year there’s something else that our customers seemed to be more vocal about.


Thanks so much for breaking this down into so much detail, I can’t wait to hear from other customers who adopt this new method!


Happy Friday!

@Revved this is also how I work on the builder!

Always using @2x PNGs and boxes with image background for the perfect retina quality.


Just something you should be careful… when you export hi-res files in png they might get heavier and impact your page speed and therefore your quality score. Thats said, after you generate the PNGs use a service like https://tinypng.com/ to compress it (png should not noticeable lose quality like JPGs).


I personally use an app called Squash https://www.realmacsoftware.com/squash/


Cheers!

Agreed with Luis. The new export feature in Adobe Illustrator/Photoshop is much better at compressing images. But you can still get better results by compressing it with 3rd party software.


I personally use the free online service: https://compressor.io/


Shameless plug for the related Unbounce feature request: Compress Images before Uploading to CDN

Hey Luis, thanks for your note!


I personally dont think tinypng or squash deliver on image quality and while they’re certainly useful resoureces to have on hand - I’m not the biggest fan and notice definite degradation of our PNG’s on compression.


You could spend your life chasing a perfect quality score with Google while they never actually publish the specific requirements or grading as to how this is achieved - so really I like to focus where I do have full control.

Thanks Jess 😀

Reply


Terms & ConditionsCookie settings