Jak zoptymalizować obrazy internetowe

Chcesz, aby Twoi klienci przestali pytać „Dlaczego szybkość mojej strony jest taka zła?”. Te proste kroki zapewnią Ci tworzenie wysokiej jakości obrazów, które nie są zbyt duże.

Problem

Właśnie utworzyłeś nową witrynę i zoptymalizowałeś wszystko, co możliwe, w tym niestandardowe rozmiary obrazów, a następnie przekazujesz ją użytkownikowi. Dwa tygodnie później otrzymujesz komunikat „Dlaczego szybkość mojej strony jest taka zła?” lub „Dlaczego ładowanie strony trwa tak długo?” pytania. Wchodzisz i sprawdzasz stronę i dowiadujesz się, że zdjęcia są ogromne! Jestem pewien, że każdy programista był już na tym stanowisku. Trudno sobie z tym poradzić w obecnym klimacie obrazów o wysokiej rozdzielczości, które pochodzą z lustrzanek cyfrowych, telefonów i wyświetlaczy siatkówki, ale mam nadzieję, że ten post obejmie kilka bardzo prostych rzeczy, które można wprowadzić, aby uniknąć niektórych z tych problemów. Ostatecznie nawet jeden zbyt duży obraz może poważnie obniżyć ocenę szybkości strony.

Idealna sytuacja na świecie

Przed rozpoczęciem budowy witryny porozmawiaj z projektantem, aby upewnić się, że wszystkie obrazy w projekcie mają standardowe proporcje obrazu. Przycinanie obrazu nie powinno wtedy stanowić problemu, jeśli odpowiednio ustawisz niestandardowe rozmiary obrazu. Spróbuj użyć 3:2, 4:3 lub 16:9, ponieważ są to standardowe proporcje aparatu. Jeśli nie jest to możliwe, a do przebudowy będziesz używać obrazów z bieżącej witryny, sprawdź, jakie są proporcje i zaprojektuj je odpowiednio, aby je uwzględnić, w przeciwnym razie wystąpią pewne problemy w niezbyt odległym przyszłość.

Ogranicz rozmiar przesyłanego pliku

Istnieje wiele wtyczek, które pozwalają to kontrolować; tak wiele, że ich nie wymienię, ale proste wyszukiwanie pokaże, ile ich jest. Wtyczki te występują w wielu formach, ale wybrałbym najprostszą z możliwych. Zwykle dodają dodatkową opcję do ustawień/opcji multimediów w WordPressie, którą można ustawić po zalogowaniu się jako administrator i która będzie wyglądać podobnie do poniższego obrazu.

Jeśli nie chcesz więcej wtyczek, możesz to również zrobić, podłączając się do 'wp_handle_upload_prefilter'. Dobry przykład wykorzystania tego można zobaczyć w tym poście na blogu u dołu strony.

W przypadku obrazów, które są wywoływane przy użyciu zaawansowanych pól niestandardowych, możesz dodać maksymalne-minimalne wymiary obrazu/rozmiar pliku i ograniczyć się do określonych typów plików w interfejsie użytkownika. Gorąco radzę ci to zrobić.

Można by pomyśleć, że wymuszenie maksymalnego rozmiaru przesyłania wystarczy, prawda? Cóż, niestety tak nie jest, to nie powstrzyma klienta przed przesłaniem obrazu 500kb, który ma tylko 100px x 100px, ani nie usunie danych EXIF ​​(meta) z pliku. Więc będziemy musieli zaimplementować kolejną warstwę sprawdzania.

Optymalizuj obrazy

Najlepszym sposobem na to jest skorzystanie z opcji zapisywania w programie Photoshop dla Internetu, ale nie możesz zagwarantować, że użytkownik będzie miał to oprogramowanie, więc mamy teraz dwie opcje:

Wtyczki

Dostępnych jest kilka dobrych wtyczek, a Smush jest jedną z lepszych, ponieważ doskonale nadaje się do optymalizacji wsadowej, a także umożliwia opcję maksymalnego rozmiaru przesyłanego pliku. W ustawieniach znajduje się dodatkowe pole wyboru do usuwania danych EXIF.

Optymalizacja obrazu online

Znowu jest ich wiele, ale TinyPNG jest jedną z najprostszych dostępnych opcji: prześlij plik i pobierz skompresowaną wersję. TinyPNG usuwa wszystkie dane EXIF.

Wciąż za mało?

Przygotowaliśmy kilka testów, które, miejmy nadzieję, rozwiążą problemy z obrazem, ale jestem pewien, że zauważyłeś już kilka problemów, które nadal mogą wystąpić:

