Jak przygotować grafiki na stronę www?
Dbanie o optymalizację strony www jest niezwykle istotne. Irytujące jest, gdy wchodząc na jakiś serwis, czekasz, aż się wczyta pełna treść, w tym grafiki. Czekasz… i nadal czekasz… Wiadomo, że kończy się to pożegnaniem z serwisem, do którego prawdopodobnie już nie wrócisz. Co zrobić, aby nie dopuścić do takiej sytuacji na Twojej witrynie?
Spis treści:
MARKETINGOWY PRZEWODNIK PRZEDSIĘBIORCY
Czy kiedykolwiek zastanawiałeś się jakie sekrety skrywają się za sukcesem w dzisiejszym dynamicznym świecie marketingu?
A może czujesz, że działania w social media to dla Ciebie nieznany i potencjalnie niewykorzystany obszar, który mógłby znacząco wpłynąć na rozwój Twojej firmy?
Nasz newsletter ma na celu odpowiedzieć na te pytania i dostarczyć Ci najświeższych, wartościowych informacji w tej dziedzinie.
Po pierwsze — rozmiar zdjęcia
Zapamiętaj, że im większe zdjęcie, tym gorzej dla Twojego serwisu! Dlaczego?
Otóż, jeśli grafika posiada większe rozmiary, to jego waga także proporcjonalnie jest większa. Dodając „dużą” grafikę, powodujesz, że u Twojego odbiorcy długo się wczytuje ( chyba że ma „ekspresowe” połączenie internetowe 🙂 ). Jest to najbardziej denerwujące, gdy łącza danego Użytkownika są słabsze… Dlatego trzeba to tak zoptymalizować, aby grafika wczytywała się u każdego, bez zbędnych problemów.
Generalnie każdy system do zarządzania treścią CMS wyposażony jest w automatyczną funkcję do skalowania grafik do pożądanego przez serwis wymiaru. Jednakże warto wiedzieć, iż dodatkowa samodzielna optymalizacja przynosi znacznie korzystniejsze efekty 😉
Przechodząc do meritum…
Na początek przyjmijmy jedną podstawową zasadę:
„Zdjęcia nie mogą być większe niż 1920×1080 px”
Jeżeli jednak chcemy dodać grafikę w danym miejscu na podstronie, najlepiej tak ją przygotować jak jest to wymagane, czyli dostosować jej szerokość i wysokość do docelowego miejsca. Bez sensu jest wstawianie grafiki o szerokości 1920 px, gdy docelowa szerokość wynosi 500 px.
Dlaczego?
Tak jak pisałam wyżej, system powinien sam skalować sobie grafiki. Jednak często takie działanie jest niesatysfakcjonujące, bo coś zostanie przycięte lub usunięte, a co gorsza nie zmieni to faktycznego rozmiaru grafiki. Przekładając to na wczytywanie się u użytkownika, następuje pobieranie zdjęcia o oryginalnych rozmiarach, a nie tego, który został przeskalowany przez CMS, co skutkuje większym przeciążeniem serwera, dłuższym wczytywaniem strony.
Jak zmniejszyć grafikę?
Grafikę możesz zmniejszyć w dowolnym programie graficznym, który na to pozwala. Są to dla przykładu Photoshop, GIMP, Affinity Photo. W takich programach możesz przygotować sobie grafikę według potrzeb na stronie www, aby była idealnie dopasowana. Jeśli przygotowuję grafikę dla wpisów, to zmniejszam tylko Jej wysokość, a szerokość sama automatycznie się zmniejsza.
To już pierwszy krok, który pozwala na zmniejszenie transferu i przyspieszenie strony. Czas na krok drugi!
Po drugie — waga i rozdzielczość
Zmniejszenie rozmiarów mamy za sobą, czyli teoretycznie waga już jest optymalna. Jednak często jest tak, że pomimo zmiany rozmiarów zdjęcie nadal sporo waży przez niepotrzebnie wysoką rozdzielczość.
Przedstawiam kolejną zasadę:
„Zdjęcia powinny posiadać optymalną rozdzielczość na stronie www, wynoszącą 72 dpi i ważyć nie więcej niż 600 KB!”
Wedle powyższego staraj się, aby Twoja grafika nie posiadała większej rozdzielczości niż 72 dpi, skoro jej docelowe miejsce to strona www. Gdybyś chciał grafikę zlecić do druku, to rozdzielczość musi być zdecydowanie większa. Co do wagi, napisałam 600 KB, jednak najlepiej, aby nie przekraczały 300 KB. Nie zawsze jednak jest to możliwe, stąd wartość 600 KB.
Pewnie zapytałbyś, skoro będzie tak mała waga, to co z jakością grafiki? Otóż można zmniejszyć wagę prawie bez utraty jakości. Możesz skorzystać z kompresora. Osobiście używam TinyPNG, pozostawiając grafikę w tym samym rozszerzeniu lub zmniejszam grafikę kompresując plik JPG na WEBP. Możesz to wykonać przez pobrany darmowy program do kompresji do WEBP lub przez kompresory na stronach. Wystarczy, że wpiszesz frazę „jpg to webp” w wyszukiwarkę i wejdziesz w pierwszy lepszy link.
Co do formatu zdjęcia, to najlepszym będzie WEBP. Jest on najbardziej zoptymalizowany, ale nie działa na wszystkich przeglądarkach, głównie na IE. Możesz samodzielnie zweryfikować, czy u Ciebie działa bez problemu, klikając w LINK. Dopuszczalne rozszerzenia to także JPG (gdy grafika nie posiada żadnej przeźroczystości) oraz PNG (gdy grafikę obejmuje jakiś element na przeźroczystym tle), ale warto wiedzieć, że nie osiągną one tak niskiej wagi jak WEBP.
Pamiętaj, że jeśli pojawi Ci się w międzyczasie jakieś pytanie, to służymy pomocą!