Exporting PNG & JPG blurry, can resize in gmail with no blur

I’ve seen a few questions similar to this, but haven’t found an exact answer. Please direct me if you find a thread that can answer this.

I’ve tried exporting a png and a jpg for a email signature and now matter what I do they are blurry. What is the best way to export a png or jpg for an email signature? (I’ve recreated the signature in indesign, illustrator and photoshop, it doesn’t matter the program or how I export, nothing seems to change)

There is a logo and text in the signature, it needs to be somewhere around 440px wide by 80px high. I cannot upload screen shots of the actual design.

NOW, the weird thing– so if I export the signature at a higher dpi and resize it in gmail as an embedded image it is perfectly sharp no matter how small I make it. Why can I make the signature smaller in gmail, but not in illustrator, indesign, or photoshop?

I need to be able the export the file at the correct size as either a jpg or png because of the way my company distributes the imagery for signatures, so I can’t just resize within gmail. The actual file needs to be the correct size for upload.

Things I’ve tried…

Anti-aliasing vs. no antialiasing
changing dpi
changing size of file before exporting and then reducing size
save for web and every single preference you can possibly imagine
different quality levels
art vs. type optimized

I’ve exported way too many of these. I would really appreciate any hep anyone has to offer. Thanks!

Answer

I’m going to give you an example – hope this helps!

Since I don’t know what your signature/logo looks like, I just used basic text… and started with an image 6.11in x 1.11in @ 300ppi since it’s the same proportion as your 440×80.

enter image description here

I’m not sure which version of Photoshop you’re using, but if it’s the latest, follow these steps:

  1. File > Export > Export As
  2. Select either JPG or PNG..whichever you prefer. From my experimenting, they both come out with the same image quality with separate settings..

    • JPG, 440×80, bicubic smoother

      enter image description here
      RESULT: enter image description here

    • PNG, 440×80, preserve details

      enter image description here
      RESULT: enter image description here

…now if you’re using an older version of Photoshop, you can do the same thing by going to File > Save for Web… then adjusting there!

Hope this helps!

Attribution
Source : Link , Question Author : lofat , Answer Author : acook712

Leave a Comment