Jak zmniejszyć rozmiar JPEG i innych plików graficznych?

Obrazy, których używasz na swojej stronie, są jednym z najważniejszych elementów. Nie tylko chcesz mieć atrakcyjne wizualnie obrazy, ale także nie chcesz, aby te obrazy były tak duże, że spowalniają czas ładowania witryny. Jednym z głównych powodów opóźnienia witryny jest to, że obrazy w niej zawarte nie zostały zmienione w celu uzyskania optymalnej wydajności witryny.

W tym artykule omówimy ręczne metody zmniejszania rozmiarów obrazów w programie Photoshop, w tym zmianę typu pliku, zmianę rozmiaru i kompresowanie plików za pomocą funkcji Zapisz dla Internetu. Jeśli ci, którzy szukają czegoś bardziej zautomatyzowanego, przyjrzymy się również niektórym wtyczkom i opcjom internetowym.

Subskrybuj nasz kanał YouTube

Zmiana typu pliku

„Rozmiar pliku” dla pliku obrazu odnosi się do liczby pikseli na cal. Ogólnie rzecz biorąc, im więcej pikseli na cal, tym więcej informacji zawiera plik, a tym samym większy jego rozmiar.

Dwa najpopularniejsze typy plików obrazów to JPG i PNG.

• PNG – Portable Network Graphics – Ten typ pliku jest najczęściej używany w przypadku plików graficznych, takich jak logo, ikony, ilustracje i tekst. Podczas edycji w aplikacji do edycji zdjęć, takiej jak Photoshop, pliki te nie tracą wiele danych podczas manipulowania nimi lub kompresji. Z tego powodu są określane jako „bezstratne”. Z tego powodu pliki te mają zwykle większy rozmiar.
• JPEG – Joint Photographic Experts Group – Jest to najpopularniejszy typ pliku, jaki można znaleźć dla większości zdjęć w Internecie. Ten typ pliku może zarządzać milionami kolorów, może być mocno skompresowany przy zachowaniu jakości. Są one określane jako „stratne”, ponieważ proces ich kompresji usuwa piksele z obrazu.

Każdy typ pliku może działać. To, który wybierzesz, naprawdę zależy od Twojej witryny, liczby i rodzaju zdjęć, które wybierzesz.

Oto przykładowe zdjęcie. Jego oryginalny format to plik JPG.

Użyłem polecenia Plik>Zapisz jako w Photoshopie, wybrałem format PNG i zakończyłem funkcję zapisywania.

Kiedy zmieniłem typ pliku, rozmiar pliku wzrósł z 646 MB do 1,3 KB. Jak wspomniano powyżej, pliki PNG są zazwyczaj większe, więc w przypadku tego typu obrazu z dużą ilością kolorów i szczegółów, lepiej pozostać przy wersji JPEG, aby zapewnić szybsze ładowanie. Jeśli wiesz, że Twój obraz musi mieć możliwość skalowania większego bez utraty rozdzielczości, skorzystaj z wersji PNG.

Pamiętaj, że dostępnych jest wiele innych formatów plików. Skupiłem się na JPEG i PNG, ponieważ są one najbardziej popularne.

Ręczna zmiana rozmiaru w Photoshopie

W Photoshopie możesz użyć funkcji Obraz>Rozmiar obrazu, aby ręcznie zmienić rozmiar obrazu. Narzędzie wygląda tak:

Możesz zobaczyć, że bieżący rozmiar obrazu i wymiary w pikselach są odnotowane w górnej części narzędzia. Wszelkie zmiany, które tu wprowadzisz, zmienią rozmiar.

Dopasuj do to rozwijana lista zawierająca wstępnie ustawione rozmiary i ustawienia pikseli.

Jeśli wybiorę pierwszą opcję z tej listy, aby dostosować wymiary i piksele na cal (ppi), mogę zobaczyć, jak zmieni się rozmiar pliku.

Możesz poeksperymentować z tymi ustawieniami, aby określić, czy standardowy rozmiar z listy rozwijanej będzie działać, czy też musisz ręcznie zmienić opcje szerokości, wysokości lub rozdzielczości, aby uzyskać żądany rozmiar.

Zapisz dla funkcji internetowej

