Images are blurry when I publish page


#1

For some reason, when I publish my unbounce page, it looks blurry compared to within the editior.

Look at the difference in the two images:

Screen shot from my editor:

See the same section on my landing page: http://get.funnelenvy.com/marketo-optimizely/

The attached image is much clearer. I’ve tried the different methods of resizing the image in photoshop prior to publishing but it doesn’t make a difference. All Advise is appreciated.

Best,
Greg


#2

@Gregory_Gerla

Hi Greg,

Are you using a retina display by chance?

Best,
Hristian


#3

@Gregory_Gerla

A larger/high-quality image may be necessary but one way that’s helped me is by:

  1. Inserting a box.
  2. Set the border to none and background to the desired image.
  3. Then ‘Fit background to container’

If the image is large and the box container is smaller than the original image, it’ll perform almost like an SVG and retain its best quality.

Hope this helps!


#4

that’s a good idea, but it becomes quite frustrating trying to adjust the container to fit the image dimensions. Did you have a suggestion for making that easier?


#5

I have my retna macbook and non-retna third party monitor. Looks blurry on both after I publish. Preview and editor screens look clear. It’s like they are degraded upon publish.

Greg


#6

This is an issue with Unbounce. Images will show up blurry on retina displays. I would love to know if getting this issue fixed is on the roadmap. It has been a problem since I started using Unbounce over a year ago.

You can use the box method as mentioned above but it does get a little frustrating when you need to size the images. Another issue I have seen is when you need to a button that has an image in it. What I have done is used a box with an image and then put a clear (opacity of 0) button over that.


#7

This is why most of my friends love instapage.