Participant

Question

Images loose quality when scaled down.

Forum|Forum|6 years ago
April 10, 2019
4 replies
6328 views

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!

This topic has been closed for replies.

E

ebekk

Participant

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

Nancy OShea

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

J

jessicae12701103Author

Participant

Thank you!

Nancy OShea

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

rayek.elfin

Legend

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

Community Expert

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?

davescm

Community Expert

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

J

jessicae12701103Author

Participant

Thanks for the help! I'll check that.

D Fosse

Community Expert

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.

J

jessicae12701103Author

Participant

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded