Optymalizacja obrazów w Internecie: praktyczny przewodnik

Mówią, że obraz jest wart tysiąca słów, co jest jednym z powodów, dla których obrazy są tak ważne w e-commerce. Ponieważ klient nie jest w stanie podnieść, dotknąć i sprawdzić produktu, w dużym stopniu polega na obrazach, aby zrozumieć kolor, jakość i historię produktu.

Nie trzeba więc dodawać, że Twoje obrazy muszą być wysokiej rozdzielczości i ostre. Ale to ma swoją cenę. Duże obrazy o wysokiej rozdzielczości mogą mieć ogromne rozmiary plików. Umieść kilka z nich na swojej stronie, a to żwawe doświadczenie poruszania się po sklepie internetowym może skończyć się uczuciem pływania przez melasę. Nie tylko spowoduje to odrzucenie odwiedzających, ale z czasem Google również to zauważy, co może wpłynąć na Twoje SEO.

W e-commerce bardzo ważne jest znalezienie odpowiedniej równowagi między jakością obrazu a rozmiarem pliku obrazu podczas zapisywania obrazu w witrynie. W tym poście pokażemy Ci, jak to zrobić.

Jeśli wiesz, że robisz zdjęcie produktu i przesyłasz je bezpośrednio do swojego sklepu, ten samouczek jest dla Ciebie. Jeśli nie masz formalnej wiedzy ani procesu zapisywania obrazów z myślą o rozmiarze pliku, ten samouczek jest dla Ciebie. Jeśli Twoja witryna zawiera mnóstwo obrazów, a rzeczy są powolne, ten samouczek jest dla Ciebie. Jeśli jeszcze nie zacząłeś budować swojego sklepu internetowego, ten poradnik jest specjalnie dla Ciebie.

Gotowy do optymalizacji obrazów?

Opcje typu pliku obrazu

Istnieją trzy główne typy plików, na których będziemy się koncentrować przy zapisywaniu obrazów zoptymalizowanych pod kątem internetu: GIF, JPG i PNG. Każdy typ pliku ma swoje mocne i słabe strony i bardzo ważne jest, aby je znać i pamiętać podczas zapisywania obrazu.

Praca z plikami JPG

Pliki JPG (znane również jako JPEG) to najpopularniejszy typ plików obrazów w Internecie. Pliki JPG są idealne do zdjęć lub złożonych obrazów zawierających wiele kolorów, cieni, gradientów lub złożonych wzorów. Pliki JPG dobrze radzą sobie z tego typu obrazami, ponieważ pliki JPG mają ogromną paletę kolorów do pracy.

Pliki JPG można również zapisywać w wysokiej jakości, niskiej jakości lub w dowolnym miejscu pomiędzy. Pozwala to dostosować i zapisać obraz dokładnie tak, jak chcesz, równoważąc jakość i rozmiar pliku.

Praca z plikami PNG

PNG to kolejny popularny format plików online. W programie Adobe Photoshop masz możliwość zapisywania plików PNG jako PNG-8 lub PNG-24.

• PNG-8 ma bardzo ograniczoną paletę 256 kolorów. Chociaż rozmiar obrazu jest mniejszy, nie będzie to dobra opcja w przypadku złożonych obrazów i fotografii.
• PNG-24 zapewnia obraz o znacznie wyższej jakości, ale wiąże się to z większym rozmiarem pliku.

Co najważniejsze, pliki PNG mogą obsługiwać przezroczystość. Jest to jeden z największych różnic między plikami PNG i JPEG.

Praca z GIF-ami

GIF-y były bardziej popularne wiele lat temu, ale nadal są opcją dla małych rozmiarów obrazów, w których potrzebnych jest tylko kilka kolorów. Podobnie jak PNG-8, pliki GIF są ograniczone tylko do 256 kolorów. Z tego powodu GIF-y nigdy nie powinny być używane do zdjęć produktów.

Prawidłowe zapisywanie obrazów

Jak można się spodziewać, ładowanie dużych obrazów trwa dłużej. Kiedy mówimy duży, mamy na myśli rozmiar pliku, a nie wymiary obrazu, tj. wartość w KB, MB, GB itd. Biorąc pod uwagę, że 47% użytkowników oczekuje, że strona internetowa załaduje się w mniej niż 2 sekundy, a 40 % opuści stronę, której ładowanie trwa dłużej niż 3 sekundy, ważne jest, aby Twoje obrazy były wystarczająco małe, aby zapewnić szybką witrynę.

