Optymalizacja grafiki dla internetu


Optymalizacja grafiki dla internetu jest jednym z kluczowych elementów poprawiających szybkość wczytywania i dostępność stron internetowych.

Na wielkość obrazka ma wpływ kilka czynników:

  • wymiar obrazka w pikselach
  • rozdzielczość obrazka w pikselach
  • format w którym jest zapisany
  • jakość grafiki

Sposoby na optymalizację grafiki dla internetu

      • Dostosuj wielkość grafiki do aktualnych potrzeb – bardzo częstym błędem użytkowników systemów cms jest dodawanie zdjęć o zbyt dużych rozmiarach. Jeśli przeglądarka wyświetla zdjęcie w rozmiarze np. 160px na 90px to przygotuj zdjęcie w takim rozmiarze. Nie idź na łatwiznę i nie ładuj tam nie potrzebnie większego, często zajmującego po kilka MB zdjęcia. Czemu to takie ważne? Ponieważ zbyt duże, niezoptymalizowane zdjęcia znacznie wydłużają czas ładowania strony. Jest to szczególnie istotne dla użytkowników korzystających z wolniejszego łącza lub z urządzeń mobilnych. Użytkownik niepotrzebnie ściąga zdjęcie, które jest czasem kilkadziesiąt razy większe niż powinno.
      • Wybierz odpowiedni format zapisu
        • Format JPG doskonale sprawdza się do zapisu naturalnych statycznych obrazów – fotografii. Dzięki zastosowaniu kompresji stratnej możesz dodatkowo obniżyć rozmiar zdjęcia, bez zauważalnej utraty jego jakości. Jeśli używasz Photoshopa, przy zapisywaniu zdjęcia warto jest korzystać z opcji „Zapisz dla Internetu”, gdzie w prosty sposób ustawisz odpowiednią dla Ciebie jakość obrazu.

          Zdjęcie nr 1 zostało zapisane jako JPG w 100% jakości. Zdjęcie nr 2 i nr 3 zostały zapisane z obniżoną jakością.

          Tort
          Zdjęcie nr 1 – 197 KB- jakość 100%
          Tort
          Zdjęcie nr 2 – 43 KB – jakość 50%
          Tort
          Zdjęcie nr 3 – 28 KB – jakość 30%
        • Format PNG – dzięki zastosowaniu ponad 16 milionowej palecie kolorów doskonale nadaje się do zapisu ikon, grafik z przeźroczystymi elementami oraz logotypów. Format ten dobrze sprawdza się również przy zapisie elementów tekstowych z jednolitym tłem takich jak np. buttony. Do zapisu fotografii używaj formatu jpg, do zapisu innych elementów niż fotografie używaj formatu png.
      • Wybierz odpowiednią rozdzielczość
        Rozdzielczość obrazka – to zagęszczenie pikseli na cal długości. Często mylona jest z rozmiarem obrazka. Optymalna rozdzielczość grafiki dla internetu to 72ppi (piksel per inch). Grafika przeznaczona dla druku powinna mieć rozdzielczość przynajmniej 300ppi.
      • Skorzystaj z darmowych narzędzi do optymalizacji zdjęć
        Jeśli nie posiadasz programu graficznego, którego możesz użyć do optymalizacji grafiki skorzystaj z darmowych narzędzi on-line. Jednym z moich ulubionych jest tinypng.com.
Pies
Zdjęcie nr 1 – 219 KB – niezoptymalizowane
Pies
Zdjęcie nr 2 – 63 KB – zoptymalizowane przez tinypng.com