Nowoczesne przeglądarki internetowe i systemy zarządzania treścią optymalizują obrazy do wyświetlania w dowolnych warunkach. Jednak najlepiej jest przygotować obrazy zoptymalizowane pod kątem każdego możliwego współczynnika kształtu i lokalizacji, w której może się pojawić obraz. Skoncentruj się na trzech rzeczach: rozdzielczości obrazu, rozmiarze i przestrzeni kolorów.
Przestrzeń kolorów w obrazach
Grafika opiera się na dwóch podstawowych przestrzeniach kolorów. Przestrzeń kolorów to metoda, za pomocą której kolory podstawowe łączą się, tworząc złożone tęcze kolorów.
Użyj trybu RGB podczas przygotowywania obrazów na urządzenia mobilne. Wyświetlacze na monitorach komputerów i smartfonach opierają się na kombinacji czerwonych, niebieskich i zielonych pikseli. Ten obraz RGB jest zoptymalizowany pod kątem dokładnego odwzorowania zamierzonych kolorów na ekranie.
Do druku projektanci stosują proces czterokolorowy, w którym każdy kolor destyluje do kombinacji cyjan, magenta, żółtego i czarnego. Czasami obrazy czterokolorowe są z tego powodu określane jako obrazy CMYK.
Rozdzielczość obrazu
Obrazy, zwłaszcza na platformach mobilnych, powinny mieć jak najmniejszy rozmiar, aby zrównoważyć jakość z szybkością pobierania w sieciach komórkowych oraz rozmiar pliku z limitami danych mobilnych.
Większość programów, w tym aplikacje Adobe Creative Cloud, obsługuje narzędzie Export for Web, które wyświetla obraz w różnych kombinacjach rozdzielczości i kompresji. Wybierz obraz o najlepszej jakości przy najmniejszym całkowitym rozmiarze.
Rozmiar obrazu w pikselach
Każdy obraz powinien mieć rozmiar zgodny z jego przeznaczeniem. Oto kilka przykładowych rozmiarów obrazów do popularnych zastosowań internetowych:
- Banery internetowe mają często wymiary 468 na 60 pikseli.
- Okładki na Facebooku powinny mieć 851 na 315 pikseli.
- Zdjęcia profilowe na Twitterze powinny mieć rozmiar 400 na 400 pikseli.
- Obrazy dla udostępnionych łączy powinny mieć rozmiar 1200 na 630 pikseli.
Gdy pracujesz ze zdjęciami do określonych celów, sprawdź miejsce, w którym zdjęcie się pojawi (takie jak portal społecznościowy lub blog), aby zweryfikować optymalne wymiary obrazu, a następnie odpowiedni rozmiar, aby uniknąć rozciągania lub przycinania obrazu.
Aby uniknąć pikselizacji, kieruj się na rzeczywisty rozmiar ekranu. Nawet jeśli obraz jest odpowiednio zwymiarowany, jeśli nie ma prawidłowego rozmiaru, wynikowy produkt może wyglądać na pikselowany, jeśli obraz musi zostać przeskalowany w górę, aby zmieścić się w dostępnej przestrzeni.
O obrazach wektorowych
Obrazy wektorowe - obrazy, które są obliczane i rysowane przez urządzenie - są zwykle bardziej wydajne i mają wyższą jakość niż obrazy rastrowe (obrazy rysowane po jednym pikselu naraz), ponieważ można je powiększać i zmniejszać bez wpływu na jakość obrazu. W przypadku prostych logo, grafiki liniowej i wykresów idealna jest wersja wektorowa. Formaty wektorowe nie są używane do zdjęć.