• Maksymalny rozmiar pliku jest nadal zbyt duży dla niektórych małych obrazów
• Rzeczywisty rozmiar piksela może być większy niż faktycznie potrzebny
• Nie ma kontroli wizualnej ani porównania zoptymalizowanych obrazów, chyba że użytkownik ma dobre oprogramowanie do edycji obrazów
• Obraz ma niewłaściwy typ pliku

Niestety nie da się tego obejść i ustawiliśmy tak dużo, jak to możliwe, aby złapać wszelkie problemy. Jedynym sposobem, aby naprawdę rozwiązać ten problem, jest przeszkolenie użytkownika w zakresie typów plików i upewnienie się, że korzysta z oprogramowania do edycji obrazów.

Edukuj swoich użytkowników

Możliwe rozwiązania dla użytkownika

Nie są to w żadnym wypadku doskonałe sposoby na robienie rzeczy, ale powinny pomóc wszystkim zaangażowanym i zmniejszyć rozmiary plików obrazów:

Poznaj swoje typy plików

W tym poście jest zbyt wiele, ale jeśli chcesz przeczytać więcej na temat typów plików, ten post jest dobrym źródłem do dogłębnego przyjrzenia się tematowi. Jednak na potrzeby tego postu podzielę go tak prosto, jak to możliwe:

• Zdjęcie przedstawiające ludzi, krajobrazy itp. = JPG
• Wycięcie osoby lub produktu, które nakłada się na coś innego, czego nie ma w tle obrazu = PNG
• Infografika lub ikona = GIF lub PNG

Jeśli myślisz o wgraniu czegokolwiek innego, jak TIF, PSD lub AI jako pliku obrazu na swoją stronę internetową, ZATRZYMAJ SIĘ teraz.

Zwykły scenariusz przypadku

Oprogramowanie

• System operacyjny Windows przy użyciu programu Microsoft Paint

Obraz

• Zmaksymalizuj przeglądarkę, aby zobaczyć największy rozmiar widocznego obszaru, w którym używany jest obraz. Użyj narzędzia do wycinania Windows, aby obliczyć rzeczywisty rozmiar obrazu w pikselach
• Utwórz nowe płótno/dokument w MS Paint na podstawie wymiarów narzędzia do wycinania
• Dopasuj swój nowy obraz do nowego płótna
• Czy obraz wymaga przezroczystego tła?
• Tak ? Zapisz jako GIF lub PNG
• Nie ? Zapisz jako JPG
• Użyj TinyPNG do kompresji obrazu
• Prześlij skompresowany obraz

Najlepszy scenariusz

Oprogramowanie

• Dowolny system operacyjny korzystający z programu Photoshop

Obraz

• Zmaksymalizuj przeglądarkę, aby zobaczyć największy rozmiar widocznego obszaru, w którym używany jest obraz. Użyj narzędzia do przechwytywania ekranu (narzędzie mac), aby obliczyć rzeczywisty rozmiar obrazu w pikselach
• Utwórz nowe płótno/dokument w Photoshopie na podstawie wymiarów narzędzia do wycinania
• Dopasuj swój nowy obraz do nowego płótna
• Wybierz Zapisz dla internetu
• Upewnij się, że oglądasz obraz w 100%
• Czy obraz wymaga przezroczystego tła?
• Tak ? Wybierz GIF, PNG8 lub PNG24 z rozwijanego menu (po wykonaniu tej czynności zobaczysz zmianę jakości obrazu i rozmiaru pliku)
• Nie ? Wybierz JPG z menu rozwijanego
• Zmień różne ustawienia zależne od formatu obrazu, aż uzyskasz dobry kompromis między jakością a rozmiarem obrazu
• Wybierz menu rozwijane metadanych i nie wybierz żadnego
• Zapisz, a następnie prześlij na swoją stronę

Wniosek

Mamy nadzieję, że powinno to pomóc użytkownikowi lepiej zrozumieć, jak dodawać nowe obrazy do swojej witryny i zaoszczędzić dużo rozmiaru pliku. Wiem, że ten post nie obejmuje używania obrazów tła, siatkówki, SVG i wielu innych obrazów, ale jeśli opisane opcje zostaną zastosowane, nadal powinno to pomóc większości użytkowników.

Aby uzyskać dodatkową pomoc przy projektowaniu stron internetowych, skontaktuj się z naszymi ekspertami już dziś.

Jeśli potrzebujesz pomocy przy tworzeniu stron internetowych, nie wahaj się z nami skontaktować.