#Image Rendering Low Resolution

4 messages · Page 1 of 1 (latest)

arctic latch
#

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: optimize-contrast
image-rendering: auto```

GPU acceleration:
```transform: translateZ(0) to force GPU compositing
will-change: transform to hint rendering optimization```

Prevent browser downscaling:
```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 scaling
High-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.
shell needleBOT
#

Hi @arctic latch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I understand you're experiencing image quality issues in Nuxt 4.1.1 where images appear low resolution for some users, particularly when zoomed out. Unfortunately, the knowledge sources provided don't contain specific information about image rendering quality issues or CSS rendering optimizations in Nuxt 4.

However, based on the knowledge sources, I can share some relevant information about handling images in Nuxt:

Image Handling in Nuxt

The knowledge sources mention several image-related considerations:

  1. Using Nuxt Image Module: According to the performance best practices documentation, Nuxt Image is recommended for image optimization in Nuxt applications.

  2. Image Path Issues: The knowledge sources show that image path handling can be problematic in Nuxt. Images in the assets folder need proper handling, and sometimes moving images to the public folder resolves issues.

  3. Dynamic Image Imports: There's a known issue with dynamic image imports from assets in Nuxt 3, where images may need to be placed in the public folder instead.

Suggestions

While the knowledge sources don't directly address your rendering quality issue, you might consider:

  1. Try the Nuxt Image module (@nuxt/image) if you haven't already, as it's designed to handle image optimization properly
  2. Check image source location - ensure your images are in the appropriate directory (public vs assets)
  3. Verify image formats - the knowledge sources don't mention specific issues with SVG or PNG rendering quality
#

I'm sorry, but the knowledge sources don't contain specific information about CSS rendering properties like image-rendering, GPU acceleration settings, or canvas optimization in the context of Nuxt. Your issue may require consulting the official Nuxt documentation or community forums for more specific guidance on image rendering quality.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: