Retina Image Support


#21

We really need support for retina images.  Anyone know how this is coming along?  Not having crisp image resolution for the now massive (and exponentially growing) number of iPhone retina screens is a huge disadvantage.


#22

Hey Brett Ñ retina image support as well as some improved image compression for page load times is pretty high on the list now that Mobile Responsive is seeing some good adoption from our customers. No firm ETA yet, but I wanted to let you know it’s up there. 


#23

Carter I love the mobile responsive designs. I had passed up Unbounce in the past but now its really approaching a whole-product I could get behind. So I started to use it to build a site for my product. I found a nice layout, then uploaded some images and…

Its simple: not being able to show modern, high-resolution images is non-starter for representing my product. Modern resolution support is actually part of “Mobile Responsive” especially when you are a design product. Your product is superior to others in mannnny other ways, but this one I can’t budge on…:( 


#24

Hey Michael, totally agree Ñ Retina Images *are* a part of a Mobile solution. We decided to release what we’d built without it though because the feedback in our beta period was overwhelmingly showing the value of the Mobile Responsive feature even without retina images being ready yet. We’re still working towards supporting it, but there are a couple other things on our list first. One of which is a usability improvement of allowing customers to quickly and easily re-publish their page from within the builder, and another is a tool for making it easier to lay out your mobile page for old, non-responsive pages. Retina Image support is definitely on the list though!


#25

#26

Hoping my product’s late ship date matches you’re guys retina support, but seeming that this thread is 3 years old maybe I’m being too optimistic.


#27

Hi Michael, 
There  _is  a workaround that you can try, but at this point it requires you to host the images externally. It does the trick and is able to display images with retina quality - but it’s not the most intuitive workaround. Let me know if you’re interested and I’ll send the details over to you. 


#28

Hi Michael, I am using Justin’s suggested workaround until Unbounce resolves this issue and it works well for me. It’s easy enough to duplicate once you’ve done it once. This is how I use it (as a non-developer):

  1. Upload all the images to my other cPanel hosting in one go and keep it open in a separate window/tab (so you can easily copy the URL for each image)
  2.  Create a text field in your Un bounce page and insert this into the HTML tab:
    ![](<a href= “Link http//orangebicyclecomau/images/slider/slide1-macbookpng”)http://images.visitcanberra.com.au/images/canberra_hero_image.jpg"; alt=“Alt-image-tex” style=“width:170px;”>
  3. I use the width field to easily resize larger images without having to manually do this in Photoshop
  4. Obviously, ensure the image is at least 2x the dimension you actually want to use it as to ensure sharpness on Retina displays
    Hope that helps!
    Roohbir

#29

Roohbir this is awesome! I thought the only workaround was using gif’s and that it still sucked. This is an actual solution!

I’ll come back and praise after I get a chance to try it out. Thanks so much. & thx Justin the inventor.

Michael


#30

Glad to see it’s working out for you, Roohbir! Hosting the images via your cPanel is definitely the best approach; we’ve also found image hosting services such as Imgur work in a pinch, too (although I would recommend hosting vital images on a free service). 

Michael, let us know how it works out for you! 


#31

My images on mobile (iPhone) are fuzzy as well. I’m using PNG.

When will the web support SVG?!?? Stupid IE8


#32

Hi Philip, 
Did you try the workaround that Roohbir and I discussed above? I would start there and let me know how that works.


#33

The work around seems overly complicated and bad for page load times since you are serving everyone a huge image (larger than most need).

Since I’m mainly concerned about our logo, I’m considering using SVG with a fallback to PNG using something like http://benhowdle.im/svgeezy/. Would be nice if Unbounce had some of this baked in.


#34

Admittedly, the current workaround isn’t the most attractive solution, and is actually the most basic way to display retina (2x size images). 

There may be another way to achieve Retina in Unbounce by using javascript (ex. svgeezy), but this isn’t something we’ve tested. Down the road, we might be able to achieve server-side retina hosting - but we’re still looking into the overall functionality now so I don’t have any further info on that. 

You’re pretty crafty with coding, Phillip, so if you uncover a better way to do this in the meantime be sure to let us know. 


#35

Interesting find, Tim! Thanks for sharing this. 


#36

I’m uploading larger images, then placing them normal on the page (which down-samples them when rendered). Then when the page loads, I’m using javascript to replace the rendered (post-processed smaller) img with its original (pre-processed larger) img.

For example: 


#37

Happy to hear that you’ve found a (temporary) solution! 

It sounds like you’re essentially using a version of this workaround: 
https://community.unbounce.com/unbounce/topics/how-to-sharp-images-on-retina-displays-iphone-ipad

Ben, would you be interested in participating in alpha testing when we move forward with high-resolution images?


#38

Hi Justin, yes please I’d be happy to participate in in beta testing hi-res images. 


#39

hi, checkout the site on style & fashion at url: http://www.turnstylish.com
Kindly let us know if we can improve image on the site


#40

Also vote for native Retina support.  Over half my traffic is Mobile and a large portion of that are newer iPhones (as are my client’s test devices).    Any update on how testing is going?  6 months since last update.