Jak zoptymalizować obrazy, zdjęcia, zdjęcia?

  1. Optymalizacja rozmiaru obrazu
  2. Oprogramowanie do optymalizacji obrazu
  3. Optymalizacja obrazu dla wyszukiwarek

Już to powiedzieliśmy   Style CSS   i   Skrypty JavaScript pożądane do kompresji   przed dodaniem do witryny

Już to powiedzieliśmy Style CSS i Skrypty JavaScript pożądane do kompresji przed dodaniem do witryny. W postaci skompresowanej ważą mniej, a zatem mniejszy ciężar będzie musiał przejść na użytkownika. Ta sama sytuacja z obrazami. Jeśli obraz załadowany na stronie ma dużą wagę, nie oczekuj, że ładuje się szybko. Dlatego konieczne jest zoptymalizowanie i skompresowanie obrazów przed dodaniem do witryny. Poniżej przyjrzymy się, jak zoptymalizować obrazy dla witryny.

Optymalizacja rozmiaru obrazu

Rozmiar pobranego obrazu bardzo rzadko pokrywa się z rozmiarem, w jakim zostanie pokazany użytkownikowi końcowemu. Na przykład obrazy w mojej witrynie, które są dodawane do artykułu przy użyciu CSS lub HTML, są skompresowane do szerokości 512 pikseli. Pozwala to zachować proporcję szerokości do wysokości. W artykule użytkownik widzi obraz o szerokości 512 pikseli. Jeśli obraz ma mniej niż 512 pikseli szerokości, obraz będzie wyświetlany w oryginalnym rozmiarze. Wszystko wydaje się być złapane. Ale po raz kolejny obciążamy serwer i zmuszamy go do kompresji obrazu. Jeśli przed załadowaniem zmienimy szerokość obrazu na 512 pikseli, zachowując proporcje, pozbawiamy serwer potrzeby napinania się na ten temat. W rezultacie strona otworzy się szybciej, do czego dążymy.

Ale z drugiej strony nie zapominaj o tym, że zazwyczaj zdjęcia można otwierać i przeglądać. Jeśli na twojej stronie użytkownicy często oglądają zdjęcia bardziej szczegółowo, to jego rozmiar lepiej nie zmniejszać, ale po prostu optymalizować obraz bez utraty jakości.

W celu zmniejszenia rozmiaru obrazu jest idealny program Microsoft Paint , który jest przeznaczony dla wszystkich, którzy korzystają z systemu operacyjnego Windows. Po otwarciu obrazu w tym edytorze kliknij przycisk Zmień rozmiar . Odpowiedzią na tę akcję będzie następujące okno:

Tutaj musisz wybrać pole pikseli i określić szerokość obrazu, który potrzebujesz. Jeśli nie zapomniałeś zaznaczyć elementu Zapisz proporcje , Twój obraz zostanie zmniejszony o zachowane proporcje. Czego potrzebujemy.

Oprogramowanie do optymalizacji obrazu

Istnieją dwie metody kompresji obrazów:

  1. Kompresja stratna
  2. Kompresja bezstratna

Więcej niż pewność, że wszyscy jesteśmy zainteresowani kompresją obrazu bez strat. Do tych celów istnieje znaczna liczba programów. Opowiem Ci o programie Riot, który został specjalnie zaprojektowany do optymalizacji obrazów. Ten mały i dość szybki program radzi sobie ze swoim zadaniem. Interfejs programu jest bardzo prosty:

Musisz przenieść oryginalny obraz do lewego okna za pomocą myszy. Zaraz po tym zobaczysz zoptymalizowany obraz w prawym oknie. Jednocześnie rozmiar obrazu zostanie wskazany nad każdym oknem, dzięki czemu można łatwo kontrolować poziom kompresji. Żadne inne gesty nie są potrzebne. Jedyną rzeczą, która może Cię zainteresować, jest suwak Jakość. Przesuwając go bliżej zera, zmniejszysz jakość obrazu, ale jednocześnie bardziej skompresujesz obraz. Zalecam pozostawienie tego ustawienia na poziomie 80 procent, które są domyślnie ustawione. W tym trybie optymalizacja obrazów jest najbardziej odpowiednia i odpowiednia dla naszych potrzeb. Pozostaje tylko zapisać zoptymalizowany obraz i przesłać go na stronę.

Optymalizacja obrazu dla wyszukiwarek

Optymalizacja rozmiaru obrazu i jego kompresja sprawi, że Twoja strona będzie szybsza i wyższa w wynikach wyszukiwania. Wszystko to można zrobić bez żadnych strat. Ponadto optymalizacja obrazu jest zaleceniem znaczników ALT i TITLE wewnątrz znacznika IMG, w którym obraz jest połączony. Znacznik ALT powinien więc zawierać alternatywny tekst, który będzie wyświetlany, gdy wystąpią problemy z wyświetlaniem obrazu, co oznacza, że ​​treść tego znacznika powinna całkiem dobrze oddać istotę obrazu. Ale w tagu TITILE najlepiej jest użyć słowa kluczowego, które jest zoptymalizowane dla całego artykułu i strony witryny. Powodzenia w optymalizacji obrazu.