0

It's always a painful process for me to save an artwork from Photoshop and Illustrator for the Web to 25 or even 50 kb with adequate quality, even if there are not that many graphic details. Also, it often has strange quality after change-over from 300 to 72 ppi.

Are there general approaches to saving for web with good (as original) quality in small, medium and large sizes?

For example, I need 25k file for client as smallest size (but the problem is that's actually the main size they will use). Here is original vs 25k:

Fonts and vectors look awfully pixelated (scale 800%):

enter image description here

Gradient looks too linear (scale 100%):

enter image description here

(scale 800%):

enter image description here

Improve this question
7
  • Olenia rule number 1 do not try to compress syntethic images like logos with jpeg compression. It will not work out!
    – joojaa
    Jul 18, 2017 at 13:01
  • Computer graphics are best saved in PNG format, yiedling a cleaner picture and very often a smaller file. As said above SVG can also be an option.
    – xenoid
    Jul 18, 2017 at 13:11
  • Thanks, but web-agency, for example, want .eps or else 300ppi-JPEG...
    – Olenia
    Jul 18, 2017 at 13:19
  • Why would a web-agency want 300ppi JPGs? That makes no sense whatsoever to me. As you've seen, graphics with solid colors do not look good as JPEGs. PNG (or SVG) is the only way to go for these. Seems to me that whoever is asking for JPEGs does not know what they're talking about and needs to be schooled on graphics for the web. If I were you I would show them the screenshot above (with the pixelation) and then show them what it would look like as PNG. Good luck!
    – BANG
    Jul 18, 2017 at 18:14
  • 1
    @Olenia That's just not true with this type of graphic... See my forthcoming answer ↓
    – BANG
    Jul 19, 2017 at 20:09

2 Answers 2

Reset to default
5

The answer (in this case) is to save as PNG. If they want 300ppi JPGs for the web – then they don't know what the hell they're doing over there.

The fact is – with solid color graphics such as these saving to PNG will yield smaller file sizes than JPG (and better quality).

Here I've made an example graphic and gone to Save for Web in Illustrator... This is a JPG at 60% quality (open images in a new tab to see full size):

Save for Web dialog: JPG

JPG Closeup

Example 1: JPG

So with JPG the file size comes in at 22.2kb. And this is at 72ppi... Exporting to 300ppi (at quality setting 'Medium') makes the file over 100kb:

Example 1.2: JPG @ 300ppi

Now here is the same graphic as PNG-24:

Save for Web dialog: PNG

PNG Closeup

Example 2: PNG-24

As you can see – with PNG-24 file size has been reduced to 11.8kb.

That serves to prove my point but let's take it even further... With this example if I export as PNG-8 I can get the file size even lower; ridiculously low without even trying:

Example 3: PNG-8

This file is only 5.2kb.

Improve this answer
3

You might want to try to save it into an SVG format. It is a vector graphic specifically for responsive web designing (from phone screens to large monitors).

I hope this helps.

Improve this answer
1
  • Thanks, didn't experienced SVG format yet. But I need to know how to get the most possible good JPG.
    – Olenia
    Jul 19, 2017 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.