Istnieją trzy rzeczy, które możesz zrobić, aby odpowiednio zoptymalizować obrazy dla swojego sklepu internetowego:

Zapisz odpowiednie wymiary

Musisz otworzyć obraz w Photoshopie i wyświetlić go w 100%. Pozwala to na oglądanie obrazu w dokładnym rozmiarze, jaki będzie wyświetlany na monitorze komputera podczas zapisywania obrazu do Internetu.

Zapisz obrazy do internetu

Możliwe jest zmniejszenie rozmiaru pliku bez znacznego obniżania jakości obrazów. Naszą ulubioną metodą zmniejszania rozmiaru pliku bez znacznego obniżania jakości obrazu jest użycie funkcji „Zapisz dla Internetu” programu Photoshop. Otwórz obraz w Photoshopie i przejdź do Plik> Eksportuj> Zapisz do Internetu (starsze)…. Pojawi się okno, w którym możesz wybrać jakość eksportu. Uważamy, że jakość 60 działa najlepiej, ponieważ zmniejsza rozmiar pliku poniżej megabajta i nie ma zauważalnej różnicy w jakości.

Kompresuj obrazy do internetu

Aplikacje do kompresji obrazu to najprostszy sposób na zmniejszenie rozmiaru pliku obrazów. Tego typu narzędzia usuwają ukryte dane z pliku obrazu, takie jak dodatkowe profile kolorów i metadane (takie jak geolokalizacja miejsca zrobienia zdjęcia), które nie są potrzebne. Narzędzia te zapewniają szybki i łatwy sposób na zmniejszenie rozmiaru plików bez utraty jakości obrazu.

Aplikacje i usługi kompresji obrazu

• ImageOptym
• Krótkie piksele
• MałyJPG
• MałePNG
• Sprężarka.io
• Kraken
• Optymalizator obrazu
• Crush Pics (aplikacja Shopify)
• Minifikator (aplikacja Shopify)

Zapisywanie obrazu do Internetu: przykład przejścia

Na początek załóżmy, że jesteśmy Stiff Salt (w rzeczywistości należymy do znajomego i programisty Shopify) i chcieliśmy zmienić obraz funkcji w naszym sklepie internetowym.

Ustawiamy scenę, sprawiamy, że nasza sól wygląda absolutnie niesamowicie i robimy zdjęcie lustrzanką cyfrową. Świetnie mamy nasze zdjęcie. Co za piękność!

Ale… rozmiar pliku jest OGROMNY! Dokładnie 14,6 MB. A wymiary zdjęcia to 5184×3456 pikseli. W tej chwili jest to całkowicie bezużyteczne. Jest dosłownie wystarczająco duży, aby wydrukować plakat wielkości filmu. Przy 14,6 MB ładowanie tego obrazu na komputerze odwiedzającego zajęłoby dużo czasu. To nie jest dobre.

Czas zabrać się do pracy i znacznie zmniejszyć rozmiar obrazu i rozmiar pliku.

Pamiętaj, że z obrazem zrobimy trzy rzeczy.

• Zmniejsz rozmiar obrazu: to są wymiary fotografii
• Odpowiednio zapisz obraz, aby zmniejszyć rozmiar pliku: Jest to rozmiar pliku i ile miejsca zajmuje na dysku twardym komputera i/lub serwerze internetowym
• Kompresuj plik obrazu: Aby pozbyć się wszelkich dodatkowych ukrytych danych zajmujących miejsce

Zmniejsz rozmiar obrazu

W zależności od programu, z którego zdecydujesz się korzystać i osobistych preferencji, możesz:

• Zmniejsz rozmiar obrazu przed zapisaniem
• Zmniejsz rozmiar obrazu podczas zapisywania obrazu
• Zapisz obraz, a następnie zmniejsz rozmiar obrazu

Aby uprościć sprawę, najpierw zmniejszymy rozmiar obrazu. Aby to zrobić, otworzymy obraz w Photoshopie (możesz użyć dowolnego programu graficznego, z którym czujesz się najbardziej komfortowo).

Aby określić rozmiar, przyjrzeliśmy się sugerowanemu rozmiarowi obrazu na stronie głównej motywu. Miał wymiary 1600 x 800 pikseli (pamiętaj, że oryginał miał 5184 × 3456 pikseli).

W Photoshopie wybierzemy Obraz> Rozmiar obrazu.

Ok, zmniejszyliśmy rozmiar (wymiary) obrazu do czegoś bardziej odpowiedniego i zalecanego przez programistę motywu.

