Wielkość obrazów na stronie www ma ogromny wpływ na prędkość ładowania strony, a co za tym idzie również na jej pozycjonowanie (SEO). Im większy, cięższy obrazek, tym dłużej będzie się pobierał i tym samym spowalniał stronę. A co dopiero jeśli tych zdjęć na naszej stronie jest sporo (np. mamy bloga)? Zdecydowanie warto wtedy zainteresować się tematem ich optymalizacji.
Jak zrobić aby obrazki wrzucane na stronę były lżejsze i nie obciążały strony? Zapraszam po kilka wskazówek o tym jak je zoptymalizować 🙂
Rozmiar zdjęcia wrzucanego na stronę www
Jaki rozmiar powinno mieć zdjęcie, które wrzucamy na stronę www? Ekran HD ma rozdzielczość 1920×1080px i jeśli chcemy aby na pełnym ekranie nasze zdjęcie wyświetlało się idealnie, to jego szerokość powinna wynieść 1920px. To moim zdaniem jest maksymalna szerokość zdjęć jakie powinniśmy wrzucać na stronę.
W większości przypadków nie potrzebujemy jednak idealnej rozdzielczości, np. gdy zdjęcie jest jedynie obrazem w tle, w dodatku przykrytym przyciemniającą warstwą. Dlatego też 1920px jest wartością maksymalną, spokojnie możemy wrzucić mniejsze zdjęcie.
Wskazówki te, odnoszą się do zdjęć, które będą rozciągnięte na całą szerokość ekranu. A co ze zdjęciami, które znajdują się gdzieś obok tekstu i zajmują jedynie małą część szerokości ekranu? Tutaj spokojnie możemy wrzucać obrazy o szerokości np. 1000px. Jeśli potrafimy sprawdzić jaką szerokość maksymalnie będzie miał nasz obrazek (np. sprawdzimy szerokość kontenera czy kolumny, w której on się znajduję) to jesteśmy w jeszcze lepszej sytuacji 🙂 Wtedy zmniejszamy obrazek właśnie do takiej maksymalnej szerokości.
Jak zmniejszyć zdjęcie na stronę
OK, wiemy już jakie wymiary powinien mieć nasz obraz. Tylko jak zrobić, żeby faktycznie takie wymiary miał?
Do zmniejszenia obrazka będzie nam potrzebny jakikolwiek program do edycji zdjęć. Ja korzystam np. z programu PhotoScape X.
Przykład zmniejszania rozmiaru zdjęcia w PhotoScape X
Otwieram zdjęcie w programie. Wchodzę w tryb edycji (Editor) i wybieram „Edit” > „Resize” po prawej stronie.
W okienku wpisuję nowe wymiary zdjęcia, np. Width 1000 px (czyli szerokość na 1000px – wysokość ustawi się automatycznie, aby zachować proporcje). Klikamy „Apply” i zapisujemy zdjęcie.
W tym programie możecie też masowo zmniejszyć większą ilość zdjęć.
Zmniejszanie obrazka w przeglądarce
Jeśli nie macie żadnego programu do edycji zdjęć, możecie skorzystać z jakiekolwiek narzędzia przeglądarkowego. Np. na stronie picresize.com wystarczy wrzucić swój obrazek, wpisać nowe wymiary i ściągnąć zmniejszone zdjęcie.
Typ zdjęcia na stronę www
Typ zdjęcia (czyli jego rozszerzenie) również ma wpływ na jego wagę. Pliki .png będą miały więcej szczegółów i kolorów, ale przez to też będą ważyły więcej. Takiego typu najlepiej używać do logo, ilustracji i innych obrazków z przeźroczystym tłem lub tych, które chcecie aby były super ostre.
Do pozostałych zdjęć najlepiej używać plików z rozszerzeniem .jpg, które będą trochę gorszej jakości, ale dzięki temu będą zajmowały dużo mniej miejsca.
Zdjęcia możecie przekonwertować na inny typ w programie do edycji lub w narzędziu internetowym, np. png2jpg.com.
Czytaj dalej o tym jak zmienić obrazki na format nowej generacji WebP.
Kompresja obrazków na stronę www
Hura, udało nam się zmniejszyć obrazek! Ale to nie wszystko… 🙂 Teraz trzeba go jeszcze skompresować, czyli zmniejszyć jego wagę.
Zdjęcia z aparatu czy pobrane z banku zdjęć mogą mieć kilka, a nawet kilkanaście MB. To zdecydowanie za dużo na jedną stronę internetową. 🙂
Aby je skompresować możecie użyć programu (np. ImageOptim) lub skompresować je za pomocą narzędzia przeglądarkowego. W drugmi przypadku polecam stronę tinypng.com lub websiteplanet.com/pl/webtools/imagecompressor/– wrzucamy tutaj nasze zdjęcie, kompresujmy i ściągamy dużo lżejsze zdjęcie, które bez bólu możemy wrzucić na naszą stronę.
Niektóre narzędzia pozwalają na kompresję bezstratną lub ze stratą jakości. W większości wypadków ta strata nie będzie zauważalna, możecie tutaj poeksperymentować. Pamiętajcie, że zdjęcia na stronie www nie muszą mieć idealnej rozdzielczości, jak np. zdjęcia do druku, dlatego możemy się tutaj trochę pobawić z ich optymalizacją.
Zdjęcie wrzucane na stronę www powinny mieć maksymalnie 1MB, lepiej kilkaset KB, a mniejsze obrazki poniżej 100KB.
Zdjęcia w formacie nowej generacji WebP
Jeśli jeszcze z niego nie korzystasz, to na pewno podczas testowania strony w PageSpeed Insights otrzymujesz komunikat, aby wyświetlać obrazy w formatach nowej generacji np. WebP. Format ten to lepsza jakość obrazu przy niskiej wadze pliku. Został stworzony specjalnie z myślą o stronach internetowych.
Teraz możesz łatwo przekonwertować swoje obrazki do tego formatu dzięki wtyczce Converter for Media – Optimize images | Convert WebP & AVIF.
Wystarczy zainstalować wtyczkę w WordPressie, przejść do jej ustawień w menu Ustawienia > Converter for Media, a następnie zjechać na dół do zakładki „Zbiorcza optymalizacja obrazków”. Na samym dole klikamy przycisk „Uruchom optymalizację zbiorczą”. I po chwili… gotowe 🙂 Twoje obrazki będą od teraz wyświetlały się w formacie nowej generacji, dzięki czemu będą lżejsze, strona będzie się szybciej ładować, a PageInsight już nie będzie się o to czepiać 🙂
W bibliotece mediów możesz nawet sprawdzić o ile każdy obraz został zmniejszony.
Mam nadzieję, że te wskazówki się Wam przydadzą i od teraz będziecie optymalizować swoje zdjęcia i dzięki tej kompresji Wasza strona trochę przyspieszy. 🙂
