Hazy edges when image is exported

[Nedez]

Hi Guys, please I really need your help on this one, my job is on the line.

When I design images that are below 1000px and export to jpg or PNG, it becomes a bit hazy on the edges. The type and outline edges don't come out very sharp. It doesn't have a crisp outline. I've searched everywhere without solution to this. I've also used all export options on JPG, PNG, PNG-24 including save for web legacy with Type optimization selected. I've also made sure the works are pixel perfect,  I'm empty with ideas.

Can anyone help me figure out what the problem is please? Here are two of the images in 720px by 300px : Dropbox - Constant-confusion.png - Simplify your life  and Dropbox - Grow your staff-Old.png - Simplify your life

[Mike_Gondek]

Your image is 720 x 300 px and looks correct when displayed at 100% view.

When you zoom in stuff looks bad and always will

Save for web you gives you more options such as type optimized.

Otherwise you need to make your type larger,  use more pixels if you are allowed to make the web banner larger.

Other than that make sure align to pixel grid is on.

[Nedez]

Hi MikeGondek​, thanks so much for the explanations, however, I've done all those earlier and my images looks okay to me. I've tried to make my boss understand but she's still not satisfied.

[Monika Gause]

Nedez  schrieb

I've tried to make my boss understand but she's still not satisfied.

She won't get better results anywhere.

[melissapiccone]

You will not get a crisp line in a jpg, it's a pixel image. What you are looking at in Illustrator is vector and doesn't have pixels until you save it as something else. The jpg will always have fuzzy edges compared to the Illustrator file.

[melissapiccone]

I took a look at your images, the text is blurry and doesn't look right in the browser, but when I download them and open them in PS they look fine.

[Nedez]

melissapiccone what do you think could cause that?

[boots_n_patches]

i  have  no  idea  what  your  environment  is … or  what  your  expectations  are … i  ‘surmise’  based  on  what  you  state.  yes,  you  uploaded  two  *.png  images … you  could  have  also  uploaded  the  original  *.ai  images  for  comparison.  some  elements  in  illustrator  generate  raster  images … even  in  their  native  state.

if  your  intent  is  to  host  the  image  on  a  webpage … and  you  wish  to  retain  certain  regions  that  are  ‘transparent’ … you’d  save  as  gif  or  png  or  svg.  gif  and  png  are  rasters(made of pixels) … svg  is  vector.  gif  will  create  an  undesirable  ‘halo/fringe/alias’  around  the  transparent  areas.  transparent  png  has  no  halos … and  is  honored  by  almost  all  browsers.  svg(intended for one/two dimensional images)  is  not  honored  by  all  browsers.  additionally,  gif  images  contain  only  256  colors.

in  illustrator,  when  exporting  from  vector  to  jpg/gif/png/psd/etc … this  protocol  rasterizes  the  vector  image.  a  small  box  appears,  asking  the  dpi/ppi-resolution  you  want … normal  webpage  is  72dpi.  theoretically,  you  could  save  it  with  higher  resolution … but  it  won’t  look  any  better  when  displayed  on  a  webpage … also,  the  higher  dpi  means  add'l  bandwidth.  if  printing … line-art  can  be  rendered  to  1200dpi  to  help  retain  crispness.

what  do  majority  of  companies  go  with … hard  to  say,  really.  many  webpages  with  logos  are  either  jpg  or  png.  i  prefer  transparencies … so  i  go  with  png … as,  png  have  many  benefits  when  designing  websites.  the  normal  illustrator (artist)  creates  a  ‘safe’  read-only  vector … thereby,  rendering  different  options  from  that … webpage  would  be  png … anything  printed  would  be  vector.

you  always  want  to  save  the  original  vector  in  a  remote  location … in  case  things  go  awry.  once  a  year  open/save  that  file  to  a  new  location.  why?  magnetic  bytes  will  eventually  lose  their  charge.  never  use  a  usb-drive  for  this … they  are  not  a  dependable  medium  and  may  fail  tomorrow.  similarly,  never  trust  an  ssd-drive  for  same  reason.

your  boss  pulls  you  into  her  office  on  friday … telling  you  the  company  president  wants  to  host  a  billboard  with  advertisement.  all  you  gotta’  do  is  copy/burn  that  original  vector  to  a  cd  and  give  it  to  the  sign-shop  to  silkscreen.  vectors  will  always  retain  their  sharpness … because  they  are  actually  mathematical  formulae  instead  of  pixels.

[melissapiccone]

As to why it might look different in the browser - no idea. I'm just viewing it from Dropbox. However... if it's in a webpage and the size is different for the display from the actual size of the image, it will look horrible. Make sure the file is the exact size - pixel dimensions - you want it to display.

[meganchi]

Have you tried using the asset export window in Illustrator?

Another question, what will this file be used for? Web or Print?

[Nedez]

meganchi It's for web

[meganchi]

Have you tried turning on "Snap to Pixel" to make sure your artwork is aligned to a pixel grid like MikeGondek​ suggested previously?