Mobile app version of vmapp.org
Login or Join
Berryessa866

: How to export JPGs at different sizes without losing image quality? 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

@Berryessa866

Posted in: #Export #ImageQuality #Jpg #Resize #Resolution

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%):



Gradient looks too linear (scale 100%):



(scale 800%):

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Berryessa866

2 Comments

Sorted by latest first Latest Oldest Best

 

@Becky351

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):







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:



Now here is the same graphic as 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:



This file is only 5.2kb.

10% popularity Vote Up Vote Down


 

@Murray976

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme