(Last Updated On: 13 sierpnia 2017)

Cześć, z tej strony Ewelina

Jeżeli zastanawiasz się „jak przygotować zdjęcie do publikacji w internecie”, to jest artykuł dla Ciebie Moja Droga :)

Każda z nas dodaje zdjęcia na stronę. Oczywista oczywistość :) Zanim wrzucisz zdjęcie do WordPressa sprawdź minimum 3 rzeczy. A potem świadomie działaj.

Cztery najważniejsze cechy zdjęć

Aby zrozumieć o co chodzi z tymi zdjęciami, trzeba zrozumieć na co można wpłynąć w samym zdjęciu. Nie zawsze trzeba przycinać zdjęcie, kiedy jest ciężkie :) Rozmiar zdjęcia to jedno, a waga zdjęcia to drugie. Oto 4 najważniejsze cechy każdego zdjęcia na monitorze:

  • Rozmiar zdjęcia. Podajemy go w pixelach. Zdjęcie może mieć rozmiar 200 x 500 px.
  • Waga. My mamy kilogramy i tony, a zdjęcia mają odpowiednio kilobajty (kB) i megabajty (MB). Zdjęcie może być ciężkie :)
  • Rozdzielczość. 
  • Format. Najpowszechniejsze formaty to jpeg i png.

Ile waży Twoje zdjęcie?

Sprawdź wagę zdjęcia: kB (kilobajt), MB (megabajt). Jeżeli widzisz kB – to dobrze. Jeżeli widzisz MB to przeważnie źle. Zdjęcie jest za duże (za “ciężkie”). Strona będzie mulić. Dodam jeszcze, że 1MB to 1024 kB. Ten temat ściśle wiąże się z problemem wolno ładujących się stron. Jednym z częstych powodów są właśnie za ciężkie zdjęcia.

Jak odchudzić zdjęcie, aby nie straciło na jakości?

Najprostsza metoda to wrzucenie zdjęcia na taki serwis jak tinypng.com (strona otworzy się w nowej karcie). Wrzucasz tam zdjęcie, serwis je optymalizuje, pobierasz odchodzoną fotografię (zoptymalizowaną).

Ta optymalizacja nie zmienia rozmiarów zdjęcia. Jeżeli wrzuciłaś zdjęcie w rozmiarze 200 x 500 px to pobierzesz zdjęcie w takim samym rozmiarze.

Jaką ma rozdzielczość? 

Jeżeli zdjęcie jest w okolicach 1 MB (lub większe) trzeba jest zmniejszyć. Jak to zrobić? Przecież nie chcesz go obcinać. Rozwiązanie to zmniejszenie rozdzielczości. Jeżeli przygotowujesz zdjęcia na stronę internetową to spokojnie wystarczy Ci 72 dpi. Jeżeli masz więcej dpi, zmniejsz je. Nie potrzebujesz 300 dpi. To nie jest gazeta czy magazyn do druku.

Sprawdź rozszerzenie Twojego pliku 

Jeżeli zdjęcia są głównym motorem sprzedażowym na Twojej stronie, to zapisuj zdjęcia w formacie PNG-24. To przeważnie dotyczy fotografów. Uzyskasz wtedy najlepszą jakość.

Przy innych sytuacjach w zupełności wystarczy PNG-8 albo nawet najwyższej jakości JPEG. Najgorszą jakość uzyskasz zapisując plik w formacie GIF, więc tego raczej nie rób :)

(Jeżeli czujesz, że rozszerzenia to Twój nowy “konik”, polecam artykuł na pornel.net.)

Program, na którym możesz sprawdzić wszystkie te informacje? Polecam Irfan View. Wygląda jak z początku lat 90, ale działa bardzo dobrze i bardzo szybko.

Użytkownicy OS X nie muszą nic pobierać. Wszystko możecie sprawdzić w zwykłym Podglądzie zdjęć, czyli Podgląd > Narzędzia > Pokaż inspektora.

A co się stanie, jeśli olejesz wielkość zdjęć i ich wagę?

Przedstawię hipotetyczny, ale realny, scenariusz.

Masz blog i regularnie tworzysz posty. Zależy Ci na zbudowaniu dużej publiki. Do każdego wpisu dodajesz około 5 zdjęć. Zdjęcia robisz samodzielnie. Wrzucasz je od razu z kamery/smartphone’a na komputer, a potem do wpisu. Zakładając, że jedno zdjęcie waży około 2MB (2048 kB), a Ty dodajesz do każdego wpisu 5 zdjęć, każesz Twojemu czytelnikowi otwierać wpis, który waży ponad 10MB.

Czy wiesz, ile czasu będzie otwierał się taki wpis na komputerze? Dłużej niż mrugnięcie oka. O wiele, wiele dłużej. Z raportu Google z 2012 roku, wynika, że ludzie – Ty pewnie też – stają się niecierpliwi w oczekiwaniu na nową stronę www już po 400ms. Szczerze? Myślę, że wszyscy mamy ADHD… Ale, no tak jest. Deal with it.

A co jeśli Twoi czytelnicy lubią korzystać z internetu w autobusie? Mają smartphony i tablety. Szybkość takiego internetu jest przeważnie wolniejsza. Nie licz na to, że ktoś będzie czekał na Twoje zdjęcia. Jest wysoko prawdopodobne, że w ogóle nie będzie wiedział, że tam są zdjęcia! Przescrolluje całą stronę, zobaczy sam tekst, może nawet przeczyta, i wyjdzie nie widząc wszystkich zdjęć, bo nie zdążyły się załadować. Niefajnie.

