---
title: "Ustvarjalnik odzivnih slik – velikosti srcset in HTML"
description: "Eno sliko spremenite v vse širine, ki jih potrebuje srcset, v AVIF, WebP in JPEG, ter dobite element picture za lepljenje. Hitrejše strani na vsakem zaslonu."
url: "https://imagecompressor.si/sl/responsive-image-generator"
lang: "sl"
---

# Ustvarite odzivne slike in HTML srcset

Z enim nalaganjem dobite vsako širino v sodobnih formatih in HTML, ki brskalniku omogoči izbiro prave.

## Kako deluje

1. **Dodajte slike** Povlecite in spustite, prilepite ali izberite datoteke. Naložijo se prek šifrirane povezave.
2. **Izberite kakovost ali ciljno velikost** Uporabite drsnik kakovosti ali povejte natančno, koliko KB ali MB potrebujete.
3. **Prenesite** Shranite posamezne datoteke ali vse naenkrat kot ZIP.

Ena velika slika je za telefon pretežka ali na širokem zaslonu premalo ostra. Odzivne slike to rešijo tako, da brskalniku ponudijo več širin v srcset, zato telefon prenese majhno datoteko, monitor 4K pa veliko. Ročno to pomeni ducatkrat spremeniti velikost in izvoziti isto sliko, nato pa brez tipkarske napake napisati HTML.

Tukaj izberete širine, od 320 do 2560 pik, in formate: AVIF in WebP za brskalnike, ki ju berejo, JPEG pa kot nadomestni format, ki ga berejo vsi. Element picture se pojavi med spreminjanjem nastavitev, z mapo, atributom sizes in nadomestnim besedilom, ki jih vnesete, ter z nastavljeno širino in višino, da stran med nalaganjem ne skače. Prenesite ZIP z vsemi datotekami in HTML.

Širine, večje od vaše slike, se nikoli ne naredijo: povečanje bi dodalo le težo brez podrobnosti. Slika se obdela na našem strežniku in izbriše, ko je ZIP narejen.

## Izbira širin

Izberite širine, ki ustrezajo temu, kako široko je slika prikazana. Glavna slika čez celo širino potrebuje ves razpon; slika v stolpcu, ki ni nikoli širši od 600 pik, potrebuje 320, 640 in 1280 za ostre zaslone. Več širin pomeni, da brskalnik zapravi manj, a je treba naložiti več datotek.

## Atribut sizes

sizes brskalniku pove, kako široka bo slika na strani, še preden ta razporedi stran, da lahko datoteko izbere zgodaj. 100vw pomeni celo širino okna. Za sliko v postavitvi z dvema stolpcema je nekaj takega kot (min-width: 800px) 50vw, 100vw natančnejše in na velikih zaslonih prihrani bajte.

## Zakaj najprej AVIF in WebP

Oba sta pri enaki vidni kakovosti precej manjša od JPEG-a, pogosto za polovico ali več. Brskalniki, ki ju berejo, vzamejo prvi vir, ki ga razumejo; starejši vire preskočijo in uporabijo JPEG oznake img. Vrstni red v HTML gre od najmanjšega do najbolj združljivega.

## Datoteke na vašem spletnem mestu

Vse datoteke naložite v mapo, ki ste jo vnesli, HTML prilepite tja, kamor sodi slika, in napišite pravo nadomestno besedilo, ki jo opiše. Če vaše spletno mesto uporablja ogrodje z lastno komponento za slike, širine in formati iz ZIP-a še vedno veljajo; uporabite jih v njegovih nastavitvah namesto HTML.

Pred objavo stran preizkusite na telefonu in računalniku ter preverite, ali se nalaga prava velikost.

## Pogosta vprašanja

### Ali potrebujem vse tri formate?

Ne. WebP in JPEG pokrijeta vse brskalnike; AVIF doda najmanjše datoteke, kjer ga berejo.

### Zakaj nekatere širine manjkajo?

Širine, večje od vaše slike, se preskočijo, njena lastna širina pa se doda kot največja.

### Ali ohrani prozornost?

Da. AVIF in WebP jo ohranita, nadomestni format pa postane PNG namesto JPEG.

### Ali je leno nalaganje pravo za vsako sliko?

Ne za glavno sliko na vrhu strani: tam odstranite loading="lazy", da se pokaže takoj.

### Ali se moja slika hrani?

Ne. Na našem strežniku se ji spremeni velikost, naloženo pa se zbriše, ko je ZIP vrnjen.

### Ali lahko to uporabim v koraku gradnje?

Da: POST /api/v1/responsive-images sprejme enake nastavitve in vrne enak ZIP.

### Kaj naredita širina in višina v HTML?

Brskalniku povesta obliko slike, še preden se naloži, zato se besedilo okoli nje ne premakne, ko se slika pojavi. To izboljša tudi meritve hitrosti strani, ki jih uporablja Google.

## Sorodna orodja

- [Pretvorite JPG v WebP](https://imagecompressor.si/sl/jpg-to-webp): Dobite manjše datoteke kot JPEG pri enaki vizualni kakovosti.
- [Pretvorite PNG v AVIF](https://imagecompressor.si/sl/png-to-avif): Ohranite prosojnost, znebite se večine velikosti datoteke.
- [Optimizirajte vse slike na spletnem mestu](https://imagecompressor.si/sl/website-optimizer): Vnesite naslov, zemljevid strani ali seznam strani. Vsaka stran se pregleda posebej, vi pa dobite optimizirane datoteke v ZIP-u s seznamom, kaj zamenja kaj.