Adding images to a website while resizing them

---

@wood23666535xoml wrote:

when I resize images down to 400 x 400 pixels from, for example, "4096 x 2732 pixels".

---

In addition to what has been said, when you resize a rectangle (4096 x 2732 pixels) and make it a perfect square (400 x 400 pixels), you are distorting it. 

~ Jane

"but when I resize images down to 400 x 400 pixels from, for example, "4096 x 2732 pixels" and then add them to the boxes, they become blurry and are less clear than they were in their original form."

I think this has to do with site template and css/javascript for your site. There are many things to consider. Your site perhaps  is displaying 400x400 for some devices while for other that will be different because nowadays 400px on some devices is one inch due to high density screens. 

It is better to ask on platform or template forum on how things work and what to do to avoid problem. If you are using wordpess, for example, it needs plugin (I think) which will automatically create multiple dimensions of your image for multiple screen sizes so you do not need to bother with that. Images will be and properly optimized along the way. Not ideal but good enough for most users.

Short answer: no.

That has nothing to do with Photoshop. That's because 400 x 400 pixels is a really tiny image, more a thumbnail than an image. The pixelation you see is precisely those 400 x 400 pixels.

That said, it's possible to optimize resampling and sharpening for that tiny size. Don't use "bicubic automatic" when resampling, it will oversharpen and introduce artifacts. Use "bicubic smoother", which won't sharpen at all, and then carefully sharpen yourself after resampling. The ACR filter is pretty good for this, but use the sliders to find the optimal setting. Don't rely on default settings.

But again - the basic issue here is that 400 x 400 pixels is very small whatever you do.