OPTYMALIZACJA OBRAZÓW NA STRONIE INTERNETOWEJ

Wchodząc na stronę internetową aplikacja po stronie klienta zgłasza serwerowi, że klient wszedł na witrynę i potrzebuje listy rzeczy do wyświetlenia. Serwer odpowiada wysyłając potrzebne rzeczy, a czas jak szybko odpowiedź dotrze na wasze urządzenie będzie zależała w dużej mierze od wielkości przesyłanych plików. Zmniejszając rozmiar plików znacząco przyspieszamy szybkość działania naszej strony, co pozwoli klientowi na szybszy czas interakcji z jej elementami.

Dodając zdjęcia na stronę internetową mamy możliwość dodania atrybutów “alt”. Wartości tych atrybutów są sczytywane przez czytniki ekranu i pozwalają niewidomym zrozumieć co jest na obrazku. Alt posiada również drugą funkcję - jeżeli z jakiś powodów obraz się nie załaduje to zostanie on zastąpiony tekstem z atrybutu. Tekst powinien być napisany w takim języku w jakim jest napisana treść strony. To samo tyczy się atrybutu title.

Dokładnego algorytmu Google, który ocenia i pozycjonuje strony nie znamy, ale za to mamy trochę wytycznych na co warto zwrócić uwagę:
- Obrazy powinny mieć dostosowany rozmiar do faktycznego rozmiaru w jakim są wyświetlane na ekranie.
- Powinniśmy używać formatów zmniejszających rozmiar pliku takich jak .webp.
- Zdjęcia powinny mieć atrybuty alt, w celu umożliwienia zrozumienia treści grafiki przez czytniki ekranu dla osób niewidomych.
- Zalecane jest używanie atrybutu title, który podobnie jak alt ma na celu tekstowe opisanie grafiki.

Zawsze jak chcecie przeskalować grafikę skalujcie ją w dół czyli np. mamy obraz 850x351px to skalujmy do 600x248px. Zachowajcie też sb zapas około 100px - grafika na stronie ma mieć rozmiar 500x206px to skalujcie do 600x248px. Skalowanie do wyższej rozdzielczości nie ma sensu, ponieważ dojdzie do rozciągnięcia pixeli i rozmycia obrazu.

Podczas skalowania zachowajcie proporcje obrazu. Większość stron i narzędzi ma tą funkcję ustawioną jako automatyczną pod nazwą aspect ratio. Jeżeli proporcje obrazu wam nie odpowiadają możecie go wykadrować i dopasować jego rozdzielczość, ale żeby to dobrze zrobić należy sięgnąć po bardziej specjalistyczne narzędzia jak Figma czy Canva.

Do zmiany rozmiaru obrazów polecamy stronę:
https://www.iloveimg.com/resize-image
Prosta w obsłudze, darmowa i daje możliwość przeskalowania wielu obrazów za jednym razem.

Do kadrowania i zmiany rozdzielczości obrazów polecamy Figme. Jest to darmowe narzędzie, które zostało stworzone do projektowania interfejsów i daje duże możliwości edycji grafik i wiele więcej. Ze względu na rozbudowane funkcje aplikacji jej nauka wymaga czasu, ale na pewno Wam się to zwróci w przyszłości, gdy zajdzie potrzeba edycji grafik lub tworzenia nowych do postów na social media lub stronę www. Podobna do popularnej Canvy ale naszym zdaniem jest o kilka poziomów wyżej.

Najlepszym formatem, który będzie najmniej ważył jest .webp lub jeżeli macie grafikę wektorową to oczywiście zostańcie przy SVG. Warto zwrócić uwagę na jakość obrazu po konwersji. Jeżeli obraz ma duże nasycenie kolorów to znacząco zmniejszymy rozmiar pliku (oczywiście kosztem jakości ale w większości przypadków jest on akceptowalny). W przypadku niskiego nasycenia np. gdy mamy bardzo jasną grafikę warto sprawdzić rozmiar pliku po konwersji i jego jakość, ponieważ tutaj zmiany w rozmiarze mogą być bardzo małe, a stracimy dużo na jakości. W takim przypadku lepiej pozostać przy oryginalnym formacie.

Do zmiany formatu polecamy stronę:
https://pixelied.com/convert/jpg-converter/jpg-to-webp
Darmowa, prosta w obsłudze i daje możliwość wrzucenia dużej ilości zdjęć.

Podczas wrzucania grafik na stronę nie zapomnijcie dodać atrybutów alt i tittle (mogą być takie same). Piszcie krótko co przedstawia zdjęcie, w języku w jakim jest strona i zamiast spacji stosujcie podłogę “_” lub myślnik “-”. Spacje są różnie sczytywane przez programy co może prowadzić do podmiany znaków i złej interpretacji atrybutów.