How do I export small PNG, JPG and GIF images for web graphics without losing pixel quality?

[elizabethm511]

Hello!

I've been working as a graphic designer for a couple of years - and I've always had this issue which I thought I had a good solution for. But for a current project that is not an option and I'm stumped and frustrated. Any help would be very appreciated! I've read just about ever related internet forum.

When a client asks for web graphics - I usually export for web, save as PNG-24. And I export at 2X or 3X percent size (up to 2000px wide), I understand that may not be the best for loading speed, but I've never experience an issue with that - and anything less than 500px saved at 1x always comes out pixelated.

I have a current project in which the 3rd party client is only accepting the specific dimensions and file type. For example is a JPEG 160x600 pixels. PNG and GIF are also required file types. No matter what settings I've experimented with, the images are pixelated when exported at the required dimensions. I can imagine that a lot of people must know what I'm talking about. How can I export a relatively small vector graphic as a rasterized JPG with up-to-web-standards pixel quality? Any insight would be wonderful, thanks!

Most of the images have more text and look a lot more blurry.

How image looks in AI:

Saved GIF and PNG:

[Monika Gause]

Nobody will zoom into that image, so where is the problem?

A pixel image will always be pixelated at some point.

[elizabethm511]

Thanks for your response. Do you really think those two images are acceptable quality? I never see images online that pixelated...

[Monika Gause]

elizabethm511  schrieb

Thanks for your response. Do you really think those two images are acceptable quality? I never see images online that pixelated...

Yeah, because usually you don't zoom in on them. And maybe because some of the images you see are even vector files.

I have exported hundreds of raster images for use on the web. And when you export a raster image you will get rasterization. And if you want to keep your website visitors you don't want to serve them four times the data amount, because that eats up their bandwidth and their mobile data plans in no time.

Ask your client if he can also use an SVG file (which is a vector file format).

[雪儿廖55729454]

Sorry, I didn't see the picture, so there was no way to answer it

[StevenMoore]

If you need a 160x600 raster file (jpg, png, gif, etc), it seems like if you just export the vector (Illustrator file) at 3x or 4x to raster, and then scale the raster file back down to the 160x600 size you would get what you need. I think the problem is that you are trying to export the raster file at the same size as the vector file. That is causing the pixelation. Exporting the vector at 640, which is 160x4 and 2400, which is 600x4 to a raster file, and then scaling the raster down by 4 should get you there.

[elizabethm511]

Thanks StevenMoore. That was the first alternative I tried. But they end up looking exactly the same..

[Jacob Bugge]

Elizabeth,

To obtain a crisp and clear raster image, it is always best to make it in the PNG(24) format at exactly the needed size in pixels x pixels.

When you make it in a larger size, it will be reinterpreted by making fewer pixels out of the ones you have. When you make it 2 or 4 times the size, at least you will have 2/4 pixels changed into 1, but there is no need to, and it is more precise to just choose the right size (one conversion/change less). With 3 times it is fundamentally wrong because you will start mixing partial pixels.

To create the right raster image size direcctly, you may use Save for Web which is now hidden away in:

File>Export>Save for Web (Legacy)

With that you can set the actual pixel x pixel size in the Image Size window.

In addition, you may use the Type/Text optimization option (in other cases you may use Art optimization), also if you Export.

[Ton Frederiks]

I am not sure what the examples show.

They are not the 300 px X 300 px you show in the save for web example screens.

They look like screendumps of enlarged versions.

Something to remember when comparing a screendump to an exported version.

A screendump on my Mac has double the resolution (144ppi) compared to the exported image (72ppi)

That makes the Illustrator screendump sharper than the exported one.

To really compare the AI screen to the exported result, export at 144 ppi.

[雪儿廖55729454]

If you want to export a picture, then use the web format, change its quality, the higher the pixel is, but the memory will also become larger. May I ask if you are Chinese?

[@mj]

Consider using SVG for resolution independence per Monika's suggestion.

Choose File > Export > Export for Screens > SVG.

HTH