Optymalizuj obrazy w witrynie, aby przyspieszyć ładowanie strony

1. Gdzie robić zdjęcia na stronie
2. Jaki rozmiar jest lepszy
3. Jak zrobić zdjęcie o odpowiednim rozmiarze
4. Optymalizacja serwisu internetowego zdjęć
5. Wniosek

Dzięki zaostrzeniu wymagań dotyczących prędkości pobierania dokumentów internetowych i wzrostowi mobilnego ruchu w przestrzeni, optymalizacja obrazu stała się bardzo ważną rzeczą. Każdy plik w witrynie powinien się otworzyć tak szybko, jak to możliwe, aby użytkownik nie czekał minut, podczas gdy tekst artykułu jest załadowany wszystkimi obrazami.

Dla tych, którzy chcą skrócić czas pobierania i dla tych, którzy nadal nie wiedzą, jak zoptymalizować obrazy - ściągawki z wyjaśnieniami i algorytmem działania. Korzystamy z programów i usług - zmniejszamy rozmiar i wagę.

Gdzie robić zdjęcia na stronie

Niezbędne jest mimowolne zilustrowanie artykułów, ponieważ niewiele osób czyta dziś arkusze czystego tekstu. Ludzie skanują stronę oczami i zatrzymują się tam, gdzie jest zdjęcie, stół lub wybrane fragmenty.

Idealny, jeśli masz własne zdjęcia lub rysunki. Ale jednostki posiadają takie talenty i każdy potrzebuje zdjęć na stronie. Ponieważ najczęściej poszukujemy tematycznych ilustracji do artykułu w Internecie.

Ktoś zabiera ich na darmowe akcje fotograficzne, ktoś z Yandexu, ktoś używa odpowiedniego wyszukiwania z Google, ktoś wyciąga je z burżuazji. Tutaj każdy zdecyduje sam, ale nadal istnieją ogólne zalecenia.

Dobra rada

Nie powinieneś robić zdjęć ze znakami wodnymi innych osób i umieszczać znaku wodnego na tych, które pożyczyłeś. To jest kłopotliwe od właścicieli. Zwłaszcza, jeśli jest to fajny zasób, który można pozwać, a ten sąd wygra. Przykłady są już dostępne.

Po raz kolejny idealną opcją są własne zdjęcia. W szczególności, jeśli dotyczy to kursów mistrzowskich lub towarzyszących im zdjęć dowolnego procesu. Na szczęście każdy telefon ma aparat, który może robić bardzo dobrej jakości zdjęcia.

Pytanie o to, gdzie robić zdjęcia na tej stronie, przy tym zbliżeniu. Każdy webmaster decyduje o tym, co mu odpowiada: kupować zdjęcia, robić darmowe zdjęcia, robić zdjęcia lub pożyczać.

Jaki rozmiar jest lepszy

Rozmiar obrazów w witrynie zależy od aktualnie zainstalowanego szablonu (motywu). W każdym razie twoje zdjęcie nie powinno być szersze niż obszar zawartości. To przerwie projekt strony.

Obszar zawartości treści na stronie, który zapewnia układ szablonu dla treści artykułu.

Jak określić szerokość treści w witrynie?

Możesz określić maksymalny rozmiar obrazu za pomocą rozszerzenia przeglądarki Chrome w https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn/related?hl=en lub w programie Fscapture z jednego z moich artykułów . Jeśli nie masz tego programu, pobierz go i zainstaluj. Nie musisz żałować tej minuty.

Wystarczy wybrać część strony, w której znajduje się tekst, za pomocą narzędzia „Przechwyć prostokątny obszar”, a zobaczysz, ile pikseli szerokości ma obszar zawartości w szablonie.

Jest to maksymalna szerokość zdjęć. Mniejsza szerokość musi być zrobiona z kilku powodów:

1. Duży obraz trudno zoptymalizować bez utraty jakości.
2. Na ekranach mobilnych najbardziej wyraźne są obrazy o szerokości od 500 do 600 pikseli.

Jeśli nie musisz zwracać uwagi na drobne szczegóły, ten rozmiar jest wystarczający dla jasności.

Jeśli potrzebujesz rozłożyć obraz o dużej rozdzielczości (na przykład schematy), najlepiej jest użyć wtyczek, które otworzą go w pełnym rozmiarze z miniatury. Jedna z wtyczek Lightbox Plus ColorBox (opisy i ustawienia tutaj) lub Responsive Lightbox.

Drugi jest korzystniejszy, ponieważ nie wymaga konfiguracji i doskonale dostosowuje się do ekranów mobilnych.

Jak zrobić zdjęcie o odpowiednim rozmiarze

Istnieje wiele usług online i programów graficznych, w których można zmienić rozmiar oryginalnego obrazu.

