Fotografie i grafiki pełnoekranowe
Od dobrych kilkunastu miesięcy można obserwować rosnące zainteresowanie pełnowymiarowymi fotografiami umieszczanymi na stronach internetowych w formie tła dla nagłówków lub całych sekcji. Odpowiedni dobór fotografii w połączeniu z taką formą ich prezentacji pozwala łatwo zbudować odpowiednią atmosferę i bardzo dobrze wygląda na dużych ekranach.
Wykorzystanie obrazów rozciągniętych na całą szerokość przeglądarki pozwala również na szybkie zaprojektowanie i wdrożenie stron typu landing page, gdzie niewielka ilość tekstu nie pozwala na kreację skomplikowanych layoutów zachęcających użytkowników do podejmowania konkretnych działań.
Jak skrócić czas ładowania strony z dużymi zdjęciami?
Duże fotografie mają jednak to do siebie, że oprócz swoich pokaźnych rozmiarów na ekranie zajmują również odpowiednio dużo miejsca na dysku. O ile w dobie hostingów chmurowych oferujących dużą powierzchnię dyskową oraz nielimitowany transfer (jak np. dhosting, z którego korzystam i szczerze polecam) magazynowanie zdjęć nie powinno być problemem, o tyle prędkość ładowania strony może mieć wpływ na czytelność oraz ogólną użyteczność strony.
Jesteśmy wygodni. Do naszej dyspozycji trafiają coraz szybsze urządzenia i coraz wyraźniejsze ekrany. Chcemy podziwiać ostre, inspirujące i kolorowe zdjęcia – ale nie chcemy czekać kilka sekund na załadowanie wszystkich danych. Chcemy konsumować zawartość od razu po kliknięciu w link.
Czy możemy zatem nakarmić wilka, nie zabijając jednocześnie owcy?
Optymalizacja fotografii opublikowanych na blogu pozwala zaoszczędzić sporo miejsca na serwerze. Zoptymalizowane zdjęcia na stronie docenią również posiadacze urządzeń mobilnych. Pamiętaj, że nie każdy dysponuje pakietem danych pozwalającym na pobieranie gigabajtów i nie zawsze znajduje się w pobliżu szybkiej sieci LTE.
Narzędzia do optymalizacji i kompresji obrazów
Przede wszystkim możemy wziąć sprawy w swoje ręce i nie karmić wilka wypasionymi owcami, ale serwować mu tylko tyle, ile potrzebuje.
1. Zmniejsz obrazy
Co prawda telewizory 8k są już w sprzedaży, ale przyznaj szczerze – jak wiele osób będzie oglądać zdjęcie twojego kota w rozdzielczości kilkunastu milionów pikseli? Zamiast umieszczać na blogu zdjęcia prosto z aparatu fotograficznego lub smartfona, zdecydowanie lepiej będzie je najpierw zmniejszyć. W większości przypadków rozdzielczość 1920 x 1080 pikseli zadowoli nawet najbardziej wybrednych wielbicieli futrzaków.
Na marginesie warto zauważyć, że do wydrukowania fotografii w wysokiej jakości w rozmiarze kartki formatu A4 wystarczy zdjęcie o rozdzielczości nie przekraczającej 9 milionów pikseli. Tym samym warto zastanowić się, czy magazynowanie zdjęć w bardzo wysokiej rozdzielczości ma jakikolwiek sens.
2. Skorzystaj z mocniejszej kompresji JPEG
Możesz zapisać zdjęcie w niższej jakości, jeżeli nie publikujesz na swojej stronie fotografii, których głównym przeznaczeniem jest wygranie Pultizera. Poważnie, zmniejszenie jakości zdjęcia z 90% do 60% przy jego zapisie do formatu JPEG pozwala zmniejszyć rozmiar nawet o połowę. Zdecydowanie lepiej obejrzeć galerię nieco bardziej skompresowanych fotografii niż nie zobaczyć ich wcale. Nie zapominaj, że wiele osób zrezygnuje z oczekiwania na załadowanie strony, jeżeli będą musiały czekać dłużej niż 3 – 5 sekund.
3. Podziel galerię na strony lub skorzystaj z rozwiązań opartych o AJAX
Jeżeli na jednej stronie publikujesz kilkanaście fotografii, rozważ ich rozdzielenie na kilka podstron. Alternatywą może okazać się moduł galerii lub suwak (slider) oparty o technologię AJAX i skrypt lazy load, co umożliwi doładowanie kolejnych zdjęć bez konieczności przeładowania całej strony. Dzięki temu nie będziesz skazywał odwiedzających na długi czas oczekiwania na załadowanie wszystkich materiałów graficznych – zostaną one pobrane przez przeglądarkę dopiero, gdy będą potrzebne.
4. Wybierz tylko najlepsze zdjęcia
Warto pokazać szeroki asortyment produktów albo pochwalić się ciekawymi miejscami odwiedzonymi w ostatnie wakacje. Zdobądź się jednak na odrobinę szczerości i przyznaj, że te 500 zdjęć to spora przesada. Być może zamiast 30 zdjęć, przypadających na jeden produkt, zrobionych z każdej możliwej perspektywy, wystarczą dwa podkreślające jego jakość?
5. Zoptymalizuj zdjęcia opublikowane na stronie
Optymalizacja fotografii w ramach działającej strony może okazać się problematyczna. Być może konieczne będzie zgranie wszystkich zdjęć na dysk, ich zoptymalizowanie przy wykorzystaniu odpowiedniego oprogramowania i podmiana na serwerze. Nie musi to być jednak problem, jeżeli prowadzisz bloga lub stronę firmową opartą o CMS WordPress. Istnieje bowiem kilka wtyczek, które dzięki współpracy z zewnętrznymi serwisami, pozwalają na hurtową optymalizację fotografii i innych grafik publikowanych na stronie.
Na uwagę zasługuje plugin WP Smush-It oraz opublikowana niedawno wtyczka WP Image Shrinker. Pierwszy z wymienionych do optymalizacji korzysta z serwisu Yahoo udostępnionego pod taką samą nazwą, natomiast drugi wspierany jest przez serwis TinyPNG (oraz bliźniaczy TinyJPG). Obydwie wtyczki działają w oparciu o różne progi kompresji dla różnych obszarów kompresowanego obrazka oraz dodatkowe techniki pozwalające zmniejszyć rozmiar pliku bez negatywnego wpływu na postrzeganą jakość.
Autorzy serwisu TinyJPG przekonują, że ich technologia pozwala zmniejszyć rozmiar plików graficznych nawet o 70% przy zachowaniu ich oryginalnej jakości. Oferują nawet porównanie w formie interaktywnego suwaka dzięki czemu możemy przekonać się na własne oczy, czy taka optymalizacja nie spowoduje spadku jakości publikowanych zdjęć.
Do dyspozycji użytkowników TinyJPG, autorzy serwisu oddają również swoją własną wtyczkę – Compress JPEG & PNG images. Jej działanie jest identyczne z WP Image Shrinker, jednakże rozwiązania te różnią się interfejsem. Warto zatem spróbować obydwu rozwiązań i wybrać najwygodniejsze dla siebie.
Panda radzi: Automatyczna optymalizacja plików JPG oraz PNG to dobry sposób na zmniejszenie czasu ładowania strony a nawet poprawienie wyników SEO.
Czy warto optymalizować zdjęcia na stronach internetowych?
Zmniejszanie rozmiarów oraz optymalizacja plików graficznych publikowanych w Internecie nie wymaga olbrzymich nakładów pracy lub posiadania specjalistycznej wiedzy. Biorąc jednak pod uwagę, że tekst umieszczony na stronie zajmuje nierzadko ułamek wielkości jednego dużego obrazka, warto upewnić się, że zdjęcia, które przesyłamy są przygotowane do publikowania w Internecie. Zmniejszy to ogólny czas potrzebny na załadowanie i wyświetlenie strony, a tym samym dostęp zarówno do tekstu, jak i fotografii.
Doświadczenie to przyda się również podczas wysyłania zdjęć na profile społecznościowe oraz w e-mailach. Co prawda każdy szanujący się serwis społecznościowy oraz system zarządzania treścią posiada funkcjonalność odpowiedzialną za automatyczne zmniejszanie zdjęć, ale systemy te najczęściej działają po stronie serwera. Oznacza to, że aby zmniejszyć zdjęcie, oryginał musi zostać najpierw przesłany na serwer, co z kolei zajmuje nasz czas.
Warto skorzystać z dostępnych narzędzi oraz wyrobić sobie nawyk zmniejszania rozmiaru grafik przed ich publikacją w Internecie. Docenią to zarówno użytkownicy urządzeń przenośnych, jak i wielkich, stacjonarnych ekranów. Przygotowanie odpowiednich grafik to ukłon w stronę odbiorców, którzy docenią dbałość o lepszą dostępność do treści. Przesyłanie dużych plików graficznych nie ma bowiem sensu, jeżeli ich rozmiar w pamięci nie przekłada się na wyraźne zwiększenie jakości obrazu.
Co jeszcze mogę zrobić żeby moja strona ładowała się szybciej?
Dobrym sposobem będzie uruchomienie pamięci podręcznej dla Twojej strony internetowej. Jeżeli korzystasz z CMS WordPress, zapoznaj się z innym wpisem, gdzie piszę na ten temat.
