Why high res pictures look blurred when scaled down on unbounce?


#1

Hi! For my landing page (www.engrami.com), the app screenshots (which are in high-res) look blurred on unbounce when scaled down? Usually, I thought it should be the other way round i,e, low res pictures when scaled up should be blurred? Please help. How can I fix it?


#2

Hi Sandeep,

This can sometimes happen when the assets in the library are much larger (or smaller) than what you’re attempting to scale them to.

You can remedy this by sizing the images in Photoshop to the exact size you’re attempting to scale them to in Unbounce (see example here: http://screencast.com/t/bb98wvgwBr), then saving them in .PNG or .GIF and re-uploading them to your library.

I know this can sometimes be a pain, but uploading the exact image size is a foolproof way to ensure this doesn’t happen. Hope this helps!


#3

Since most people don’t have Photoshop, you can also use this: https://pixlr.com/editor/

Also, you should never scale down high res images on your web pages. The full image size still has to load, and that slows down the overall loading time of your page. If you have a 1mb image scaled down to a little area, you could probably fit a 55kb image in that area. It’s good user experience practice to keep loading times down. Plus, if you’re indexing your landing pages, Google takes page load time into consideration for rankings.


#4

Awesome points, Philip! It is indeed in your best interests to use optimized images on your landing pages, both in terms of physical size (width x height) and file size (500kb).

Also, Pixlr is a fantastic alternative to Photoshop (it’s also free!). I have personally used Pixlr to scale down images and save them for web with various quality options. Great recommendation!