Za nami webinar organizowany przez home.pl, w ramach cyklu „Akademia home.pl„. Godzinne nieodpłatne dla wszystkich uczestników szkolenie online, to czas, w którym wszyscy zainteresowani otrzymują dawkę praktycznej wiedzy. Nasi eksperci i praktycy, nie tylko referują prezentację ale też odpowiadają na pojawiające się pytania i wątpliwości. Ostatni webinar cieszył się ogromnym zainteresowaniem, padło też wiele ciekawych pytań. Poniżej publikujemy odpowiedzi naszych prowadzących, na każde z nich.
Dlaczego jeśli dodajemy tekst do grafiki, to grafika na stronie robi się lekko rozmazana?
Na to pytanie bez zobaczenia przykładu ciężko jest odpowiedzieć. Poprawne dodanie tekstu na grafice nie ma wpływu na jej jakość. Jeżeli tak się dzieje, może to wynikać z wielu rzeczy.
Można dać teraz tylko kilka typów w ciemno:
- Po dodaniu napisów zapisujemy ponownie plik nie patrząc na (wysoki) stopień kompresji JPG ustawiony w programie graficznym.
- Jeśli tekstem nazywamy np. znak wodny (np. adres strony WWW) to możliwe, że system sklepu lub wtyczka np. do WordPressa korzysta z własnych ustawień kompresji pliku przy zapisie po dodaniu napisu.
- Występują też problemy aplikacji trzecich, które służą do przesyłania plików między użytkownikami (Facebook, Messenger czy WhatsApp kompresują dodatkowo pliki aby zajmowały one mniej na ich serwerach).
Czy kompresja to tylko obniżenie rozdzielczości?
Nie, kompresja wg definicji sama w sobie nie jest zmniejszaniem (obniżeniem) rozdzielczości obrazka. Zmniejszenie fizyczne wielkości obrazka w pikselach spowoduje mniejszy rozmiar pliku (podawany np. w KB czy MB) – lecz nie jest to kompresja. Terminem tym możemy nazwać specjalne procesy w programie graficznym przekształcające obraz, które mają wpływ na wielkość pliku poprzez np. „oszukiwanie” ludzkiego oka. Istnieje kompresja stratna (gdzie jakość wizualnie się pogarsza w zależności od chęci zaoszczędzenia miejsca) lub bezstratna (jakość obrazu jest niezmieniona, wielkość pliku jest mniejsza ale nie ma tak spektakularnych rezultatów).
Obecnie najlepiej kompresującym się formatem pliku jest wymyślony i promowany przez Google format WEBP (kompresja lepsza niż w JPG a do tego z możliwością zapisu przeźroczystości jak w PNG lub animacji jak w GIF). Inne znane i najbardziej popularne formaty w sieci dające super rezultaty to różnego typu odmiany JPG. Za każdym razem gdy mamy do czynienia z nowościami, trzeba patrzeć na wsparcie przeglądarek tzn. czy poradzą sobie z wyświetleniem nowego typu obrazka. Mimo iż WEBP istnieje bodajże od 10 lat, to dopiero niedawno przeglądarki zaczęły go w pełni wspierać.
Można używać sposobów na zastępowanie pliku niewspieranego przez przeglądarkę, aby każdy użytkownik zobaczył to co chcemy (np. osoby ze starszymi systemami operacyjnymi lub nieaktualizowanymi przeglądarkami), ale to już temat na osobny artykuł i raczej dla osób które zajmują się kodem strony lub ustawieniami serwera.
Jak optymalizować grafiki rysowane na tablecie?
Tu znowu można zacząć od słów „to zależy”… Czy to tablet graficzny (czyli „deseczka” z piórkiem, która łączy się z komputerem czy tablet ekranowy z system np. iOS/Android wyczuwający poziomy nacisku). Każde z tym rozwiązań ma prawdopodobnie trochę inne programy do rysowania i ciężko opisać jakie uniwersalne ustawienia przyjąć.
Jeśli to są płaskie grafiki rysowane przy użyciu małej liczby kolorów, sugerowałbym zapis do PNG (wersja 8 bitowa zapisuje maksymalnie 256 kolorów ale za to wszystko jest ostre i mało zajmuje). Jeśli to jest coś skomplikowanego z duża ilością kolorów i przejść tonalnych to polecam PNG24 – nie będzie straty na jakości. Plik taki za to zajmie (przeważnie) więcej miejsca niż JPG. Przy pracach, którymi chcemy się pochwalić, warto znaleźć złoty środek pomiędzy rozmiarem pliku a jakością naszego dzieła. Przy podglądzie w trakcie zapisu pliku w programie graficznym zazwyczaj powinien być suwak do dobierania poziomu kompresji. Patrzmy przesuwając w lewo, aż do momentu, aż pojawią się jakieś zniekształcenia (rozmazania lub artefakty). Wtedy cofnijmy się o jeden krok w prawo i zapiszmy.
Jeśli program nie ma ustawień kompresji (np. program na tablecie „mobilnym”), polecam zapisać jako PNG bez żadnej kompresji i dopiero przejść na stronę, która potrafi dobrać odpowiednie parametry kompresji i zapisać zmniejszony plik.
Jak bardzo zmniejszać obrazy mając na uwadze responsywność?
Responsywność dotyczy różnych urządzeń i ich rozdzielczości (oraz zagęszczenia pikseli). Nie popadajmy jednak w paranoje przystosowując nasze zdjęcie do telewizora 8K, z którego w teorii użytkownik może wejść na naszą stronę, ale pewnie nigdy tego nie zrobi ?. Zobaczcie w statystyki strony i sprawdźcie jakie urządzenia odwiedzają Was najczęściej.
Wszystko zależy też czy to grafika, która ma stałe wymiary na stronie (np. grafika ze zdjęciem opisująca jakiś dział) czy zdjęcie produktowe, które ma się powiększyć po kliknięciu w miniaturkę. Jeśli stała grafika i system do dodawania zdjęć na to pozwala, można wstawiać obrazki 2x większe niż fizyczne piksele opisane w CSS (np. mając obrazek na stronie 400×320 px, można wstawić 800×640 px). Można ale nie trzeba – wszystko znowu zależy jak wymagających macie użytkowników i z jakich urządzeń korzystają wchodząc na waszą stronę/sklep .
Takie rozwiązanie spowoduje, że grafika będzie ostra na monitorach/telefonach z dużym zagęszczeniem pikseli (np. ekran w technologii Retina w urządzeniach Apple, lub telefony z wyższej półki – tzw. Flagowce jak seria Galaxy S od Samsunga). Z doświadczenia, przy galeriach zdjęć stosowałbym jednak wielkość dostosowana do monitorów 24 calowych w rozdzielczości 1920×1080. Czyli po kliknięciu, jeśli chcemy aby zdjęcie powiększyło się na prawie cały ekran ustawmy np. 1600px na szerokość przy poziomych zdjęciach.
Trzeba też pamiętać, aby druga wartość (wysokość) ustawiła się automatycznie aby proporcje boków zostały zachowane. Istnieją też systemy podglądu zdjęcia produktu przy pomocy skryptu „lupki”. W zależności od takiego dodatku trzeba zobaczyć czy wartość powiększenia nie wymaga jeszcze większego zdjęcia niż przykładowe 1600. Ważne aby zdjęcia nie zmniejszyć za bardzo, gdyż powiększenie służy do zauważalnego powiększenia miniaturki a nie skoku np. o 10%. Nie ma też również sensu wstawianie zdjęcia prosto z aparatu, które będzie 5x większe niż rozdzielczość Full HD.
Tak, takie obostrzenia istnieją. Ciężko opisać wszystkie, ale każde medium powinno posiadać własny „samouczek” jak przygotowywać takie grafiki. Głównie są to wymiary (proporcje boków i minimalny rozmiar w pikselach). W zależności gdzie chcemy zdjęcie umieszczać i przy pomocy jakiego rozwiązania, powinniśmy sugerować się wytycznymi np. grupy Facebook (FB czy Instagram), Linkedin itp.
Dane te dość często się zmieniają i chyba lepiej nie pisać w tym miejscu jakichś konkretnych porad odnośnie rozmiarów, bo za chwilę mogą być już nieaktualne. Odnośnie najpopularniejszych social mediów to w internecie jest bardzo dużo blogów lub profili na FB, które służą pomocą w tym temacie. Niestety wiele jest już nieaktualnych o czym pisałem wcześniej, lub napisanych nierzetelnie aby tylko skierować ruch na stronę. Polecam patrzeć na daty lub korzystać tylko z oficjalnych źródeł jak np. materiały Facebooka dotyczące płatnych reklam graficznych https://www.facebook.com/business/help/103816146375741?id=271710926837064
Jeśli chodzi o grafiki do reklam sponsorowanych to np. Facebook ogranicza zasięgi (ilość emisji danej reklamy) jeśli na grafice zamieścimy zbyt dużo tekstu. Przyjmuje się, że tekst na obrazku nie powinien zajmować więcej niż 20% całości obrazka. Specjalne algorytmy obliczają to, i w przypadku przekroczenia tego limitu, sugerują do jakiej ilości potencjalnych użytkowników reklama dotrze. Sprawdzić to można w łatwy sposób np. tym narzędziem: https://www.facebook.com/ads/tools/text_overlay dodając utworzoną grafikę.
Przyjmuje się też, że np. w przypadku Facebooka jeśli grafika zajmuje mniej niż 100 KB to pokaże nam się w jakości jaką widzimy po zapisaniu jej na swoim komputerze. Jeśli przekroczy się ten limit to mechanizmy Facebooka ponownie podda obrazek kompresji i zazwyczaj jakość będzie bardzo pogorszona. Czasami udaje się obejść tego typu ograniczenia przy pomocy różnych sztuczek, ale to jest temat na osobny wpis.
Jaka jest optymalna „waga” pliku zdjęcia?
Nie ma jednoznacznej odpowiedzi na to pytanie. Ułatwiłbym sobie odpowiedź prostym testem. Jeśli narzędzie Googla https://developers.google.com/speed/pagespeed/insights/ po wpisaniu adresu strony pokazuje problemy z konkretnymi zdjęciami, to bierzemy je „na tapetę” czyli staramy się skompresować i/lub zmniejszyć rozdzielczość (jeśli jest zbyt duża i niewykorzystywana – skalowana w dół a rzeczywisty rozmiar nigdzie nam się nie wyświetla w 100%).
To pytanie jest problematyczne, bo każde zdjęcie trzeba by rozpatrywać indywidualnie (lub jako grupa bardzo podobnych zdjęć). Jeśli zależy nam na dobrych wynikach w SEO, to można lekko pogorszyć jakość zdjęcia mocniejszą kompresją, ale nie na tyle aby powodowało to zły odbiór. Np. załóżmy, że mamy zdjęcia ubrań na modelach, wszystkie na jednolitym tle i w tym samym rozmiarze. Można sobie wtedy przyjąć, że takie zdjęcia powinny „ważyć” np. około 130 KB jedno. Jest to oczywiście strzał w ciemno, bo należałoby otworzyć kilka zdjęć i dobrać stopień kompresji, który później stosowalibyśmy z automatu do kolejnych.
Jeżeli mamy podać jakąś średnią wyważoną opinię – to starajmy się aby zdjęcie nie przekraczało 300 kb, niemniej jak wspomnieliśmy wyżej – jest to kwestia mocno indywidualna w zależności od rodzaju zdjęcia i sklepu.
Jeśli ktoś nie dysponuje programem do optymalnego kompresowania plików graficznych (i nie – Photoshop wcale nie jest tutaj najlepszym rozwiązaniem), to polecam wejść na stronę https://compress-or-die.com/ lub https://kraken.io/web-interface i tam skorzystać z automatu, który sam dobierze optymalne ustawienia (w przeciwieństwie do innych tego typu narzędzi online, istnieje też możliwość ręcznej modyfikacji stopnia kompresji).
Jak / czy DPI wpływa na jakość wyświetlania?
To będzie najkrótsza odpowiedź: Nie. Nie wpływa, bo DPI nie ma odniesienia do grafiki wyświetlanej na ekranach. Na ekranach liczą się piksele (wysokość i szerokość obrazu w pikselach).
Ile czasu zajmie nauczenie się podstaw edytowania zdjęć np. w photopei, tak aby ogarniać podstawy?
Przewrotnie można napisać, że tyle samo co nauka podstaw edytowania zdjęć w Photoshopie ?. Jeśli chodzi o podstawy a nawet poziom średniego zaawansowania, te programy są praktycznie identyczne jeśli chodzi o funkcje, skróty klawiaturowe itp. Aby sprawnie poruszać się po programie graficznym, trzeba zapoznać się z interfejsem i podstawowymi narzędziami.
W przypadku Photopei czy Photoshopa, będą to narzędzia do selekcji (zaznaczania), kadrowanie, zmiana wielkości zdjęcia, podstawowe filtry jak wyostrzanie czy narzędzia do retuszu. Nie obędzie się jednak bez wiedzy na temat czym jest warstwa, maski czy warstwy dopasowania. Wszystkie te informacje można za darmo znaleźć na YouTube (najwięcej po angielsku ale dla Photoshopa znajdą się też i polskie samouczki). Osobiście polecam ten kanał
https://www.youtube.com/channel/UCMrvLMUITAImCHMOhX88PYQ/playlists
W zależności od sumienności/ poświęconego czasu i wykonanych zadań (tylko ćwiczenia dają dobre efekty – samo oglądanie bez testowania rozwiązań niewiele pomoże), podstaw obróbki można nauczyć się w 1-2 tygodnie. Jest to jednak tylko wycinek z możliwości takiego programu graficznego – czym więcej tricków ktoś pozna to praca będzie mu szła sprawniej a efekty będą coraz lepsze.
