fbpx

Optymalizacja zdjęć na stronie www

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.

Rozmiar zdjęcia na stronę internetową

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.

Rozmiar zdjęcia na stronę internetową

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.

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 – 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.

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. 🙂

Dodaj komentarz