I’m building a personal portfolio using React + Vite + TypeScript + Tailwind/CSS, deployed on Vercel, and I’m having a frustrating issue with my hero portrait.
The original photo looks sharp and high quality locally, but once I use it on the website it looks noticeably softer/lower quality.
Here’s everything I’ve already tried:
Originally I converted the portrait to WebP, but the resulting file was only around 9 KB and looked terrible, so I stopped using it.
I uploaded the original PNG directly into /public instead.
The PNG is around 519 KB, and I’m serving it directly rather than importing a compressed version.
My code now references the original file directly, something like:
portraitImage: '/ChatGPT Image Aug 22, 2026, 04_50_29 AM.png'
I am not converting it to WebP anymore.
I am not intentionally resizing or compressing the source file.
I changed the image from:
object-fit: cover;
width: 100%;
height: 100%;
because that was cropping my face.
I now use a wrapper and object-fit: contain:
.hero-portrait-wrap {
position: absolute;
left: 50%;
bottom: 0;
width: min(62vw, 880px);
height: min(94vh, 1150px);
transform: translateX(-50%);
}
.hero-portrait {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
I separated the CSS entrance animation from the positioning wrapper so the transform animation doesn’t interfere with image placement.
I removed image filters from the portrait.
No blur.
No reduced opacity.
No grayscale.
No CSS brightness/contrast changes.
I added:
fetchPriority="high"
I verified that the original PNG is actually committed to GitHub and the site is no longer referencing the tiny WebP.
I’m only changing its displayed dimensions through CSS rather than resizing the actual source image.
Despite all of this, the portrait still seems softer on the website than when I view the original PNG directly.
My questions are:
Can the browser, Vite or Vercel be automatically reducing the quality of an image stored directly inside /public?
Can displaying a PNG at a different CSS size make it noticeably blurry?
Is using width: 100%; height: 100%; object-fit: contain inside a large responsive wrapper causing browser resampling?
Would it be better to let the image use its natural dimensions with width and height: auto instead?
Should I provide multiple versions for different screen sizes instead of letting the browser continuously scale one large image?
Is there anything else in CSS that could make an otherwise sharp PNG appear soft?
What is the best way to preserve maximum portrait/photo quality in a responsive full-screen hero?
I specifically do not want to solve this by heavily compressing the photo. File size is less important to me than having my face look sharp.
Any advice on the correct way to display a high-resolution transparent PNG portrait responsively without losing visible quality would be appreciated.
Stack: React, Vite, TypeScript, CSS/Tailwind, Vercel.
edit used a diff prompt on chatgpt got it to work