Pixelated when exporting to 400x400?

[Cerissa27867789rpyj]

Hi all. Forgive me for what may be a rookie question. I'm trying to export a bunch of images (from RAW, at 1x1) to 400x400 for ecommerce. When I export as normal to full res, it is super crisp and perfect. When I export to 400x400, 100 quality, 72ppi (also tried 300ppi for kicks), standard sharpening for web, it is super pixelated and details are blurred. I tried exporting to 400 at the short edge before cropping to 1x1, and have the same issue (though, a little bit less so). Any tips? Also tried in photoshop just to cover bases.

[Per Berntsen]

A 400 x 400 image contains 1.6 megapixels. And your raw image may contain 24 megapixels, or more.

So you're throwing away most of the pixels in the original image, and there is no way a small image can look as good and as detailed as the original raw file.

Are you using output sharpening when exporting? Try setting it to Screen, and High.

For the record, the ppi value is irrelevant for screen viewing. Ppi is metadata used to calculate the printed size of an image.

If you would like to post an example 400 x 400 image, please do not attach it, use the Insert Photos button in the toolbar to insert it directly in your post.

[Cerissa27867789rpyj]

Thank you so much for your reply. My issue is that the 400x400 images are not looking anywhere near as crisp as the high res JPG that I exported originally (then my client asked for 400x400 for the site). I am using output sharpening, but it is not doing the trick. Should a 400x400 jpg look as crisp as 2800x2800 jpg, for example? Or should I expect some pixelation? I really appreciate your time! 

[Per Berntsen]

Should a 400x400 jpg look as crisp as 2800x2800 jpg, for example? Or should I expect some pixelation? I 

No, it won't. When you reduce the numbers of pixels, it will look "worse". I put "worse" in quotation marks because this is strictly not about image quality, but about how digital images work.

Subject matter also plays a part here, the circular shapes in your images cannot be smooth and sharp with so few pixels.

The big concern is that in some images there is text on the products and the pixelation is even more obvious.

Text will never look good with jpg, use PNG instead, which is designed for graphics with sharp edges, like text.

Jpg works best for photographs without text, but you can try PNG, and see if it makes any difference.

[Conrad_C]

Do the images look fine at the size that the ecommerce site will display them? 400 × 400 is just not a lot of pixels. It should look OK when viewed at 1:1 magnification (400 display pixels across) but absolutely will not stand viewing at any enlargement beyond 1:1.

If the ecommerce site requires that size because 400 × 400 px is the size of the container div in the website code, then that is the size they must be, and they should be fine when not enlarged. At that size, if you want clearer small images then look into increasing local contrast adjustments, such as Clarity and Texture.

[Cerissa27867789rpyj]

Yes, I need to ask if the 400x400 is a requirement maybe only for thumbnails. But even so, I feel I should be able to produce a crisp 400x400. Or, hope I can. The big concern is that in some images there is text on the products and the pixelation is even more obvious. Including an example without text where I still think it's obvious. 

(full size 3648x3648, no output sharpening)

400x400, output sharpening high.

[Cerissa27867789rpyj]

Feel the need to point out that these are outtakes just to use as an example, ha.

[Conrad_C]

Just a side note…although the total graphic is 400 × 400 pixels, there is so much white space around the edges that the actual subject only gets to use roughly 220 × 120 pixels. (For context, macOS allows Retina desktop icons to be up to 256 × 256 pixels).

Is the amount of white space required by the design? If not, filling more of the 400 × 400 pixel square would let the subject use up to 6x more pixels than it does now to render detail.

[JohanElzenga · Accepted solution]

Your 400 x 400 pixels image looks just fine when viewed at the correct size. I think you probably view it (much) larger than 100%, and that does not make sense. You must view it the way it will look on the website, which is exactly the same as the embedded example in your message.

[richardplondon]

If you zoom out your original photo so that it appears 400 x 400 monitor pixels big (would fit in the palm of your hand, give or take), how much of its detail can you currently see without re-zooming the image?  That is, roughly speaking, the same amount of picture detail that a 400x400 pixel export can include.

[Cerissa27867789rpyj]

Ah, when I do this, the detail is perfect (I had the 400x400 open beside a full jpeg export and zoomed out of the full until it was the same size).