Why do images sometimes look less sharp?

In some cases, a large sharp original image may end up looking a little blurry or pixelated once it's viewed in emails, PDFs or agency websites. When this happens, it's typically due to a combination of the following:

Because there are numerous factors contributing to the effect, some variation in sharpness at different sizes and on different devices is inevitable.

Image scaling is the difference between the source image dimensions and the viewing dimensions. For example, you may have an image that is 800px by 1200px. At 1200px tall it'll be too high to display at its natural size on most screens so it gets scaled down, perhaps to 600px by 900px. In this case, the image is scaled by a factor of 0.75, or three quarters of its natural size.

The requirement for websites to be "responsive" (adapt to all screen sizes) means scaling down is a normal occurrence and is encouraged to increase image clarity on high-density screens.

At the other end, if you start with a small image but zoom into it or set it to display at larger dimensions it gets scaled up. A 200px by 300px image that needs to fill a 300px by 450px container gets scaled up by a factor of 1.5, or one & a half times its natural size. An example of how this may happen on an agency site is if the display size of a headshot is increased beyond the actual headshot image size.

Scaling up is undesirable as it will always create a lower quality image. A small amount of scaling up is often acceptable, but any significant scaling up will be noticeably blurry.

In each case, you're no longer looking at the original pixels of that image. Either some are being discarded to scale down, or they're being multiplied to scale up. The result of these changes is variation in image clarity.

Different browsers apply their own pixel rendering algorithms to handle image scaling. Chrome & Edge sometimes create blurrier images than other browsers when scaling down, because the browser engine prioritizes speed and smoothness over sharpness. In contrast Firefox's engine prioritizes sharpness and detail, but the downside may be slight jagginess or pixelated edges in some cases. Safari achieves generally good clarity but performs best on Apple Retina displays - on other hardware, scaling may result in a blurred effect similar to Chrome.

Some of this can be affected by code on a website, while other settings are configured in each user's browser. Beyond the browser, each device's GPU and other hardware configuration can also significantly affect the way images get rendered when scaling up or down. The result is an inconsistent experience for each user and device.

Pixel-density refers to how small and tightly packed the pixels are physically on a screen. Most people on desktop computers will be using relatively low pixel density monitor, while Apple Retina screens and most modern mobile devices have much higher pixel density. The higher the pixel density, the smoother, sharper, and more detailed images can appear, however they need larger source images to achieve that clarity. There's a trade-off: on a low pixel density screen an image will usually look best at its natural size, while on a high pixel density screen, the same image displayed at the same size will appear relatively soft (due to stretching the image across more pixels).

A professional image direct from a high quality camera often has a file size in excess of 10MB. Even modern phones with their high-megapixel cameras can produce very large files. When large images are presented on a website that large file size quickly becomes a performance issue, which is especially bad for mobile users with smaller screens, and this is typically the majority of website users. Search engine optimization and good user experience prioritizes speed as a key factor, so it's necessary to make image files much smaller for the web. This is done through a combination of reducing pixel dimensions and compression.

Compression is the process of reducing the amount of data in an image file to cut down on file size, while attempting to retain as much clarity as possible. Compression vs quality is the trade-off: high quality gives clearer images at the cost of high file size, while high compression gives lower file size at the cost of lower image quality. Most image formats have this compression built-in, for example every JPEG file you see is already compressed from a larger source format. How much it's compressed varies.

When you upload images to Syngency, a series of smaller-dimension images are created for use in different contexts, and compression is configured for high quality to minimize any visible clarity reduction.

If you believe your images are being scaled up incorrectly or rendering unusually blurry, reach out to our support team with a link, and let us know what browser you're using, on what kind of device. We can advise whether there are any adjustments that will make an objective improvement.