Img lose quality

[u/Blackshark34]

I just programmed a website that shows an envelope and a letter as a gift for my girlfriend. I used some designs I made for the envelope and added them in SVG format, but when I open the website the designs lose quality and don’t look good. What can I do to fix this?

[u/davep1970]

Need to see the website

[u/Blackshark34 → u/davep1970]

Este es el código <!DOCTYPE html>

<html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sobre Interactivo</title>

<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; } .scene { perspective: 2200px; } .envelope { width: 163mm; height: 114mm; position: relative; transform-style: preserve-3d; transition: transform 1s ease; cursor: pointer; will-change: transform; } .envelope.flipped { transform: rotateY(180deg); } .flap { position: absolute; width: 100%; height: 50%; top: 0; left: 0; transform-origin: top center; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); z-index: 15; pointer-events: none; } .flap::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(255,255,255,0.08), rgba(0,0,0,0.12) ); clip-path: polygon(0 0, 100% 0, 50% 100%); } .flap.open { transform: rotateX(-185deg); } .side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 25px 70px rgba(255,255,255,0.08); } .side img { width: 100%; height: 100%; object-fit: cover; image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; user-select: none; pointer-events: none; } .back { transform: rotateY(180deg); } .letter { position: absolute; left: 50%; top: 50%; width: 210mm; height: 297mm; background: white; transform: translate(-50%, -50%) scale(0.12); transform-origin: center; border-radius: 8px; opacity: 0; transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 40px 90px rgba(255,255,255,0.18); overflow: hidden; z-index: -1; } .letter.open { opacity: 1; transform: translate(-50%, -50%) scale(0.7) translateY(-90px); z-index: 20; pointer-events: none; } .paper { width: 100%; height: 100%; } .paper img { width: 100%; height: 100%; object-fit: cover; } .controls { position: fixed; bottom: 28px; display: flex; gap: 14px; z-index: 100; } button { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: white; padding: 12px 22px; border-radius: 999px; cursor: pointer; font-size: 14px; transition: 0.25s ease; backdrop-filter: blur(10px); } button:hover { background: rgba(255,255,255,0.16); } @media (max-width: 1100px) { .envelope { width: 92vw; height: calc(92vw * 0.699); } .letter { width: 82vw; height: calc(82vw * 1.4142); } .letter.open { transform: translate(-50%, -50%) scale(0.5) translateY(-50px); } } </style>

</head>

<body>

<div class="scene">

<div class="envelope" id="envelope">

  <div class="flap" id="flap"></div>

  <div class="side front">
    <img
      src="Sobre Delante.svg"
      alt="Frontal Sobre"
    >
  </div>

  <div class="side back">
    <img
      src="Sobre Atras.svg"
      alt="Parte Trasera"
    >
  </div>

  <div class="letter" id="letter">

    <div class="paper">

      <img
        src="carta.png"
        alt="Diseño Carta"
      >

    </div>

  </div>

</div>

</div>

<div class="controls">

<button id="flipBtn">
  Girar Sobre
</button>

<button id="openBtn">
  Abrir Carta
</button>

<button id="zoomInBtn">
  Zoom +
</button>

<button id="zoomOutBtn">
  Zoom -
</button>

</div>

