Placeholder-kuva – täytekuva omilla mitoilla PNG-, SVG- tai data-URI-muodossa
Tee täytekuva prototyyppiin tai sivupohjaan: valitse leveys, korkeus, värit ja teksti. Lataa kuva PNG-, JPG-, WebP- tai SVG-tiedostona tai kopioi se data-URI:na suoraan HTML:ään.
Kuva tehdään selaimessa, joten se toimii ilman verkkoa eikä mitään lähetetä. Laskuri näyttää kuvasuhteen (esimerkiksi 1920 × 1080 on 16:9) ja data-URI:n pituuden. Jos tarvitset oikean valokuvan, saat samoilla mitoilla Lorem Picsum -osoitteen, jossa on siemen, mustavalko ja sumennus.
Milloin data-URI ja milloin kuvatiedosto?
Data-URI upottaa kuvan suoraan koodiin, jolloin erillistä tiedostoa ei tarvita. SVG-täytekuva on muutaman sadan merkin mittainen, joten se sopii hyvin prototyyppeihin ja testeihin. Isot kuvat kannattaa tallentaa tiedostoina, koska upotettu kuva ei välimuistitu erikseen. Lorem Picsumin osoite muotoa picsum.photos/seed/nimi/600/400 antaa aina saman valokuvan.
Ladataan työkalua...
Etkö tiedä mihin ryhtyä seuraavaksi? Selaa kaikki työkalut
Hae työkalua →Placeholder-kuva tekee yksivärisen täytekuvan omilla mitoilla ja tekstillä. Kuva syntyy selaimessa, ja sen saa tiedostona tai data-URI:na.
Valitse koko pikavalinnoista tai liukusäätimillä (1–4 000 px), sitten värit ja teksti.
- Lataus PNG-, JPG-, WebP- ja SVG-muodossa.
- Kopioi SVG data-URI, valmis img-tagi tai PNG-data-URI.
- Tyhjä tekstikenttä näyttää mitat, esimerkiksi 600 × 400. {w} ja {h} korvautuvat mitoilla.
- Lorem Picsum -osoite valokuvalle samoilla mitoilla: siemen, mustavalko ja sumennus 1–10.
Kuvasuhde supistetaan pienimpään muotoon, joten näet heti, sopiiko kuva paikkaansa.
- 1920 × 1080 ja 1280 × 720 ovat 16:9, 1200 × 630 on 40:21, 600 × 400 on 3:2.
- SVG on pieni ja terävä joka koossa; PNG sopii, kun tarvitset tavallisen kuvatiedoston.
Täytekuva tehdään omalla laitteellasi. Lorem Picsumin valokuva haetaan palvelusta vasta, kun käytät osoitetta omalla sivullasi.
- Teksti piirretään järjestelmän fontilla, joten SVG voi näyttää eri laitteilla hieman erilaiselta.
- Lähteet: RFC 2397 (data-URI), MDN (data URLs), Lorem Picsum (picsum.photos), palvelun oma ohje.