Sugeruję używanie Photoshopa, który możesz pobrać z mojego linku i zainstalować go na swoim komputerze, jeśli jeszcze go nie masz. Faktem jest, że zdjęcia są zapisywane w najlepszej jakości przy rozsądnej redukcji wagi.

Zmniejszenie rozmiaru algorytmu w Photoshopie:

1. Plik - Otwórz - wybierz zdjęcie lub zdjęcie.
2. Obraz - Rozmiar obrazu - zobacz rozmiar źródła. Zmieniamy rozmiar obrazu do wymaganego.
   

   Uwaga!

   Zmieniamy wartość tylko na szerokości. Jeśli zaznaczone są pola wyboru Skaluj i Zachowaj proporcje, obraz zostanie proporcjonalnie zmniejszony i nie będzie zniekształcony.

3. Plik - Zapisz jako - zapisz obraz w formacie JPEG. Ten format jest łatwiejszy niż ten sam, ale w PNG i pozwala określić jakość zapisanego obrazu (jeśli nie masz strony internetowej fotografa lub artysty, wystarczy 6-7). Widzimy również aktualną wagę naszego obrazu.

   Uwaga!

   W świetle najnowszych wymagań Google musimy dążyć do tego, aby zdjęcia na stronie nie ważyły ​​więcej niż 40 kb. Ale bez fanatyzmu! Upewnij się, że obraz nie wygląda na ziarnistość i obraz o akceptowalnej jakości.

4. Wybieramy jakość ochrony.

Zaleca się zapisanie w wybranym folderze (aby nie szukać mniejszego obrazu w całym komputerze) i pod inną nazwą (najlepiej używać liczb lub łaciny).
Dzięki temu nie stracisz źródła i nie uzyskasz tego samego obrazu, ale w odpowiednim rozmiarze do umieszczenia na stronie. Ale to nie wszystko.

Optymalizacja serwisu internetowego zdjęć

Na etapie redukcji zdjęć za pomocą programu Photoshop optymalizacja obrazu nie kończy się. Nadal możemy złagodzić jej wagę. Jest wiele usług, ale używam https://tinypng.com/ i idealnie mi to odpowiada.

1. Doskonale obsługuje formaty JPEG i PNG, zachowując dobrą jakość.
2. Usuwa wszystkie kody firm trzecich, czyści zoptymalizowany obraz ze śmieci.
3. Zapisuje te same nazwy, pod którymi załadowałem je do usługi (nie ma potrzeby zmiany nazwy, usuwania dodatkowych znaków przypisanych przez usługę).

Algorytm działań:

Nie zapomnij oczyścić niepotrzebnych plików po pracy, w przeciwnym razie będziesz miał niesamowitą liczbę archiwów i folderów z numerami.

Wniosek

Początkowo mieliśmy zdjęcie sosnowego lasu z aparatem o dużych rozmiarach i wadze. Po zmniejszeniu szerokości w Photoshopie otrzymaliśmy obraz ważący 134 kb. Jest to również dużo do opublikowania i zajmuje dodatkowe sekundy, aby załadować stronę.

Po optymalizacji usługi online zmniejszyliśmy zdjęcie o ponad 40 kb i w rezultacie uzyskaliśmy obraz o wielkości 99 kb. To jest już do zaakceptowania, ale wciąż trochę za dużo.

Pokazałem przykład przetwarzania i optymalizacji zdjęć, które pierwotnie były doskonałej jakości i dlatego bardzo ważyły. Ale nie mam strony internetowej fotografa, nie potrzebuję zdjęć w wysokiej rozdzielczości. Dlatego biorę kod źródłowy łatwiej i mniej. Po wszystkich manipulacjach zwykle osiągam wagę 40-50 kb, jeśli służą tylko dla jasności.

Dzięki schematom i skanom wyjaśniającym musisz użyć dużych obrazów, które umieściłem w artykule w miniaturze. Po kliknięciu użytkownik zobaczy obraz w sposób, w jaki przesłałem go na serwer za pomocą edytora administracyjnego.

Zwróć uwagę

Jeśli Twoje zoptymalizowane obrazy są publikowane o wadze nieprzekraczającej 40 kb, strona tylko na tym skorzysta. Strona ładuje się szybko, użytkownik nie opuszcza jej, zmęczony czekaniem. Mniejszy będzie odsetek awarii, a zatem pozycja witryny jako całości będzie wyższa. Wyszukiwarki będą bardziej skłonne oferować na żądanie Twoją witrynę, a otrzymasz więcej odwiedzających.

Optymalizacja obrazów na stronie - moment jest dokładnie taki sam jak projekt artykułu i samego artykułu, który powinien w pełni otworzyć temat.