Zdjęcie prosto z telefonu ma zwykle około 4000 px szerokości i waży 3–8 MB. Na stronie wystarcza plik dziesięć razy lżejszy. Za duże zdjęcia to najczęstsza przyczyna wolnej strony, a poprawienie ich zajmuje kilka minut.
- Zdjęcia w oryginale (z telefonu, aparatu lub od fotografa)
- Przeglądarka internetowa: kompresja działa online, nic nie instalujesz
Przed wgraniem sprawdź
- Szerokość pasuje do miejsca na stronie (tabela niżej). Większe zdjęcie nie wygląda lepiej, tylko wolniej się ładuje.
- Waga: zdjęcie w treści do 200 KB, duże zdjęcie na całą szerokość do 300–400 KB.
- Format: zdjęcia jako WebP lub JPG, grafiki z przezroczystym tłem jako PNG, logo najlepiej jako SVG lub PNG.
- Proporcje takie jak zdjęcie, które zastępujesz (np. 3:2 lub 16:9), żeby układ strony się nie przesunął.
- Nazwa pliku opisowa, małymi literami, bez spacji i polskich znaków, np. gabinet-fizjoterapii-krakow.webp.
- Zdjęcie jest ostre, jasne i nieprzekrzywione. Kadruj je przed wgraniem, nie na stronie.
- Masz prawo do zdjęcia: własne, od fotografa z licencją albo z banku zdjęć z licencją komercyjną.
Jakie wymiary zdjęć na stronę www
| Gdzie jest zdjęcie | Szerokość | Proporcje | Waga do |
|---|---|---|---|
| Baner lub tło sekcji na całą szerokość | 1920–2000 px | 16:9 lub szersze | 400 KB |
| Zdjęcie w treści, obok tekstu | 1000–1200 px | 3:2 lub 4:3 | 200 KB |
| Wąska kolumna, zdjęcie osoby z zespołu | 600–800 px | 1:1 lub 4:5 | 120 KB |
| Obraz wyróżniający wpisu na blogu | 1200 px | 16:9 (1200 × 675 px) | 200 KB |
| Zdjęcie do galerii realizacji | 1600 px na dłuższym boku | jednakowe w całej galerii | 250 KB |
| Zdjęcie produktu w sklepie | 1000–1200 px | 1:1 (kwadrat) | 150 KB |
| Logo | 2 × szerokość na stronie, np. 400 px | jak logo | 50 KB |
WebP, JPG czy PNG
- WebP: nowoczesny format. Przy tej samej jakości plik jest zwykle o 25–35% lżejszy niż JPG. WordPress go obsługuje, a aktualne przeglądarki go wyświetlają. Najlepszy wybór dla zdjęć.
- JPG: bezpieczny standard dla zdjęć. Jakość 75–82% wystarcza, różnicy nie widać.
- PNG: tylko grafiki z przezroczystym tłem, zrzuty ekranu i rysunki z tekstem. Zdjęcie zapisane jako PNG waży kilka razy więcej niż JPG.
- HEIC (format iPhone’a): nie każdy serwer go przyjmie. Zamień zdjęcie na JPG przed wgraniem. Możesz też w ustawieniach aparatu iPhone’a, w części o formatach, wybrać opcję najbardziej zgodną: nowe zdjęcia będą zapisywać się jako JPG.
Jak zmniejszyć zdjęcie za darmo
Otwórz Squoosh
Wejdź na squoosh.app. To darmowe narzędzie Google, które działa w przeglądarce. Zdjęcie nie jest nigdzie wysyłane.
Wrzuć zdjęcie
Przeciągnij plik na stronę albo kliknij środek strony i wskaż zdjęcie na komputerze.
Zmniejsz szerokość
W panelu po prawej włącz opcję Resize (zmiana rozmiaru) i wpisz szerokość z tabeli, np. 2000. Wysokość przeliczy się sama.
Wybierz format i jakość
W tym samym panelu wybierz format WebP i ustaw Quality (jakość) na około 75. Na dole panelu widać nową wagę pliku.
Porównaj obie połówki podglądu, przesuwając pionową linię. Jeśli różnicy nie widać, jakość jest dobra.
Pobierz gotowy plik
Kliknij przycisk pobierania w prawym dolnym rogu. Zmień nazwę pliku na opisową i wgraj go na stronę.
Dużo zdjęć naraz? tinypng.com kompresuje do 20 plików jednocześnie, ale nie zmniejsza wymiarów. Najpierw zmniejsz szerokość, potem kompresuj.
Co WordPress zrobi sam
- Zdjęcia szersze niż 2560 px WordPress sam zmniejsza, ale oryginał i tak zostaje na serwerze i zajmuje miejsce.
- Tworzy mniejsze kopie zdjęcia i podaje telefonom lżejszą wersję.
- Włącza leniwe wczytywanie: zdjęcia niżej na stronie ładują się dopiero przy przewijaniu.
- Nie zmniejszy wagi pliku tak dobrze jak kompresja przed wgraniem. Jeśli myślisz o wtyczce do automatycznej kompresji, przeczytaj najpierw zasady instalowania wtyczek.
WordPress nie chce wgrać pliku, bo jest za duży
Serwer ma limit wielkości pliku. Widać go pod przyciskiem Wybierz pliki, w zdaniu Maksymalna wielkość dodawanych plików. Zmniejsz zdjęcie według kroków wyżej: po kompresji prawie zawsze mieści się w limicie.
Po kompresji zdjęcie jest rozmyte
Jakość jest za niska albo szerokość za mała do miejsca na stronie. Ustaw jakość 80 i sprawdź w tabeli, jakiej szerokości potrzeba. W Elementorze sprawdź też pole Rozdzielczość obrazka przy zdjęciu.
Zdjęcie po wgraniu jest obrócone bokiem
Telefon zapisał obrót tylko w danych pliku. Obróć zdjęcie na komputerze przed wgraniem albo w Media → Biblioteka: kliknij zdjęcie, wybierz Edytuj obrazek, kliknij Obracanie obrazka, wybierz kierunek obrotu i kliknij Zapisz zmiany.
Strona dalej ładuje się wolno
Duże zdjęcia mogą być na stronie z wcześniej. Zacznij od podmiany największego zdjęcia na stronie głównej, zwykle banera na górze. Inne przyczyny opisuje poradnik o wolnej stronie.
Nic z tego nie pomogło? Opisz problem w formularzu, odpowiemy w dni robocze.