Generator Placeholder - Obrazek Zastępczy SVG i Data URI

Generator placeholder: zastępczy obrazek SVG w dowolnym rozmiarze

Makieta strony bez zdjęć wygląda jak ser szwajcarski, a podpinanie zewnętrznych serwisów z obrazkami zastępczymi to kolejna zależność, która kiedyś przestanie działać. Ten generator tworzy obrazek zastępczy jako czysty kod SVG: szare pole 600 × 400 z napisem „600 × 400” to plik o wadze 287 B. Dostajesz kod do zapisania jako plik, gotowy znacznik <img> z data URI i regułę tła CSS, a do tego proporcje obrazka i kontrast napisu.

Placeholder w pigułce

287 B

waga placeholdera 600 × 400 z napisem

1200 × 630

zalecany rozmiar obrazka do udostępnień

gotowych rozmiarów, w tym 5 reklamowych IAB

4,5:1

próg kontrastu napisu według WCAG

Jak zrobić placeholder obrazka - krok po kroku

Szerokość i wysokość - w pikselach, liczby całkowite od 1 do 10 000. Jedna wartość daje kwadrat.
Gotowy rozmiar - zamiast wpisywania: obrazek do udostępniania 1200 × 630, Full HD, HD, kwadrat 1080 albo jeden z rozmiarów reklamowych IAB. Ma pierwszeństwo przed polami wymiarów.
Kolor tła i napisu - szesnastkowo, np. #cbd5e1 albo skrótem ccc. Bez koloru napisu generator wybierze czarny albo biały, zależnie od tego, który ma większy kontrast z tłem.
Napis i jego wielkość - puste pole wstawi wymiary, np. „300 × 250”. Wielkość dobiera się sama, tak by napis zajął najwyżej 80 % szerokości i 25 % wysokości.
Wzór - gładkie tło, dwie przekątne (klasyczny znak „tu będzie obrazek” z makiet) albo przerywana ramka.
Tekst alternatywny - trafia do atrybutu alt w znaczniku img. Puste pole zostawia alt="" dla obrazka dekoracyjnego.
Odczytaj wynik - podgląd, proporcje, waga pliku, kontrast i trzy bloki kodu do skopiowania.

Wszystko o obrazkach zastępczych

Placeholder rezerwuje miejsce w układzie strony, zanim pojawi się właściwe zdjęcie. Ważne są w nim trzy rzeczy: dokładne wymiary, proporcje i to, żeby nikt nie wziął go za gotową grafikę. Dlatego na środku zwykle stoją wymiary, a tło jest neutralne. Wymiary wpisane w atrybuty width i height znacznika img pozwalają przeglądarce znać proporcje obrazka, zanim go wczyta.

SVG ma tu przewagę nad PNG czy JPG. To tekst, więc da się go wkleić prosto do HTML albo CSS jako data URI, bez osobnego pliku i bez zapytania do serwera. Według RFC 2397 taki adres ma postać data:[typ][;base64],dane, a znaki spoza bezpiecznego zestawu zapisuje się kodami %xx. Generator koduje cały SVG w ten sposób, więc polskie litery i znak × w napisie przechodzą bez kłopotu. Waga zależy prawie wyłącznie od długości napisu i wybranego wzoru, a nie od wymiarów: pole 10 000 × 10 000 waży niewiele więcej niż 100 × 100.

Proporcje generator podaje w postaci skróconej przez największy wspólny dzielnik, np. 1920 × 1080 to 16:9, a 1200 × 630 to 40:21, czyli około 1,9:1. Dla nietypowych wymiarów, jak 728 × 90 (364:45), pokazuje też przybliżenie dziesiętne, bo „8,09:1” mówi więcej niż sam ułamek.

Tabela referencyjna: gotowe rozmiary w generatorze

Rozmiary reklamowe pochodzą ze specyfikacji stałych formatów IAB Tech Lab (New Ad Portfolio), obrazek do udostępniania z dokumentacji Meta dla og:image. Kolumna „wymiary w 2x” pokazuje rozmiar w podwójnej gęstości, w której IAB liczy piksele przy przydziale limitu wagi pliku, np. 728 · 90 · 4 = 262 080 px.