Zapisz dla Internetu różni się od opcji Zapisz jako tym, że opcja WWW usuwa metadane (szczegóły dotyczące typu i pochodzenia obrazu) z pliku przed zapisaniem. Ta funkcja jest przeznaczona specjalnie dla obrazów, które będą wyświetlane w Internecie, więc może to być bardzo szybki sposób na zmianę rozmiaru przy zachowaniu jakości.

Znajdź opcję Zapisz dla Internetu, przechodząc do Plik> Eksportuj> Zapisz dla Internetu:

Gdy otworzy się okno Zapisz dla Internetu, zauważysz kolejną zaletę tej funkcji. Jeśli wybierzesz kartę 2 na górze u góry, zobaczysz porównanie oryginalnego obrazu obok obrazu zmienionego.

Stąd użyj ustawień wstępnych w prawym górnym rogu, aby wybrać format JPG i dostosować jakość według własnego uznania. Po wprowadzeniu zmian możesz sprawdzić, czy nowy plik spełnia Twoje standardy jakości, korzystając z podglądu obrazu, a także sprawdzić zmianę rozmiaru pliku, przeglądając dane pod każdym obrazem:

Pamiętaj, że możesz również zmienić rozmiar, korzystając z pól szerokości i wysokości w prawym dolnym rogu. Ponieważ ten artykuł dotyczy w szczególności zmiany rozmiaru, nie omawiamy innych opcji wyświetlanych na ekranie Zapisz dla Internetu, ale możesz przeczytać tutaj, aby uzyskać bardziej szczegółowe informacje.

Narzędzia do optymalizacji obrazu WordPress

Photoshop to świetna opcja, jeśli chcesz samodzielnie obracać pokrętłami, aby samodzielnie zmniejszyć rozmiar pliku obrazu. Jeśli szukasz czegoś bardziej zautomatyzowanego, aby pomóc w zmianie rozmiaru obrazów, istnieje wiele opcji wtyczek WordPress, które mogą pomóc. Oto lista kilku popularnych opcji i krótki opis ich zalet:

Imagify – zoptymalizuj wszystkie swoje obrazy za jednym razem, z łatwością zmieniaj rozmiar i przywracaj zdjęcia do ich oryginalnych wersji, gdy zajdzie taka potrzeba. Jest też niedrogi. Ta wtyczka jest do ściągnięcia za darmo i zawiera 20 MB miejsca na pliki. Inne opcje to 5 USD miesięcznie za 500 MB i 10 USD miesięcznie za nieograniczoną przestrzeń.

ShortPixel – Brak limitu rozmiaru pliku i jeden klucz API dla wielu witryn pozwalają na doskonałe wykorzystanie tej wtyczki. Oferują również plany jednorazowe i miesięczne zapewniające elastyczność budżetu.

Optimole – dla osób zorientowanych na dane, Optimole oferuje pulpit nawigacyjny, na którym można przeglądać statystyki optymalizacji. Ich bezpłatny plan pozwala na 5000 odwiedzających miesięcznie i nieograniczoną przepustowość.

Aby uzyskać pełniejsze porównanie tych opcji i kilku innych, zobacz ten artykuł.

Zasoby internetowe do optymalizacji obrazu

Jeśli brakuje Ci czasu i/lub pieniędzy, istnieje wiele bezpłatnych narzędzi do optymalizacji obrazu online.

Compressjpg umożliwia przesyłanie wielu plików i zmianę ich rozmiaru jednocześnie. Posiada również funkcję, która konwertuje zdjęcia w formacie HEIC iPhone'a na JPEG. Inne podobne strony to Tinypng oraz Image Compressor.

Canva Pro to kolejna popularna witryna, która nie tylko zmienia rozmiar, ale także pozwala projektować i animować obrazy, a także formatować je do użytku w Internecie lub mediach społecznościowych. Jego układ jest intuicyjny i łatwy w użyciu.

Zawijanie

Nie lekceważ znaczenia optymalizacji obrazów. Powolne witryny nie tylko wyłączają widzów, ale także nie przyciągają uwagi w wyszukiwarce Google. Szybko ładujące się, ostre obrazy mogą zapewnić coś, co wyróżnia Twoją witrynę na tle innych. Zoptymalizowana witryna sprawi, że odwiedzający będą wracać po więcej.

Czy używasz którejś z tych metod do zmiany rozmiaru obrazów? Jeśli nie, to jak myślisz, co spróbujesz najpierw? Powiedz nam w komentarzach!

Polecane zdjęcie za pośrednictwem Prihanto Edi / shutterstock.com