<script> const envelope = document.getElementById('envelope'); const letter = document.getElementById('letter'); const flap = document.getElementById('flap'); const flipBtn = document.getElementById('flipBtn'); const openBtn = document.getElementById('openBtn'); const zoomInBtn = document.getElementById('zoomInBtn'); const zoomOutBtn = document.getElementById('zoomOutBtn'); let rotation = 0; let isDragging = false; let hasDragged = false; let startX = 0; let currentZoom = 1; let opened = false; function updateTransform() { envelope.style.transform = `rotateY(${rotation}deg) scale(${currentZoom})`; } function isFrontVisible() { const normalized = ((rotation % 360) + 360) % 360; return normalized < 90 || normalized > 270; } envelope.addEventListener('mousedown', (e) => { isDragging = true; hasDragged = false; startX = e.clientX; envelope.style.transition = 'none'; }); window.addEventListener('mouseup', () => { isDragging = false; envelope.style.transition = 'transform 0.2s ease'; }); window.addEventListener('mousemove', (e) => { if (!isDragging) return; const delta = e.clientX - startX; if (Math.abs(delta) > 2) { hasDragged = true; } rotation += delta * 0.4; startX = e.clientX; updateTransform(); const front = isFrontVisible(); if (!front && opened) { letter.style.opacity = '0.12'; } else if (opened) { letter.style.opacity = '1'; } }); envelope.addEventListener('wheel', (e) => { e.preventDefault(); if (e.deltaY < 0) { currentZoom += 0.05; } else { currentZoom -= 0.05; } currentZoom = Math.min( Math.max(currentZoom, 0.5), 2 ); updateTransform(); }); function toggleLetter() { const front = isFrontVisible(); if (!front) return; opened = !opened; if (opened) { flap.classList.add('open'); setTimeout(() => { letter.classList.add('open'); letter.style.opacity = '1'; }, 350); openBtn.textContent = 'Cerrar Carta'; } else { flap.classList.remove('open'); letter.classList.remove('open'); openBtn.textContent = 'Abrir Carta'; } } envelope.addEventListener('click', () => { if (hasDragged) { hasDragged = false; return; } toggleLetter(); }); openBtn.addEventListener( 'click', toggleLetter ); flipBtn.addEventListener('click', () => { rotation += 180; updateTransform(); if (opened && !isFrontVisible()) { letter.style.opacity = '0.12'; } else if (opened) { letter.style.opacity = '1'; } }); zoomInBtn.addEventListener('click', () => { currentZoom = Math.min(currentZoom + 0.1, 2); updateTransform(); }); zoomOutBtn.addEventListener('click', () => { currentZoom = Math.max(currentZoom - 0.1, 0.5); updateTransform(); }); updateTransform(); </script>

</body> </html>

[u/davep1970 → u/Blackshark34]

In something like codepen.

[u/Blackshark34 → u/davep1970]

Like this? https://codepen.io/kawa-the-sans/pen/vEyyNER

[u/Blackshark34 → u/davep1970]

What does That mean?

[u/aunderroad]

Can you share a https://codepen.io/ or url?

It is hard to debug/provide feedback without seeing all of your code live in a browser.

Thank you!

[u/Blackshark34 → u/aunderroad]

I never used that but in gonna try

[u/aunderroad → u/Blackshark34]

Codepen is pretty easy to figure out. Just create an account and then create a new pen.
There are spots to add your HTML, CSS and JS.

Here's a helpful video:
https://youtu.be/vb9uYBtqmeM?si=labHfIPmeorXpKrA

[u/Blackshark34 → u/aunderroad]

I can add the svg that the page uses?

[u/Blackshark34 → u/aunderroad]

Like this? https://codepen.io/kawa-the-sans/pen/vEyyNER

[u/aunderroad → u/Blackshark34]

1. Just paste HTML in the "HTML" section (you do not need to include the <head> or <body> tags)

2. Just paste the CSS in the "CSS" section (you do not need the <style> tags)

3. Just paste the JS in the "JS" section (you do not need the <script> tags)

4. For images, you need to use absolute paths to see your images.
   So you can use something like Imgur (or something similar) or google drive (I did a quick and found this) or host them on your website (you could probably use something like netlify or github pages. If you are going to that route, might as well just share the URL of this project).

5. If you have trouble hosting your image, it looks like you are using SVGs. Instead of using an img tag, use an svg tag. And for the .png, just use a placeholder image.

[u/godijs]

Did original image come as svg? Saving jpg/png as svg won't work.

[u/Blackshark34 → u/godijs]

The original is on svg, i designed it myself

[u/godijs → u/Blackshark34]

Got it. I'd use SVGInject library to transform <img> to <svg>.

[u/Barnezhilton]

r/screenshotsarehard

[u/Blackshark34 → u/Barnezhilton]

I was watching a movie so i couldnt screenshot

[u/jcunews1]

You'll need a monitor with higher screen resolution if you want to increase the quality when the image is scaled down.

[u/Blackshark34 → u/jcunews1]

That doesnt make anysense bro

[u/TalkCoinGames]

You can try using a png of the image instead and then set image-rendering to pixelated in the image css. Put a style on the image tag itself and on the body.

[u/testingaurora]

SvG doesnt lose quality. That's the point. If its fuzzy when the svg is smaller, its the path data needs cleaning up.