Jak wdrożyć zdjęcia na stronę internetową - aspekty techniczne

Jako że blog ten jest przeznaczony również dla osób które rozpatrują rozpoczęcie własnej działalności, lub są już świeżo po otwarciu działalności, jak i może być dla tych co rozpatrują przebranżowienie, ten wpis na pewno też będzie pomocny. 

Dzisiejszy post jest uzupełnieniem wpisu: Jak robić zdjęcia kosmetyków i innych produktów na bloga lub instagram? Flat lay i inne znane techniki - skąd brać pomysły.

O tym że musi być "jakoŚĆ", a nie "jakoś" już wiemy. W końcu bądźmy szczerzy, lubimy patrzeć na to co ładne, o wiele chętniej idziemy tam gdzie jest czysto, wyraźnie i miło. Dotyczy się to również internetu. Wszędzie wymagamy wysokiej jakości, i w świecie realnym, i internetowym.

Jak zmniejszyć zdjęcia do internetu bez utraty jakości?  Przede poza tym jak wykonamy technicznie zdjęcie (ostrość, światło, kompozycja etc.) do tego wpływ na wygląd zdjęcia po publikacji ma również: 

• Rozmiar zdjęcia w pikselach (np. 5000 x 3500) 
• Format zdjęcia (JPG, TIFF, GIF, PNG) 
• Waga zdjęcia (KB, MB, GB) 
• Rozdzielczość zdjęcia (piksel/cal) Im większy rozmiar zdjęcia, tym zdjęcie więcej „waży”, a więc dłuższy jest jego czas wczytywania. 

Jeśli jesteś posiadaczem szybkiego internetu i nowego sprzętu (laptop, telefon, tablet, czyli to na czym akurat uruchomiona jest dana strona internetowa), prawdopodobnie jeszcze nie wiesz że jest problem, do czasu aż ktoś z odbiorców nie zwróci uwagi, że musi czekać, aż duże zdjęcie pojawi się na ekranie. 

Że u mnie jest z tym problem, dowiedziałam się analizując dane na jednej z stron agencji pośredniczącej między wydawcami, a reklamodawcami. Dodana jestem jako wydawca i mam podgląd na jakich zasadach oceniają daną stronę.

Czy szybkość i wydajność strony (mierzona np. wynikiem w PageSpeed Insights) ma wpływ na pozycje w wyszukiwarce?  

Tematy związane z tym narzędziem są ciągle wałkowane na stronach z kategorii SEO.

Najczęściej po przestudiowaniu tego tematu mamy takie notatki:  wynik PageSpeed Insights ma silny wpływ na pozycję, PSI ma wpływ na pozycję ale jest on znikomy, trzeba uzyskiwać zielony wynik, bo ten gwarantuje poprawę pozycji, trzeba osiągnąć X punktów (czyli jakaś losowa wartość którą programiści strony określili jako zadowalający), to czerwony wynik pogarsza pozycje, PSI nie ma jakiegokolwiek wpływu na pozycję, wynik PSI się nie liczy, istotna jest „realna prędkość” strony – mierzona w jakiś inny domowy sposób.

Jak działa i co sprawdza PageSpeed Insights?  Często rozpowszechniane wpisy mówią o tym, że PageSpeed sprawdza prędkość ładowania (lub wczytywania się) strony. Coś w tym jest, ale jest też ale - bo w nazwie występuję słowo speed – szybkość ale najnowsza wersja narzędzia PageSpeed Insights bada w dużo większym większym stopniu wydajność, i także parę innych kwestii, które mają wpływ na wygodę z jej korzystania co przekłada się na doświadczenia użytkownika.  

Wynik PageSpeed Insights obrazuje wydajność strony na urządzeniach mobilnych, oraz na urządzeniach typu komputer stacjonarny czy laptop. 

Raport podsumowujący wyniki testu zawiera także sugestie, jak poprawić stronę dla uzyskania maksymalnego wyniku – czyli 100 punktów.  

Test każdej publicznie dostępnej w danej chwili strony można przeprowadzić pod tym adresem:   

https://pagespeed.web.dev/ i ekran z wynikami wygląda tak:

Google i jego wymagania: jednym z nich jest to, aby strony internetowe były jak najlżejsze, aby każdy użytkownik internetu, niezależnie od prędkości łącza, mógł z łatwością i szybko przeglądać internet. Jest to sztuczka na bierną konsumpcję - szybko, szybko scolujesz i jedziesz dalej. Bo Google wie że większość ludzi jest leniwych, i nawet jakby na danej stronie był patent na zarobienie miliona dolarów w tydzień, ale było pełno instrukcji obrazkowych z drobnymi napisami, a więc musiałby być te zdjęcia dużych rozmiarów aby przybliżyć drobne napisy, to mało kto by się wysilił żeby to zrobić, więc po co proponować drogę tam gdzie nikomu nie chce się siedzieć? 

