Images loose quality when scaled down.

[jessicae12701103]

I started to noticed that when I imported a file from illustrator, it looks grainy unless I import it into a huge file. Usually, I import the ai. file into a 696x391 px image to combine a photo and a vector object. So, I tried importing it into a larger photo (6144x3452). It looks so crisp and clean when I save it for web, but it is too large. So I tried sizing it down afterwards and it looks terrible. Both the graphic AND the image loose quality at 696x391. This makes no sense to me at all and I have tried almost everything. Please help me!

[D Fosse]

jessicae12701103  wrote

the image loose quality at 696x391. This makes no sense to me

It does to me. That's a very small file and the pixels will be clearly visible. There's only a couple of hundred each side.

You need to understand the difference between pixels and vector. Photoshop is a pixel editor and represents everything in the available pixels. Illustrator is a vector application which has no resolution. Vector content is infinitely scalable and always crisp and sharp whatever the size.

[jessicae12701103]

As much as I appreciate any help, I don't think you should assume what people know and what they don't know. I have been resizing images to that size for a year because of my job and have noticed a difference in quality from what it was before (at 696x391.)

[davescm]

A 696 x 391 pixel image is very small. Compared to the 6144 x 3452 image you have thrown away almost 99% of the pixel info.

However - one thing you can check is what algorithm you are using to resize. The default is set in Preferences >General and should be Bicubic. You do not want Nearest Neighbour set.

Dave

[jessicae12701103]

Thanks for the help! I'll check that.

[Nancy OShea]

Divide and conquer.

#1 Export vector graphics in Illustrator to SVG (scaalable vector graphic) which is a web file format perfect for text, logos, icons and drawings.  You can re-scale SVG with CSS code without loss of image quality.  You cannot do that with JPG or PNG files.   See screenshot from Illustrator's SVG Options.

#2 Optimize raster photos in Photoshop and use them as background images for your SVGs.   File > Export > Export As.  To reduce file size, move Quality slider to the left.   See screenshot.

[rayek.elfin]

In your example you use jpg. I would avoid jpg for sharp-edged vector art, and instead export a lossless PNG version.

davescm​ It really is too bad that Photoshop's selection of resampling algorithms is so limited/outdated, in particular for downsampling images. Far better options have become available in the past two decades.

[D Fosse]

Rayek, that would be a useful comment if there actually was a problem with Photoshop's downsampling. Can you show us an example of Photoshop's limited and outdated downsampling? Where exactly does it give you an inferior result that damages your images?

[rayek.elfin]

Please read my post carefully: I wrote that the selection of down-sampling methods is outdated and limited, not that bicubic down-sampling or the other ones available in Photoshop are actually outdated or useless; they are not.

But depending on the image the down-sampling method will have a visible impact on the quality of details, edges, tiny text, and so on. Subtle, but still quite visible. I notice it particularly when working on vector-based game assets that need to be converted to bitmap versions. Bicubic is too soft, CatmullRom just works better in this instance. That said, it is often subtle (not always, though!), and most people won't care.

It would be nice if Photoshop would offer additional options. For example, chroma subsampling control is still not an option in Photoshop's JPG export options.

Anyway, I don't use Photoshop's web export, and have relied on other tools for many years now.

As for the PNG compression in SFW and the newer Export As: Export As indeed does a much better job, but still compares poorly to other dedicated external tools.

But hey, I realize I am a nitpicker! 🙂

[davescm]

Hi

I just took a selection of images ( a mixture of pixel images, patterns and shapes) and used both SFW(Legacy) and Export As

I then imported the resulting PNGs onto layers in the same document, setting the blend mode to difference and adding a threshold adjustment layer so that I could quickly see any none zero pixels (i.e. where there was a difference).

For PNG24 there was no difference between the png images from SFW and from Export As. All difference values were 0.

For PNG 8 there were differences but they were fairly small in most areas with EA giving a smoother gradient in some areas.

Dave

[jessicae12701103]

For some reason, I'm not getting quite as many options as you. Do you know what I am doing wrong?

[ebekk]

try save for web option, in this mode you will get image in good quality.

[Nancy OShea]

Do not use legacy Save for Web in Photoshop CC.   It's woefully outdated.  Use Export > Export As instead which is better for many reasons.

[jessicae12701103]

Thank you!

[davescm]

Hi

Nancy - I'm interested in what you see as "woefully outdated" in Save for Web? I use it a lot to export jpegs and pngs and don't have a problem (aside from the stupid default to uncheck embed profile which is shared by Export As).
However, whilst  Export As adds the SVG option, it lacks the png and gif options to control the conversion and also lacks a before and after side by side comparison. It strikes me as a good idea but unfinished.

Rayek - Yes there are other options for re-sampling,  but personally I've never had an issue with the available options for downsizing images.

Dave

[Nancy OShea]

• Legacy SFW strips copyright metadata. 
• The panel is  difficult to see (at least on my system).
• SFW does't respect 96 screen ppi  which is the baseline I use for all web images.
• SFW deosn't support @1x, 2x, 3x output for retina-ready web images.
• The compression, especially for PNGs,  has always been poor.   Even EOL Fireworks had a  better compression algorithm in its day.
• The only thing I use legacy SFW for is rendering animated GIFs.

[davescm]

Hi Nancy thanks.

Copyright meta data stays in SFW as long as you select it and not "none"

I'd not noticed any compression issues on the images I use, but I might run a comparison and take a look.

Like I said Export As feels unfinished in its facilities

Dave