Designing email signature in Illustrator and Dreamweaver but getting blurry images?

[harryl77590690]

I'm trying to design an email signature using Illustrator and Dreamweaver. I've designed the signature with dimensions of 600px by 220px, it uses a linked ai file logo, some text layers, and a few png's of the company's accreditations. When I look on screen it's fine, but as soon as I slice it and try and 'save for web' the images look blurry, even with a maximum file size using JPEG at 100%.

Does anyone have any advice? most forums just say to play with the quality percentage until you get a balance between file size and image quality but mine's poor at 100%.

[Nancy OShea]

I like to use real text and/or text with SVG.

In Illustrator, export to SVG.   Unlike raster images, vectors re-scale nicely and retain nice sharp edges with a minimal file size.

For older email clients that don't support SVG, add a PNG fallback.

Nancy O.

[harryl77590690]

Thanks for your reply Nancy, but I did try that. I opened a new artboard with just the logo itself at the correct size (around 190px by 35px), saved as SVG but the file size for just the logo was over the 10kb I'm aiming for. 😕

[Jon Fritz]

Is the logo actually a jpg/gif (or otherwise bitmapped image) being pasted into a layer in Illustrator, or did you create an actual piece of vector art and save as an SVG?

I have several rather involved logos that I use regularly and the most intricate comes out to 3.7K when converted to .svg out of AI. That won't be the case if you're saving a bitmapped image as .svg though. It has to start life as a vector graphic (drawn in Illustrator or another vector art creation program) and then get saved as .svg.

[harryl77590690]

thanks, John. You're right, I tried it again and it worked for the logo.

Still seems strange that I can't 'save for web' without getting blurry images but I think I can work around it by saving separate files.

[Jon Fritz]

If you're using the Save for Web function out of PS, it automatically changes images to 72 dpi, no matter what you had it at during design. On ultra high def monitors, that can cause images to seem to turn fuzzy.

[harryl77590690]

‌ye i think my retina display has something to do with it. There's quite a few threads on this. Also happens when I try and  export to jpeg or png, rather than 'save for web'.

I was trying to export a facebook banner for a client at 815px x 350px, the logo looked crisp on screen but as soon as i export it- blurry.

[Nancy OShea · Accepted solution]

Under PS Preferences > Rulers & Units, you can change new document presets from 72ppi to 300ppi.  I like to start all projects on a very large, high-res canvas.   I can always down-scale images without much penalty, but up-scaling causes artifacts (blurriness).  

IMO The Save for Web (legacy) feature has always been poor at both compression and optimization.   I've never been completely satisfied with it.  It's good to see that PS is finally taking steps to get away from it.

For vector shapes and text,  File > Export As > SVG produces the sharpest quality and you can downscale SVGs without much detail loss.

For raster images, File > Export As > PNG or JPG  seems to work well if your images are of sufficient size (total pixels).

Nancy O.