Cześć wszystkim! W tym poście chcę porozmawiać o tym, jak można zoptymalizować obrazy dla witryny . Co to jest optymalizacja obrazu i dlaczego w ogóle go optymalizować? Te informacje będą przydatne zwłaszcza dla początkujących użytkowników, ponieważ to ci, którzy grzeszą, ładując zdjęcia o ogromnych rozmiarach. Często, gdy wynajmuję stronę internetową, klient musi mu wyjaśnić o zdjęciach, które ładowanie oryginalnych zdjęć jest złe. Dlatego postanowiłem napisać ten post, jestem pewien, że będzie przydatny dla wielu.
Przygotujemy zdjęcia do przesłania na stronę za pomocą Adobe Photoshop. Ogólnie rzecz biorąc, istnieje wiele edytorów do pracy z plikami graficznymi, ale pracuję z Photoshopem, więc pokażę ci, jak to zrobić w Photoshopie.
Zanim przejdę dalej, pozwólcie, że najpierw wyjaśnię, czym jest optymalizacja obrazu i dlaczego muszą być zoptymalizowane.
Optymalizuj obrazy do Internetu, tj. na stronie - jest zachowanie obrazu w optymalnym stosunku jakości do jego wielkości. Innymi słowy, konieczne jest znalezienie pośredniej podstawy, w której jakość obrazu nie zmienia się wraz ze spadkiem jego wielkości (waga pliku). To znaczy Podczas optymalizacji obrazu ludzkie oko nie odczuje różnicy w jakości, ale rozmiar pliku będzie minimalny.
Teraz zobaczmy, dlaczego optymalizujemy obrazy dla witryny . Obecne na stronie, powiedzmy, w każdej recenzji jest 10 zdjęć. W wersji niezoptymalizowanej każde zdjęcie waży ~ 1 MB. To znaczy Wyobraź sobie, że te zdjęcia zostały wykonane dobrym aparatem (chociaż w rzeczywistości takie zdjęcia ważą jeszcze więcej). Biorę tutaj minimum. Wszystkie 10 zdjęć, które przesyłamy na stronę. W rezultacie strona przeglądu będzie ważyć co najmniej 10 MB. Przynajmniej dlatego, że witryna może mieć inne grafiki związane z projektem. Wyobrażasz sobie załadowanie strony w 10 MB. Rozumiem, że dzisiaj każdy w domu ma przewodowy Internet i Wi-Fi. Czy myślałeś o mobilnych użytkownikach Internetu? Wydaje mi się, że wielu użytkowników po prostu nie może czekać na załadowanie strony.
Teraz wyobraźmy sobie, że te same zdjęcia po optymalizacji będą ważyć nie 1 MB, ale 100 KB. To dziesięć razy mniej. W rezultacie wszystkie zdjęcia będą ważyć łącznie 1 MB. 1 MB pobrania znacznie szybciej na urządzeniu mobilnym niż 10 MB.
Punktem tym nie mogą być użytkownicy mobilni. Musimy zrobić wszystko, aby strony stron ładowały się tak szybko, jak to możliwe. Teraz, gdy zrozumiemy, że po prostu konieczne jest zoptymalizowanie obrazów, przejdźmy do samej procedury.
Na przykład zrobię każde zdjęcie. Spójrzmy na jego rozmiar w oryginale.
Jak widać na zrzucie ekranu, obraz waży 1,47 MB. To dużo. Wysyłanie takiej strony jest niemożliwe. Chcę też natychmiast zwrócić uwagę na rozdzielczość obrazu, tj. jego rozmiar. Jest określony w pikselach.
Widzimy rozdzielczość - 2560 x 1600 pikseli. To także dużo. Po co przesyłać taki obraz, jeśli nadal będzie zmniejszany do szerokości głównego kontenera witryny. Zazwyczaj jest to nie więcej niż 1200 pikseli. Jeśli zdjęcie powinno się otworzyć w lightboxie, tj. wyskakuj po kliknięciu, wtedy rozdzielczość nie powinna przekraczać 1200 pikseli. Dlatego zmniejszamy obraz w 2 etapach - najpierw zmniejszamy jego rozdzielczość, a następnie zapisujemy go dla urządzeń internetowych.
Otwórz żądany obraz w Photoshopie: Plik -> Otwórz . Następnie zmniejsz rozmiar obrazu: Obraz -> Rozmiar obrazu.
Następnie zapisz już zredukowany plik w formacie JPG: Plik -> Zapisz dla Internetu lub naciśnij kombinację klawiszy Ctrl + Shift + Alt + S. W oknie, które zostanie otwarte, wybierz format - JPG i ustaw jakość - Wysoka - 60 . Jakość - 60 - jest to dokładnie optymalny stosunek jakości do wagi pliku.
Zwróć uwagę na wagę pliku po zapisaniu - 250,9 KB. Ale faktycznie było 1,47 MB, waga została zmniejszona nieco ponad 5 razy.
Dlaczego wybraliśmy format JPG , a nie PNG lub GIF ? Format JPG to taki, w którym optymalizacja pliku obrazu zostanie zmaksymalizowana. Należy jednak pamiętać, że ten format nie obsługuje przejrzystości. Aby wspierać przezroczystość, należy użyć formatu PNG, ale waga pliku w tym formacie wzrasta kilka razy. Format GIF jest używany w przypadku małych plików (ikon) lub animowanych obrazów.
Sposób, który omówiliśmy powyżej, pozwala zoptymalizować obrazy pojedynczo. Oczywiście w Photoshopie działa funkcja przetwarzania masowego, ale nigdy się tego nie domyśliłem. Do masowej zmiany rozmiaru obrazów używam małego programu - XnView MP. Jestem nagrał mały przegląd wideo aby pracować z tym programem, możesz to zobaczyć. Program był szczególnie zadowolony z faktu, że dane wyjściowe były już zoptymalizowanymi plikami dla sieci Web i okazało się, że XnView MP optymalizuje obrazy lepiej niż Photoshop.
I na koniec chciałbym powiedzieć, że wiele witryn wprowadziło już funkcję przycinania zdjęć podczas ładowania. To znaczy zdjęcia zostaną przycięte przez podane ustawienia. Ale kiedy sprawdzałem skrypt pod kątem ładowania i kadrowania obrazów, nie optymalizuje on obrazów zarówno w Internecie, jak i na przykład w Photoshopie. To znaczy Zrobiłem zdjęcie, które zostało już przetworzone przez program ładujący i pojechałem nim przez Photoshop. W rezultacie udało mi się jeszcze raz zmniejszyć rozmiar.
Na przykład taki skrypt do pobierania zdjęć znajduje się w silniku WordPress. Niemniej jednak, niezależnie od tego, kim byli downloaderzy, zawsze zapisuję wszystkie zdjęcia na stronie w Photoshopie dla sieci i dopiero potem można uzyskać zoptymalizowany obraz na stronie nie kosztem jakości.
To wszystko, co chciałem powiedzieć o optymalizacji obrazów na stronie. Jeśli znasz jakieś inne programy do optymalizacji, będę zadowolony, jeśli udostępnisz je w komentarzach.
Cześć wszystkim Do zobaczenia ponownie!
Sprawdzanie pisowni
Co to jest optymalizacja obrazu i dlaczego w ogóle go optymalizować?Czy myślałeś o mobilnych użytkownikach Internetu?
