Retina Image Support


#1

I use Photoshop, save as a JPEG, but they end up looking like this: www.altogethereasyguide.com.

Can’t recall having this problem before, maybe I’ve inadvertently changed how I save things. Either way - these fuzzy images look ick!! Any ideas?? Cheers.


Why do my icons / images look fuzzy on mobile?
#2

Hi Lisa! Do you mean the images like this one?

If so, it could be the degree to which your images are being compressed. Since, compression and quality are inversely proportionate, you could try decreasing the amount of compression to produce a higher quality image.

Another good alternative is to save as a PNG file. PNG are larger but produce better image quality.

Let us know how it goes :slight_smile:


#3

I’m having this problem now too! I used the “Save for Web” function in Photoshop CS6 and saved them all as PNG-24s. Is there anything else I can do?


#4

I’m having the same issue


#5

Me three. My images are PNGs too.


Feature request: please bring in support for .svg files!
#6

If you are looking at the images on a “retina” or similar quality display (iPhone, MacBook with retina, etc.), images are going to look blurry because all the surrounding text is a lot sharper than on a non-retina screen. I had the same “problem” when I switched to a MacBook Pro with retina screen. Took me a while to get used to it. Take a look at the same page on a non-retina screen and you will see what I’m talking about.


#7

I see. Is this just with bitmapped graphics? And is the text vector or something? The background looks good, but it’s so faint I can’t really tell if it’s actually fuzzy. Are there any non-bitmapped graphics I can use on UnBounce, like SVG or something?


#8

Hey Matty - no vector graphics, unfortunately. The Unbounce pages builder supports gif, jpg and png files which are all bitmaps. I can’t say for sure if this is an issue with the images or if, as Tom pointed out, it’s just the images compared to the text. Either way, I’ll escalate this over to our QA team to investigate.


#9

Hey guys,
At the moment there is not a lot you can do to add vector graphics to your page (we hope to allow that at some point in the future), but we do plan on supporting high-res versions of your images for retina displays. Ideally when you upload a large image, we would output both the normal version of the image and a “2x” version that retina displays would use. Unfortunately I don’t have an ETA for you, but as Ryan mentioned, we’ll be discussing this as a team. Especially since we are in a discovery phase for Responsive landing pages.

Cheers,
Carter


#10

Any progress? This does make an unbounce page look kinda bad on every retina screen.


#11

I’m looking at it on a retina macbook, so it’s not the responsiveness that is a problem.


#12

No progress?


#13

Hey Nikita Ñ we decided to leave retina display images alone while we focus on getting Responsive layouts out the door. We’re currently in an Alpha stage and have a handful of customers helping us test the feature. Once we release it we’ll likely get back into retina images and better compression over all to improve load times.


#14

Carter, thank you for your explanation regarding your plans. I fully support it as a right prioritisation for your business.


#15

Thanks Nikita, I really appreciate your support!


#16

Since you asked. Not being able to display crisp images of your product kind of defeats the purpose of a landing page.


#17

So your solution is to down sample the uploaded images? Why not just serve out the original image at the specified size and let the browser deal with it?


#18

Hi George - Carter can probably jump in with more detail, but when the image upload feature was originally built, connection speeds, especially for mobile, were much, much slower.

Yes, we could have left it up to the user to optimize their images for the web, but as Unbounce was designed as a platform that non-technical people could use to create pages, we didn’t want to rely on people having to do that themselves (or even knowing that they should) and adversely affecting their page load times if they missed that step.

At the time, there also weren’t many (if any) consumer devices that offered retina display, so the downsampling wasn’t really an issue.

Obviously, that’s changed now, so it’s definitely something we’re going to explore in future, but as Carter mentioned, step one was to get Mobile Responsive out the door as a usable feature.


#19

Has this issue been addressed at all?


#20

Hi Roohbir, 
We recently were able to get Mobile Responsive out the door, which was the first step in pushing this forward. So far we haven’t deployed an update to how we process images yet, but it’s still something we’re currently looking into. 

In the meantime, I would suggest trying to re-save your image files as .gif and re-upload them into the page builder. I would also make sure the image elements are saved at the exact size you’re trying to publish them at, so there’s no resizing in the app. It won’t be perfect, but this should give your images a bit of a quality bump. Worst case scenario, you can host the images externally and call to them via html - but try the first two suggestions first.