This is probably a very easy fix but I don't know what to do.
I'm using Nuxt 4.1.1
Having an issue with Image Rendering in which my images are loading in lower quality for some users (even if SVG) - images are also lower quality zoomed out than zoomed in
Solution Implemented:
Applied CSS rendering optimizations to all affected image elements:
Image rendering properties:
image-rendering: -webkit-optimize-contrastimage-rendering: optimize-contrastimage-rendering: auto
image-rendering: -webkit-optimize-contrastimage-rendering: optimize-contrastimage-rendering: auto
GPU acceleration:
transform: translateZ(0) to force GPU compositingwill-change: transform to hint rendering optimization
transform: translateZ(0) to force GPU compositingwill-change: transform to hint rendering optimization
Prevent browser downscaling:
max-width: none and max-height: none on static PNGs to prevent automatic optimization
max-width: none and max-height: none on static PNGs to prevent automatic optimization
Canvas optimization:
Canvas spritesheets already render at native resolution (1000x1000 per frame) with DPR scalingHigh-quality smoothing enabled (imageSmoothingEnabled = true, imageSmoothingQuality = 'high')
Canvas spritesheets already render at native resolution (1000x1000 per frame) with DPR scalingHigh-quality smoothing enabled (imageSmoothingEnabled = true, imageSmoothingQuality = 'high')
This is applying to animation spritesheets (png format) within my site and SVGs - but is not affecting all media
All the images look very bad when zoomed out but fine when zoomed in.