Skip to main content

[Eco Bounty]DePINscan Hero Banner Carousel - Blurry Images & Poor Mobile Responsiveness

New Issue

Description

The promotional banner carousel on the DePINscan homepage displays images that appear pixelated/blurry and do not properly fit their containers on mobile devices. The aspect ratio appears incorrect, causing either cropping of content or compression artifacts that reduce visual quality.

Issues Observed

1. Image Quality - Blurry/Pixelated

  • Screenshot 1: The "Crypto's Talent" banner (purple background) shows visible compression artifacts and blurriness on text and logos (IoTeX logo, OG logo).

  • Expected: Sharp, high-resolution banner images suitable for Retina/HiDPI displays.

2. Aspect Ratio & Fit Issues

  • Screenshot 2: The "Nubila" banner ("The Physical Perception Layer for AI & the Real-world") appears cropped or improperly scaled.

  • Specific Problem: Left portion of the banner is cut off/misaligned within the carousel container (see orange arrow pointing to left edge).

  • Expected: Banner should responsively scale to fit mobile viewport width while maintaining aspect ratio, or use mobile-optimized assets.

Steps to Reproduce

  1. Open depinscan.io on a mobile device (Android Chrome).

  2. Scroll to the hero carousel section below the market cap chart.

  3. Swipe through the carousel slides.

  4. Observe image quality on text-heavy banners.

  5. Observe left-edge cropping on landscape-oriented banners.

Expected Behavior

  • Images should render at appropriate resolution for device pixel density.

  • Carousel should use object-fit: cover or contain appropriately to prevent distortion.

  • Mobile-specific banner assets (9:16 or 4:5 aspect ratio) should be served instead of desktop assets (16:9) to prevent compression.

Suggested Fixes

  1. Responsive Images: Implement srcset or <picture> element to serve mobile-optimized banner images (higher DPI, different crop).

  2. CSS Object-Fit: Ensure carousel containers use object-fit: cover with proper object-position centering.

  3. Image Compression: Check if images are being overly compressed by CDN; serve WebP format with fallbacks.

  4. Container Sizing: Fix carousel container width to match viewport width (100vw) without overflow clipping.

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Windows 11 Pro

-Device model: A520MHP

Posted by cryptotestnet ·

Log in to comment and vote

No comments yet

Be the first to share your thoughts.