Fuzzy/blurry Images

  • 1
  • Problem
  • Updated 2 years ago
  • In Progress
We've followed all the guides in this forum on how to make sure that your images will be displayed sharp on all screens/devices - i.e. making the resolution as high as possible (1280px wide with 150ppi), and saving the images as jpegs.  However, the issue still persists. Images appear to be blurry both on editing and test emails.

Kindly advice us on this.

Many thanks
Photo of Al Khor International School

Al Khor International School

  • 1 Post
  • 0 Reply Likes

Posted 2 years ago

  • 1
Photo of Piedmont College - Development

Piedmont College - Development

  • 2 Posts
  • 0 Reply Likes
I read somewhere once that in order to get really sharp images on Facebook (or on the web in general), use screen shots instead of high res jpgs. This has solved my blurry-image-anywhere-on-the-web issues, including email marketing programs. I blow the image up as large as it can go on my screen, and do a controlled screen shot - which automatically saves to my desktop (this makes designing go much faster as well). 
Photo of Laura Dickerson

Laura Dickerson, Official Rep

  • 778 Posts
  • 64 Reply Likes
Hi there,

The above is definitely a way to go. Another would be, and it seems counter-intuitive, but try going smaller. Generally the specs here work:

Image size: Header graphics should be between 600-700 pixels wide, with a proportional height (a general guideline is 100-200 pixels). For images within your mailing's content, we recommend 480 x 480 pixels or smaller. Keep in mind that the larger the image, the greater the chance an email filter or firewall will block the image. (If you have one large image, we recommend building a slice-and-dice, which involves slicing the image into smaller images and coding them together in an HTML table to create a seamless-looking image.) In addition, some servers will reject or filter an email if the content is too image-heavy so make sure to include a balance of text and images. For the best experience on a retina display: you'll want to double the size of your image; for instance, if you have a 640px header graphic, you'd upload a 1280px version.

File type: Save your image as a .jpeg or .gif format before using it in your code.

Color profile: Your images need to be in RGB color values, as opposed to CMYK color values. CMYK color values are for print and won't render in an online environment.

DPI: Set your images to maximum quality with a resolution of 72dpi.

If there is a specific image, I can have a look at it and see if we have a way to get it crisper for you.