Odpowiednio zapisz obraz (Zapisz dla Internetu)

W Photoshopie istnieje specjalne polecenie o nazwie „Zapisz do Internetu”, które optymalizuje plik obrazu do wyświetlania online. Jest to ważne, ponieważ zwykłe polecenie „Zapisz” może skończyć się tworzeniem plików o rozmiarach 2-3 razy większych niż polecenie „Zapisz dla Internetu”.

W polu „Zapisz dla Internetu” musimy dokonać kilku wyborów.

• Typ obrazu: typ pliku wpłynie na jakość i rozmiar pliku wyjściowego
• Jakość obrazu: jest to ważne i może mieć duży wpływ na ostateczny rozmiar pliku
• Wymiary: Zrobiliśmy to już w pierwszym kroku, więc nie ma potrzeby robienia tego ponownie, ale jeśli nie zrobiliśmy tego w pierwszym kroku, moglibyśmy po prostu zmienić wymiary obrazu tutaj

Na podstawie tego, czego dowiedzieliśmy się na początku tego postu, wiemy, że JPEG jest najlepszym typem pliku do zdjęć lub dowolnego obrazu o dużej ilości kolorów i złożoności. Wybierzemy JPEG.

W przypadku jakości obrazu masz skalę, którą możesz wybrać za pomocą 5 ustawień wstępnych, które mieszczą się w zakresie od maksimum do niskiego. Rzućmy okiem na ostateczny rozmiar pliku wyjściowego każdego z poziomów jakości (informacja ta jest wyświetlana w dolnym rogu okna zapisywania obrazu):

• Maksymalnie: 1,38 MB
• Bardzo wysoki: 611 KB
• Wysoki: 339 KB
• Średni: 152 KB
• Niski: 86k

Widać, że przy każdym obniżeniu poziomu jakości rozmiar obrazu zmniejsza się o prawie połowę. Ogólnie stwierdziliśmy, że dla większości obrazów najlepsze jest ustawienie Wysoka. Na tym poziomie ludzkie oko jest prawie niemożliwe, aby dostrzec jakiekolwiek pogorszenie jakości obrazu, a rozmiar pliku jest prawie 4x mniejszy niż gdybyśmy mieli wybrać tylko maksimum.

Jeśli obraz jest niezwykle ważnym obrazem z dużą ilością szczegółów, możesz wybrać wyższy poziom i zapisać na bardzo wysokim.

Zasadniczo oszczędzanie dla Internetu jest działaniem równoważącym — musisz zrównoważyć jakość grafiki i rozmiar plików multimedialnych, aby odpowiadały Twoim osobistym potrzebom.

Kompresuj obrazy do internetu

Jeśli używałeś Adobe Photoshop, wykonał już naprawdę świetną robotę przy zmniejszaniu rozmiaru obrazu, jednak nadal możesz prawdopodobnie zgolić kolejne 5-10% rozmiaru obrazu, używając aplikacji do kompresji, takiej jak ImageOptim i / lub ShortPixel.

ImageOptim to także najprostszy sposób na szybkie zmniejszenie rozmiaru pliku obrazu, jeśli do zapisywania obrazów używałeś innego programu, który nie jest tak dobry jak Photoshop.

Upuszczając każdy z plików z poprzedniego kroku do ImageOptim, byliśmy w stanie jeszcze bardziej zmniejszyć rozmiar obrazu o kolejne 5%. Niewielkie, ale znowu zostały one już zoptymalizowane w Photoshopie. Niezależnie od tego, liczy się każdy KB.

Wniosek

Reasumując, nasze zdjęcie było niesamowicie duże, kiedy zaczynaliśmy, jednak w kilku prostych krokach zmniejszyliśmy rozmiar zdjęcia z 5184 × 3456 do 1600 x 800, aby idealnie pasowało do naszej strony głównej, a jednocześnie zajęło z 14,4 MB powodującego awarię komputera do znacznie bardziej rozsądnego 336 KB.

Odpowiednie zapisywanie obrazów w Internecie jest ważnym krokiem do nauki i wdrażania religijnego. Nawet jeśli zaoszczędzisz tylko 10-20% na każdym obrazie, w miarę upływu czasu, w miarę rozwoju sklepu i witryny, każdy mały KB może przyczynić się do znacznych oszczędności, które zapewnią znacznie przyjemniejsze wrażenia dla odwiedzających, klientów i Google.

Jak zoptymalizować obrazy dla Internetu: Przewodnik wideo