Rozmiar	Piksele	Proporcje	Wymiary w 2x	Gdzie
Medium Rectangle	300 × 250	6:5	600 × 500	reklama w treści i w bocznej kolumnie
Leaderboard	728 × 90	364:45	1456 × 180	pasek nad lub pod nagłówkiem
Skyscraper	160 × 600	4:15	320 × 1200	wąska kolumna boczna
Billboard	970 × 250	97:25	1940 × 500	duży pas na całą szerokość
Smartphone Banner	320 × 50	32:5	640 × 100	pasek na telefonie
Obrazek do udostępnień (og:image)	1200 × 630	40:21	nie dotyczy	podgląd linku w mediach społecznościowych
Full HD	1920 × 1080	16:9	nie dotyczy	tło sekcji, kadr wideo
HD	1280 × 720	16:9	nie dotyczy	miniatura filmu, grafika wpisu
Kwadrat	1080 × 1080	1:1	nie dotyczy	karta produktu, avatar, post kwadratowy

Pięć faktów o rozmiarach i data URI

Adres data URI bez podanego typu jest według RFC 2397 traktowany jako text/plain;charset=US-ASCII. Dlatego w wygenerowanym kodzie stoi wprost image/svg+xml;charset=utf-8.

IAB podaje dla reklamy 300 × 250 limit 150 kB przy pierwszym wczytaniu i 300 kB łącznie z doładowaniem, liczony po kompresji gzip.

Meta przyjmuje obrazki do udostępnień od 200 × 200 px, ale dopiero od 1200 × 630 dobrze wyglądają na ekranach o wysokiej gęstości. Plik nie może przekraczać 8 MB.

Szary #767676 na białym tle daje kontrast 4,54:1, czyli tuż powyżej progu 4,5:1. To jeden z najjaśniejszych szarych, które jeszcze go spełniają.

Data URI jest dłuższy od pliku: placeholder 287 B zajmuje w nim 502 znaki, bo znaki < > " # i spacje oraz każdy bajt spoza ASCII zamieniają się w trzy znaki, np. × to %C3%97.

Dla kogo jest ten generator?

Frontendowiec składający szablon, zanim grafik odda zdjęcia. Wkleja znacznik img z data URI i ma działający układ bez dodatkowych plików.

Projektant makiet, który potrzebuje pól z przekątnymi w dokładnych wymiarach, żeby pokazać klientowi, gdzie wejdą zdjęcia.

Wydawca strony z reklamami, rezerwujący miejsce na formaty IAB, zanim podepnie system reklamowy.

Autor testów i dokumentacji, który chce obrazków o przewidywalnym rozmiarze, bez zależności od zewnętrznego serwisu.

Pytania o obrazki zastępcze

Jak zapisać placeholder jako plik?

Skopiuj blok „Kod SVG”, wklej do pustego pliku tekstowego i zapisz z rozszerzeniem .svg. Plik otworzy każda przeglądarka i większość programów graficznych.

Czy placeholder SVG nada się jako og:image?

Do makiety tak. Na docelowy obrazek do udostępnień zalecamy JPG albo PNG w rozmiarze 1200 × 630.

Dlaczego napis ma inny rozmiar, niż się spodziewałem?

Przy pustym polu wielkość liczona jest z szacunku 0,6 szerokości litery na znak, żeby napis nie wyszedł poza obrazek. Wpisz własną wielkość, a generator ostrzeże, gdy napis prawdopodobnie się nie zmieści.

Czy obrazek z data URI spowalnia stronę?

Przy kilkuset bajtach nie. Data URI nie jest jednak zapamiętywany przez przeglądarkę osobno, więc ten sam placeholder wstawiony wiele razy zwiększa wagę HTML za każdym razem. Przy kilkunastu powtórzeniach lepszy jest jeden plik .svg.

Co wpisać w alt dla placeholdera?

Na makiecie pusty alt jest w porządku. Gdy w to miejsce wejdzie zdjęcie niosące treść, alt musi opisywać, co na nim jest, np. „Kubek z logo, widok z boku”.

Powiązane narzędzia

Kalkulator BCS Psa

Ocena kondycji psa w skali 1-9 i 1-5, procent nadwagi i masa idealna według wytycznych AAHA - Zobacz kalkulator

Generator Keyframes CSS

Animacja CSS z podglądem, gotowym blokiem @keyframes, klasą Tailwind i ostrzeżeniami WCAG - Zobacz generator

Generator Lorem Ipsum

Tekst zastępczy do tej samej makiety, w akapitach albo słowach - Zobacz generator

Generator Box Shadow

Cień dla karty, w której stoi obrazek - Zobacz generator

Generator Border Radius

Zaokrąglone rogi obrazka i karty - Zobacz generator

Generator Gradient CSS

Tło z przejściem kolorów zamiast jednolitego placeholdera - Zobacz generator

Generator Text Shadow

Cień i obrys napisu na zdjęciu z kontrolą kontrastu - Zobacz generator