logo
GeekFormat

Sprite-generator

Klik om foto's te uploaden

Ondersteuningsformaat: {formaten}

050

Upload afbeelding om sprite voorbeeld te bekijken

Gerelateerde aanbevelingen

QR-code scanner

Afbeelding resizen

Afbeelding draaien & spiegelen

Afbeelding naar ASCII

Base64 naar Afbeelding

Slug Generator

Functies

  • Eén-klik samenvoegen: upload meerdere iconen en genereer CSS Sprites om HTTP-requests te verminderen
  • Automatische CSS-code: precieze background-position waarden, klaar om te kopiëren en plakken
  • Flexibele layout: horizontaal, verticaal of grid met sleepbare icoonvolgorde
  • Aanpasbare afstand: regel de spacing tussen iconen om overlap te voorkomen
  • Realtime preview: bekijk het samenvoegresultaat en de code direct, lossless en project-klaar

Veelgestelde vragen

Wat zijn CSS Sprites en waarom ze gebruiken?

CSS Sprites combineren meerdere kleine iconen tot één grote afbeelding. Dit vermindert het aantal HTTP-requests aanzienlijk, verlaagt de serverbelasting en versnelt de paginalaadtijd.

Hoe genereer ik een sprite sheet met CSS-code?

Upload je icoonbestanden (PNG, JPG) en de tool voegt ze automatisch samen. Sleep om de volgorde aan te passen, kies horizontale, verticale of grid-layout. De CSS-code met precieze background-position waarden wordt automatisch gegenereerd.

Kan ik de afstand tussen iconen aanpassen?

Ja. Stel de horizontale en verticale afstand in om randoverlap of weergaveproblemen in CSS-positionering te voorkomen.

Welke layout-opties zijn er?

Horizontaal, verticaal en grid (matrix). Kies de indeling die het beste bij je project past om de afbeeldingsruimte zo efficiënt mogelijk te benutten.

Wordt de beeldkwaliteit behouden?

Ja. Verwerking gebeurt lossless in je browser. De gegenereerde sprite sheet behoudt de scherpte en details van de originele afbeeldingen.