Skip to main content
L
lories43113522
Participant
April 23, 2019
Question

Exporting for web

  • April 23, 2019
  • 3 replies
  • 488 views

I'm a self teaching beginner to Illustrator and I can't seem to ever export to get clear images without a large file size that slows everything down. I end up with ugly pixelated stuff and it's so frustrating after spending hours to create it!

I've read the difference between SVG and PNG when to use which. The thing that seems to work best is "Export As..." as a PNG but if I'm not wrong the file size is huge that way and still doesn't come out as clear with some things. When I export, I either lose quality or part of the project ie, a shape I created won't be there. Most of what I'm creating will be for the web/social media purposes and quality is key. The internet has tons of people explaining how to export, none of which seem to work for me so I'm asking the experts here. I feel like there's a piece I'm missing and any help/suggestions are appreciated in advance!!

This topic has been closed for replies.

3 replies

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
April 23, 2019

You're exporting for social media? So SVG is out of the question, as the social websites don't support it.

As for the raster based file formats: You will need to design your stuff in a way that it works in the file sizes you need. Small serif type won't work and there are only so many pixels in your file, so fine detail is also a no-go.

Jacob Bugge
Community Expert
Jacob BuggeCommunity Expert
Community Expert
April 23, 2019

lories,

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for (or second best at sizes that are powers of 2 times as large).

Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect  Settings.

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct.

The high resolution mentioned at the top here is only muddling the image.

The Legacy Save for Web may be an old carthorse, but it knows its way home (even if the driver is drunk and sleeping it off in the hay in the back).

Eugenio.NYC
Eugenio.NYC
Participating Frequently
April 23, 2019

You can export a JPG for images such landscapes or people but for logos and flat color drawings work much better PNG or SVG

and you have to see if you need transparency or maybe not...

Adobe recommends the Export As dialog box from where you can export these files but depending on the image.

any chance that you can share one of those original images and what size you are looking for

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices