PixRinseZrzuty ekranu przedstawiają aplikację w języku angielskim. Nazwy ustawień wstępnych i elementy sterujące są również dostępne w języku aplikacji.
Twój punkt wyjścia
Użyj Responsywny web w PixRinse, a następnie sprawdź te ustawienia w odniesieniu do rzeczywistego miejsca docelowego.
| Szerokości | 320 / 640 / 1280 / 1920 px |
|---|---|
| Wyjście | WebP, jakość 80 |
| Kolor | sRGB |
| Małe źródła | Większe warianty są pomijane |
Jak to zrobić
Zacznij od oryginalnego zasobu
Użyj źródła wystarczająco szerokiego dla największego potrzebnego wariantu. Każda pochodna jest generowana na podstawie oryginału, a nie wielokrotnie zmieniana.
Wybierz Responsywny web
Przejrzyj cztery wbudowane szerokości i nazwy plików. Warianty szersze niż źródło są pomijane, dlatego sprawdź planowaną liczbę wyników.
Wyeksportuj zestaw obrazów
Przejrzyj wszystkie wyniki. Wiele wyjść na źródło wymaga wersji Pro; warstwy bezpłatnej można nadal używać do testowania przepływu pracy o jednym rozmiarze.
Dodaj obrazy do swojej strony
Użyj deskryptorów szerokości w srcset i ustaw sizes tak, aby pasowało do rzeczywistego układu. Uwzględnij dokładną szerokość, wysokość i tekst alternatywny w elemencie obrazu.
<img
src="vase-1280w.webp"
srcset="vase-320w.webp 320w,
vase-640w.webp 640w,
vase-1280w.webp 1280w,
vase-1920w.webp 1920w"
sizes="(max-width: 720px) 100vw, 960px"
width="1280" height="853"
alt="A terracotta vase with an olive branch"
>PLIKI Z TEJ INSTRUKCJI
Co dał ten przykład
Źródło o szerokości 3072 px jest wystarczająco duże dla wszystkich czterech ustawionych szerokości. Każdy plik jest oddzielnym WebP, wygenerowanym bezpośrednio z tego źródła.
- Jakość
- 80
- Profil kolorów
- sRGB
- Dane wyjściowe z jednego źródła
- 4
| Plik | Format | Piksele | Bajty |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35 214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64 108 |
| vase-320w.webp | WebP | 320 × 213 | 4018 |
| vase-640w.webp | WebP | 640 × 427 | 11 594 |
Mierzone na pokazanych przykładowych plikach. Wyniki zależą od oryginałów i ustawień. Zdjęcie wazonu ceramicznego to próbka wygenerowana przez sztuczną inteligencję. Zrzuty ekranu aplikacji i wymiary wyeksportowanych plików są prawdziwe.
Kilka typowych pytań
Co się stanie, jeśli moje źródło ma szerokość tylko 1000 px?
Szablon pomija warianty 1280 i 1920 px. Tylko pliki referencyjne, które zostały faktycznie wygenerowane.
Czy aplikacja generuje HTML?
Ten przepływ pracy tworzy obrazy. Dodaj srcset i sizes do kodu swojej witryny lub systemu treści.
Uruchom przepływ pracy.
Otwórz PixRinse, dodaj kilka obrazów i zacznij od powyższych ustawień.
Pobierz na MacaBezpłatnie: do 10 obrazów na partię i jedno wyjście na źródło. Wiele wyników tego przepływu pracy wymaga wersji Pro. Porównaj wersję bezpłatną i profesjonalną.