Co to jest optymalizacja obrazów?

Obrazy tworzone w programach takich jak Photoshop i Illustrator wyglądają niesamowicie, ale często rozmiary plików są bardzo duże. Dzieje się tak dlatego, że obrazy są wykonane w formacie, który ułatwia manipulowanie nimi na różne sposoby.

 

Przy rozmiarach plików większych niż kilka megabajtów na obraz, jeśli umieścisz te pliki w swojej witrynie, ładowanie będzie bardzo powolne.

Optymalizacja obrazów w Internecie oznacza zapisywanie lub kompilowanie obrazów w formacie przyjaznym dla sieci, w zależności od tego, co zawiera obraz.

Obrazy przechowują dane inne niż piksele, które widzimy na ekranie. Dane te mogą dodać niepotrzebnego rozmiaru do obrazu, co prowadzi do dłuższych czasów ładowania, gdy użytkownik czeka na pobranie obrazu.

Pod względem optymalizacji kosztów i korzyści Twoje obrazy powinny znajdować się w pobliżu optymalizacji szybkości strony, jeśli nie masz już zoptymalizowanych.

Jak to działa?

Mówiąc prościej, optymalizacja obrazu działa poprzez usunięcie wszystkich niepotrzebnych danych zapisanych w obrazie, aby zmniejszyć rozmiar pliku obrazu w zależności od miejsca, w którym jest on używany w witrynie.

Optymalizacja obrazów w Internecie może zmniejszyć całkowity rozmiar strony do 80%.

Istnieją dwie formy kompresji, które musimy zrozumieć, Lossy i Lossless.

Obrazy zapisane w formacie stratnym będą wyglądać nieco inaczej niż oryginalny obraz po zdekompresowaniu. Pamiętaj, że jest to widoczne tylko z bliska. Stratna kompresja jest dobra dla sieci, ponieważ obrazy wykorzystują niewielką ilość pamięci, ale mogą być wystarczająco podobne do oryginalnego obrazu.

Obrazy zapisane w bezstratnym formacie zachowują wszystkie informacje potrzebne do uzyskania oryginalnego obrazu. Z tego powodu te obrazy niosą o wiele więcej danych, a w zamian mają znacznie większy rozmiar pliku.

Możemy również zoptymalizować obrazy do internetu, zapisując je jako odpowiednie wymiary. Zmiana rozmiaru obrazu na stronie internetowej przy użyciu CSS jest pomocna, ale problem polega na tym, że przeglądarka internetowa pobierze cały oryginalny plik, a następnie zmieni jego rozmiar i wyświetli.

Czy możesz sobie wyobrazić zdjęcie w rozmiarze plakatu i użyć go jako miniatury? Mały obraz o wymiarach 20 na 20 pikseli zajmowałby tyle samo czasu, co oryginalny plakat, gdy przez cały czas ładowaliśmy obraz o wielkości 20 pikseli.

Dlaczego to jest ważne?

Głównym powodem, dla którego optymalizacja obrazów jest tak ważna, jest fakt, że 90% większości stron internetowych jest zależnych od grafiki i dlatego istnieje wiele plików graficznych. Pozostawienie tych zdjęć bez kompresji iw niewłaściwym formacie może drastycznie spowolnić czas ładowania strony internetowej.

Jak zoptymalizować swoje obrazy

Pełna optymalizacja obrazów może być całkiem sztuką do perfekcji, ponieważ istnieje wiele różnych obrazów, z którymi można się uporać. Oto najczęstsze sposoby optymalizacji obrazów w Internecie.

  • Zmniejsz białą przestrzeń wokół obrazów – niektórzy programiści używają białych znaków do wypełniania, co jest duże, nie ma. Przytnij zdjęcia, aby usunąć wszelkie spacje wokół obrazu i użyj CSS, aby zapewnić dopełnienie.
  • Użyj odpowiednich formatów plików. Jeśli masz ikony, punktory lub grafikę, która nie ma zbyt wielu kolorów, użyj formatu takiego jak GIF i zapisz plik z mniejszą ilością kolorów. Jeśli masz bardziej szczegółową grafikę, użyj formatu pliku JPG, aby zapisać obrazy i obniżyć jakość.
  • Zapisz swoje zdjęcia w odpowiednich wymiarach. Jeśli do zmiany rozmiaru obrazów używasz HTML lub CSS, zatrzymaj się właśnie tam. Zapisz obraz w wybranym rozmiarze, aby zmniejszyć rozmiar pliku.

Aby zmienić rozmiar zdjęć, będziesz musiał użyć jakiejś formy programu. Do podstawowej kompresji można użyć prostego programu do edycji, takiego jak GIMP. Aby uzyskać bardziej zaawansowaną optymalizację, będziesz musiał zapisać określone pliki w Photoshopie, Illustratorze lub Fireworks.

Jedna myśl na temat “Co to jest optymalizacja obrazów?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *