Cached cover images are displaying at low, blurry resolution

closed

· Images & image management ·

By tjtrewin on 10/21/2023

· UI/UX

I've uploaded an image that is 1920x480 pixels, .webp format, and only 10kb in size. When I view this image on the image page it shows as a cover image perfectly like in this example (the same thing goes if I open the image url in a new tab like this, and the image displays nice and clear as always when embedded with the image tag like so:

Bright pixel art landscape showing the rolling hilly landscape of Zendu. Orange flowers bloom in the foreground as a meandering river courses into the distance. Creaures graze beside a forest of tall, spindly fir trees. Floating rocks loom in the sky.

Zendu field by TJ Trewin

However, when I set this image as my world cover image (and default cover image) - the cached image that shows is blurry and looks low res, which is very noticeable in pixel art. Examples:

Example of world homepage cover

Example of default cover image

Extra comparison (easiest to spot when looking at the grass & flowers on the left corner of the image):

Cached image being served

Uncached image

When I open the two image links and inspect each one, the cached one has been resized from my original 1920x480 up to 1600x400 which has caused the image to blur. (I remember Jamie Buckley / WantedHero having this issue with his illustrations a while ago too but I'm not sure if he found a workaround for it.)

Steps to Reproduce

upload a .webp image 1920x480 that contains fine lineart, pixel art, or something with distinct sharp shapes/lines

view the image page

also open that image in a new tab

set that image as the world homepage cover and default header image

load the homepage or article

also open that image in a new tab

compare the quality of the original image to the served cached image

Operating System

Windows

Browser

Firefox

Related Entity

(Image caching) As a test, I rescaled my image and reuploaded it as 1600x400 instead, but the same issue occurs. There is slightly less blurriness, but it's still noticeable in the flower ares of the image:

new image

cached new image

These images are both the same size cached & uncached.

Cached cover images are displaying at low, blurry resolution

Cached cover images are displaying at low, blurry resolution

Steps to Reproduce

Operating System

Browser

Related Entity

History

Find your way!

Resources

WHO WE ARE

LEGAL

Get the news

Listen to our Podcast

Our Allies