Format zdjęcia: Lepiej zachowuje jakość .png, ale też więcej waży, lepiej przez to zastosować ten format tylko w małych grafikach typu logo, lub tam gdzie potrzebne jest przezroczyste tło. W każdym innym przypadku lepiej spróbować taki plik przekonwertować na .jpg, bo zmniejszy wagę grafiki o kilkadziesiąt procent. 

 

Jaki rozmiar zdjęcia do internetu? Zauważyłam, że w większości przypadków nie ma sensu publikować zdjęć większych niż 1000 px szerokości i najlepiej zadbać, by nie ważyły więcej niż 300KB, zwłaszcza, gdy na stronie wyświetla się wiele fotografii równocześnie. Jest to również spowodowane ustawieniami mojego szablonu - zwęża on zdjęcia w wpisach do szerokości ustawienia w danej chwili kolumny. 

Czyli również gdy odbiorca przegląda stronę na mniejszym ekranie, typu tablet czy telefon, system pomniejsza zdjęcie aby nie wychodziło ono poza kolumny.

Można podczas obróbki w programach graficznych skorzystać z opcji - wyostrz zdjęcie. Zmniejszenie rozmiaru, wiąże się często także ze stratą jakości, a więc i ostrości. Pomniejszoną fotografię można nieco wyostrzyć. 

Najczęściej korzystam z okna INTELIGENTNE WYOSTRZENIE (FILTR –> WYOSTRZ –> INTELIGENTNE WYOSTRZENIE), zmieniając promień. 

Kompresja zdjęć - przydatna funkcja o której dowiedziałam się podczas studiowania grafiki komputerowej. Jeśli chodzi o kompresję, to Google przestaje się czepiać przy jakości 51%, więc chyba to dziś najlepsze rozwiązanie. Strona którą znam z studiów i dziś wykorzystuję to Optimizilla. Wygląda w praktyce tak:

Po wprowadzeniu tych kilku zmian, PageSpeed Insights pokazuje już o wiele ładniejszy wynik:

Inne sposoby na sprawdzenie jakości i szybkości strony i zdjęć to po prostu wyświetlenie tej samej strony na różnych urządzeniach. Ja swoje prace od dłuższego czasu sprawdzałam na:

• swoim telefonie iPhone 4s - obecnie chyba najmniejszy wyświetlacz na rynku - Kolorowy / IPS TFT 16M kolorów 640 x 960 px (3.50") 330 ppi ∼54.0% screen-to-body ratio - widziałam że coś wolno działa, ale też miałam z tyłu głowy że dziś już tak małych telefonów używa może z 0,01% użytkowników.
• tablet huawei mediapad t3 10 - Ekran   9,6 cala, IPS, 1280 x 800 pikseli - już nie było problemu z wyświetlaniem strony, internet przeciętny pakiet żaden demon prędkości.
• pracuję na MacOS Mojavie Intel HD Graphics 6000 1536  MB 13,3'' (1440 x 900) Karta grafiki Intel HD Graphics 6000 1536  MB - dopóki go nie przeciążyłam plikami video był demonem prędkości więc i każdą stronę internetową wczytywał bez problemu. Ale też jest sprzętem typowo do pracy, bo gdy sprawdzałam wykonaną pracę na starym komputerze z Windowsem XP to co on wyświetlał to masakra kolory dziwne i zakrzywione.

Żałuję że od początku działalności po publikacji nie sprawdzałam od razu na innych parametrach. Raz czekając na kolegę aż wróci od fryzjera, a miał laptopa podłączonego do TV 32 cale z ciekawości sprawdziłam jak strona wygląda w takiej rozdzielczości. Dopatrzyłam się błędów jak przy obróbce przesadzałam z opcją wyostrzania, i zdjęcia robiły się w takim rozmiarze dziwne. 

Zdecydowanie lepiej częściej sprawdzić na różnych sprzętach jak to będzie się wyświetlać, bo to jednak nie my codziennie będziemy z tego korzystać, tylko inni użytkownicy. Statystyki urządzeń z jakich korzystają użytkownicy też są jawne i bezpłatne.

Powyższa treść jest autopromocją, darmowym fragmentem mojego e-booka Jestem Prywaciarzem. Dostępny w formacie PDF na Empik, Fansi i Legimi.