Podsumowując. Zawsze optymalizuj zdjęcia przed wrzuceniem ich na stronę:

  1. Zanim wgrasz zdjęcie do biblioteki mediów WordPressa, zoptymalizuj je na stronie tinypng.com lub zapisz za pomocą programu Illustrator / Photoshop (opcja „Save for Web”). Funkcja „Save for Web” pozwala na określenie dpi (72) oraz formatu zdjęcia (png lub jpeg).
  2. Zrób wszystko, żeby zdjęcie ważyło jak najmniej kB, a nie MB :)

Ok, a co jeśli masz już stronę i trylion zdjęć?

Tutaj opcje są dwie.

Pierwsza jest taka, że rezerwujesz sobie czas w kalendarzu i siadasz do optymalizacji oraz ponownego dodania zdjęć. To jest najlepsze, ale czasochłonne rozwiązanie. Drugie rozwiązanie to pobranie wtyczki. Polecam EWWW Images Optimizer.

Ja przeważnie optymalizuję zdjęcia w Photoshopie (Save > Save for Web), ale kiedyś wypróbowałam tej wtyczki – jest ok.

Dlaczego jeszcze warto zakasać rękawy i dbać o wielkość zdjęć? Wiecie, kiedy wszystkim świecą się oczka? :) Kiedy na stole pojawia się temat pozycjonowania. Aktualna polityka Google kładzie ogromny nacisk na wielokanałowe doświadczenia użytkownika.

Co to znaczy? To znaczy, że user (czyli użytkownik) ma móc korzystać wygodnie ze stron (i mieć dobre doświadczenia) na każdym urządzeniu: komputerze, tablecie, smartphonie (mobile-friendly). Google będzie promował stron, które są dobre na każdym urządzeniu = są przyjazne dla użytkownika. Jeżeli Wasze foty będą ciężkie, będą wydłużały czas ładowania się strony = będą wkurzały użytkownika, to odbije się na Waszej pozycji.

Jeżeli chcecie pogłębić temat, to polecam 2 artykuły. A szczególnie osobom, które kochają pop-upy:

Zachęcam Was do dodania swojej strony do Google Webmaster Tools. Jeżeli Wasza strona nie będzie spełniała wymogów Google na urządzenia mobilne, dostaniecie mail :)

Uważacie, że to jest temat poboczny? Nudzicie się? Mam nadzieję, że nie. Na stronę www trzeba patrzeć z szerokiej perspektywy. Teraz zdjęcia, jak widać, to nie tylko doznania estetyczne, ale również element układanki pozycjonowania.

W temacie pozycjonowania (a w zasadzie optymalizacji = SEO) pozostając, dam Wam jeszcze jeden tip. Nie wrzucajcie zdjęć, które nazywają się CAM_20139823 albo img123. Jeżeli zdjęcie to Wasz portret nazwijcie je Waszym imieniem i nazwiskiem. To zwiększy szansę na wyszukanie zdjęcia w sieci.

Czy wiesz, co to jest dostępność?

Najprościej mówiąc, to dostosowanie stron www do potrzeb wszystkich użytkowników.

Grupą najbardziej narażoną i często zupełnie wykluczoną ze społeczności internetowej są osoby niepełnosprawne. Ze względu na swoje dysfunkcje motoryczne i/lub sensoryczne (wzrok, słuch) mają ograniczoną możliwość opuszczenia domu, a Internet mógłby być ich prawdziwym oknem na cały świat.

To fragment ze strony Widzialni.org. Tak, można korzystać z internetu bez wzroku, pomagają w tym syntezatory mowy, które czytają kod. Dlatego ważne jest by kod Twojej strony był dobry (semantyczny) oraz, żeby nie było zdjęć nazwanych CAM_2134995.

Zawsze kiedy wgrywasz zdjęcie wypełnij pole Tekst Alternatywny. To ten tekst jest zassysany podczas korzystania z syntezatora mowy. Zdjęcie przedstawia koszulkę? Wpisz koszulka.

Jeżeli temat dostępności jest dla Ciebie ciekawy – napisz mi o tym w komentarzach. Obiecuję, że poproszę eksperta od dostępności (poznałam takowych na studiach UX Design:) o artykuł na Girls Who WordPress i zrobię dokładny opis tematu w kursie on-line WP dla zielonych. Bo to jest mega ważne.

A czy wiesz co robi WordPress, za każdym razem, jak wrzucasz nowe zdjęcie?

Automatycznie tworzy nowe rozmiary tego zdjęcia. Czyli jeżeli wrzucam zdjęcie 1200×1500, to WordPress stworzy jeszcze 3 inne, mniejsze, wersje tego zdjęcia. Dzięki temu zabiegowi, w łatwy sposób, możesz wybierać rozmiar do wpisu. Jeżeli chcesz wiedzieć jakie rozmiary zdjęć tworzy WordPress, wejdź w Ustawienia > Media. Nie mylić z Biblioteką mediów, w której są przechowywane wszystkie zdjęcia.

To jest fajne i niefajne. Z jednej strony “Super, WP robi za mnie miniaturę zdjęcia, nie muszę robić jej samodzielnie!”.

Z drugiej strony, Twoja strona jest coraz cięższa. Jeżeli sama musisz dbać o kopie zapasowe Twojej strony (bo masz beznadziejnego dostawcę serwera i nie robią kopii wystarczająco często), waga strony może stać się problemem. Musisz mieć dużą przestrzeń, do przechowywania nowych kopii strony. Optymalizuj foty od początku.

Powtarzam: od początku posiadania strony dbaj o optymalizację zdjęć. Rób to ze względu na czytelników, na pozycjonowanie, na kopie zapasowe, dla dobra swojej strony i biznesu :)