Pixel-independent image sharpness

Simply put. Some images are More IN Focus than other images. No matter what the Pixel dimensions are.

When you downscale raster images, you introduce artifacts & reduce pixels which degrades image quality. There's nothing much you can do about it because that's the nature of pixel-based images.  And on high-pixel-density devices like iPads and 4 or 5K displays, the blurriness & pixelation can be even more pronounced.  One way around this problem is to use the SRCSET property and deliver different sized raster images to different devices (@1x, @2x, @3x, @4x).  This works well with photographs that contain millions of colors. See Mozilla Developers Network for more details.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

But what if your web image contains fewer than 20 flat colors?  Use vector graphics instead of raster.  Unlike JPG, PNG and GIF which are pixel-based, SVG is math-based and resolution independent.  SVG remains sharp & crisp on ANY device, at any size.  See screenshot.

I use Illustrator for vector graphics.

Perceived sharpness, actual image detail, and pixels-per-inch resolution are all separate things. That’s why you can have two 800 x 800 px images that have different apparent sharpness. Bit depth doesn’t have much to do with it.

Resolution (pixels per inch) is just potential detail. You can have a 5000 ppi image look like soft mush if it was a blurry image because the camera wasn’t held steady or the focus point was set wrong. So what we’re really talking about is that if an image is sharp to begin with, how to preserve or enhance that at web pixel dimensions like 800 x 800.

Sharpening in software like Photoshop is largely a local contrast adjustment to emphasize edges. Has contrast been well managed throughout the tonal range and at different detail frequencies? Advanced editing uses local contrast adjustment to improve perceived definition, such as the Clarity and Texture options in Adobe Camera Raw/Lightroom or the traditional High Pass sharpening technique in Photoshop. An 800 x 800 px image with superior local contrast handling will appear to be sharper than the same image without that handling, even if all other settings (including sharpening) are the same in both images.

Which resizing method was used? In both the Image Size and Save for Web dialog boxes, you get to choose from Bicubic, Bicubic Smoother, Bicubic Sharper, Bilinear, etc. Some of those preserve details better for enlargement, some for reduction. If one 800 x 800 px image used an inappropriate resize method, it is not going to look as sharp as the other 800 x 800 px image.

Was sharpening applied at export? If saved from Adobe Camera Raw or Lightroom, there is an optional sharpening step that can be applied at the export stage. This can make the same 800 x 800 result look sharper from those programs than from Photoshop. But in Photoshop, you could also build in a sharpening step after you resize down to 800 x 800 and match those results.

Sharpening itself is a learned skill. If you have two people and one of them is better trained on which sharpening settings to use for 800 x 800 vs 5000 x 5000, that person will produce a better 800 x 800 result. Because the best sharpening values (Amount, Radius…) for large pixel dimensions are typically wrong for much smaller pixel dimensions.

Pixels image quality.  If you have a 24MP camera  and you take a picture with you very expensive where lens the is completely our of focus at what resolution is you image sharp.  What are the pixels density of the displays you are judging  sharpness  Iphone or a wall size hdtv?  How sharp can they display an images. Thing are relative and image quality varies. All image are not great.

Scaling an image changes an image quality.  Graphic can be scaled well using vectors.