Optymalizacja (kompresja) obrazów na stronie fotografa

1. Mój przegląd oprogramowania i usług online optymalizować (kompresować) obrazy w Internecie
2. Optymalizator plików
3. Zautomatyzowany moduł OptiPic
4. Usługa online PunyPNG
5. Czy lepiej kompresować obrazy bez utraty bezstratnej jakości, czy też z utratą?
6. Przygotowanie obrazu do optymalizacji (do kompresji)
7. Najważniejsze ustalenia:

Наша команда-партнер Artmisto

Drodzy przyjaciele, koledzy!

Musiałem poświęcić dużo czasu na studiowanie kwestii, jak lepiej optymalizować (kompresować) obrazy na stronie. W tym przypadku mówimy o miejscu fotografa, gdzie jakość obrazów, jak rozumiesz, ma kluczowe znaczenie. Postanowiłem opowiedzieć trochę o moim doświadczeniu, może to być przydatne dla kogoś.

Każdy fotograf, który ma stronę internetową, wie, jak ważne jest prawidłowe przygotowanie zdjęć, które umieszczamy na stronie. Na przykład nie zwracałem uwagi na ten problem. Chociaż w rzeczywistości jest to ważne. Od razu chcę zauważyć, że dyskusja dotyczyć będzie wyłącznie metod kompresji i przygotowania zdjęć do Internetu jako całości, a nie optymalizacji SEO zdjęć.

Algorytmy wyszukiwarek są stale ulepszane, obejmują i uwzględniają coraz więcej nowych aspektów technicznych cech stron, od treści do niuansów kodu. Obecnie jest tak, że jeśli zdjęcia / zdjęcia na Twojej stronie nie są odpowiednio zoptymalizowane (nie skompresowane) i jest ich duża liczba na stronie, co zwykle dzieje się na stronach internetowych fotografów, wyszukiwarki biorą to pod uwagę i mogą wydawać ostrzeżenia w narzędziach analitycznych Yandex.Webmaster. i inni, przysięgają, że strona ładuje się powoli. Powolne pobieranie z kolei negatywnie wpływa na ranking witryny według wyszukiwarek. Jeśli utworzyłeś nową stronę zawierającą wiele niezoptymalizowanych (nieskompresowanych) obrazów, na przykład Google może nie indeksować go przez długi czas. Musisz to zrobić na siłę.

W Internecie można znaleźć wiele artykułów na temat kompresji zdjęć w witrynie. W tym celu istnieje wiele programów i usług online. Istnieją artykuły analityczne, które oceniają, oceniają i przypisują oceny do różnych programów i usług optymalizacyjnych, starając się ułatwić użytkownikom dokonanie wyboru.

Kiedy zastanawiał mnie problem kompresji zdjęć na stronie, niewiele o tym wiedziałam i dopiero zacząłem zbierać informacje w Internecie. Wtedy zdałem sobie sprawę, że musisz szukać tylko programów i usług, które są zbyt ciasne dla zdjęć bez utraty jakości, w trybie bez strat, ale na początku o tym nie wiedziałem. Zdecydowana większość zdjęć w formacie JPG znajduje się na mojej stronie, więc nie oglądałem programów, które działają z innymi formatami obrazów, ale koncentrują się tylko na programach obsługi JPG. Oprócz informacji w Internecie zapytałem znajomych optymalizatorów SEO i programistów, którzy zapewniają wsparcie techniczne dla witryn klientów.

Mój przegląd oprogramowania i usług online
optymalizować (kompresować) obrazy w Internecie

Usługa online Tinypng

Moje pierwsze i złe doświadczenie było z Tinypng, internetową usługą optymalizacji obrazu dla Internetu. Powiem od razu, że potrząsa JPG z utratą jakości, ale, jak powiedziałem, nie wiedziałem o tym w tamtym czasie i zacząłem testować Tinypng ze spokojnym umysłem.

Usługa ma bezpłatną wersję podstawową, która umożliwia przetwarzanie tylko pojedynczych plików. Przetwarzanie wsadowe wymaga płatnej subskrypcji. Ułożyłem dla niej ok. 1600 r.

Pierwszego dnia zoptymalizowałem obrazy kilku głównych stron witryny. Ale jakość zdjęć, niestety, wypłynęła zauważalnie. Niektóre wyglądały mniej gorzej, niektóre były gorsze, ogólne wrażenie było niezadowalające. Ta usługa nie ma ustawień, tylko jeden przycisk „Optymalizuj”, dlatego użytkownik nie ma możliwości wpływania na wynik.

Po tym, jak w końcu przekonałem się, że ta jakość mi nie odpowiada, ręcznie zastąpiłem obrazy oryginałami i przestałem korzystać z tej usługi.

Poza tym miałem niezbyt przyjemne wrażenie korzystania z usługi online. W tym ze względu na fakt, że w ciągu dnia Tinypng był kilkakrotnie niedostępny przez 10-15 minut. Nie wiem, z czym to się wiąże, albo z powodu zniknięcia Itnernetu, albo z powodu awarii samej usługi.

Optymalizator plików

Ponownie zanurzyłem się w Internecie w poszukiwaniu bardziej akceptowalnej opcji. Teraz jestem bardziej zaabsorbowany różnymi artykułami i zdałem sobie sprawę, że muszę szukać usługi lub programu, który straciłby użądlenia JPG w tak zwanym trybie bez strat. W Habré dostałem dobry przegląd analityczny różnych programów i usług, z których wybrałem program dla siebie, który w swojej wydajności był na pierwszym miejscu wśród programów dla Windows, to jest File Optimizer. To prawda, że ​​w tym artykule na pierwszym miejscu wśród wszystkich (programów i usług online) dla bezstratnej kompresji JPG nadal była usługa online PUNYpng, ale po złym doświadczeniu z Tinypng postanowiłem nie komunikować się z internetem w zasadzie. Tak więc Optymalizator plików jest programista rozwoju Nikkho (Javier Gutiérrez Chamorro). Najnowszą wersję programu można zawsze pobrać ze strony Sourceforge. Jeśli połączysz nazwę programu z nazwą lub pseudonimem programisty, zostaniesz przeniesiony na żądaną stronę. Program naciska JPG bez strat. Działa z pojedynczymi plikami i folderami. Program nie usuwa oryginalnych plików, zmienia nazwę kodu źródłowego i dodaje do niego rozszerzenie .bak. Program wstrząsa JPG średnio o 18% (bez straty), tj. Twoje zdjęcie nie zmienia się wizualnie. Jeśli masz, powiedzmy, współczynnik kompresji JPG dla wartości 10, program pozostawi go na tej wartości bez zmiany, ale skompresuje plik używając tylko własnego algorytmu, a nie kompresji JPG.

Wszystko byłoby w porządku, byłem zadowolony z jakości wyniku, ale teraz pojawił się inny problem - musiałem zoptymalizować ponad 8 tysięcy zdjęć za pomocą programu - właśnie ta kwota jest na mojej stronie. Wszystkie te zdjęcia są rozrzucone na różnych stronach i folderach. Moim zdaniem jest to ilość pracy przez około tydzień. Mniej więcej w tym samym czasie dostałem reklamę w Internecie (prawdopodobnie przechwyconą przez retargeting) usługi OptiPic. Zainteresowała mnie fraza, że ​​usługa optymalizuje obrazy już przesłane do Twojej witryny, tj. nie muszą być najpierw przygotowywane na komputerze, a następnie ponownie przesłane na stronę. To był kluczowy punkt, który wpłynął na mój wybór tej usługi. Zdecydowałem - konieczne jest przetestowanie!

Zautomatyzowany moduł OptiPic

OptiPic to zautomatyzowany moduł instalowany na stronie. Usługa została zintegrowana ze wszystkimi głównymi systemami CMS. Mamy na przykład stronę internetową na Bitrix, dla tego CMS na rynku Bitrix moduł jest pobierany i wdrażany na stronie internetowej. Wchodzisz do modułu na swojej stronie administracyjnej i tam już ustawiasz parametry przetwarzania obrazu. W tym samym miejscu i rozpocznij proces kompresji. Usługa optymalizuje wszystkie obrazy na stronie i zapewnia raport procentowy na temat skuteczności kompresji.

Usługa jest płatna. Płatność jest dokonywana według objętości przetworzonych obrazów w MB. Na przykład kupiłem od nich za 750 r 2 GB. W ramach tego tomu udało się całkowicie zoptymalizować wszystkie obrazy na stronie, ponad 8 tysięcy sztuk.

Usługa OptiPic ma wiele ustawień ustawionych przez użytkownika. Na przykład jakość kompresji (szakal w procentach od 0 do 100). Usługa ma również opcję „kompresuj bez utraty jakości”. W tym celu ustaw jakość kompresji na 100%.

Możesz umieścić pole wyboru „Zapisz oryginały”, a następnie będą one przechowywane w Twojej witrynie, w folderze ze skompresowanymi obrazami, usługa po prostu zmienia nazwy plików oryginałów, dodając do nich własne rozszerzenie .optimg-orig. Jeśli zaznaczysz „Zapisz oryginały”, zawsze możesz cofnąć proces kompresji, klikając „Zwróć oryginały”.

Inną kluczową kwestią jest to, że po początkowej kompresji obrazów dodano kilka nowych stron z obrazami lub tylko nowe obrazy do serwisu, usługa śledzi je, wyodrębnia tylko nowo dodane nieskompresowane obrazy i sugeruje ich optymalizację. Naprawdę mi się podobało!

Główną i główną zaletą tej usługi jest to, że nie poświęcasz całego czasu na przetwarzanie i zastępowanie obrazów na stronie internetowej, wszystko jest dla Ciebie.

Jednak, moi przyjaciele, dodaj muchę do maści. Usługa OptiPic w pełni działa tylko w trybie automatycznym, tj. Musisz zainstalować moduł na swojej stronie, a usługa zrobi wszystko za Ciebie. Ale jeśli chcesz całkowicie zarządzać procesem i zbierać pojedyncze obrazy lub kolekcje folderów, nie zadziała to w OptiPic. Ma rodzaj trybu demonstracyjnego, dzięki któremu można zbierać pojedyncze obrazy, ale jest on wdrażany tak przewrotnie, że nie ma sensu go używać, jeśli na rynku jest tak wiele interesujących ofert.

Następnie podam konkretne wyniki na liczbach, które otrzymałem, kompresując ten sam plik testowy (zdjęcie w formacie JPG).

Pierwszy OptiPic. W trybie bez strat OptiPic wygenerował kompresję mojego przykładowego pliku na poziomie 13,6%. Był to obraz JPG, wcześniej zapisany ze współczynnikiem kompresji JPG wynoszącym 10 z 12 punktów. Napędzałem ten sam obraz przez program File Optimizer, kompresja bezstratna okazała się 15%, tj. prawie identyczne.

Usługa online PunyPNG

A potem, dla czystości eksperymentu, postanowiłem jeszcze spróbować innej usługi online PunyPNG, pamiętając o artykule na temat Habré, który mówił o wiodącym miejscu tej usługi do kompresji bez strat. Pobrałem tę samą sondę. Otrzymałem kompresję 14%, czyli mniej więcej na poziomie wskaźników programu File Optimizer i usługi OptiPic.

Nawiasem mówiąc, usługa PunyPNG jest również płatna, podstawowa subskrypcja kosztuje 1 USD / miesiąc, subskrypcja Pro kosztuje 3 USD / miesiąc. Różnica między tymi subskrypcjami dotyczy liczby plików, które można przetwarzać w maksymalnym rozmiarze kompresowanego oryginału. W ramach subskrypcji podstawowej możesz miesięcznie pobierać do 3 tysięcy zdjęć o maksymalnym rozmiarze pliku do 500 KB, z subskrypcją PRO do 5 tysięcy zdjęć o rozmiarze pliku do 1 MB.

Czy lepiej kompresować obrazy bez utraty bezstratnej jakości, czy też z utratą?

Jak się dowiedziałem, poziom kompresji obrazu w trybie bez strat wynosi 13-15%, co jest dość niskie dla optymalizacji w Google Pagespeed Insights. Jeśli Pagespeed Insights zbeształ Twoje zdjęcia lub całe strony, kompresja o 13-15% może nie poprawić sytuacji, Google Pagespeed Insights ostrzeże Cię, że obrazy na stronie nie są zoptymalizowane. Miałem to w ten sposób. Google odmówił indeksowania stron mojej witryny po przeniesieniu witryny na https. Pagespeed Insights przysięgło, że strony są zbyt ciężkie, a wszystkie obrazy nie są zoptymalizowane.

Do tej pory zdecydowałem się na moduł OptiPic i postanowiłem spróbować kompresować nie w trybie bez strat, ale z niewielką utratą jakości, ustawiając jakość kompresji na 80%. Ogólna wydajność kompresji w tym samym czasie okazała się 32%. Tak, jakość zdjęć zmieniła się nieco, a mianowicie pojawiło się ziarno. Ale jednocześnie nie zaobserwowano żadnego innego pogorszenia. Nie przejmuję się zbytnio ziarnem, ponieważ za pomocą OptiPic mam możliwość za jednym kliknięciem zwrócić oryginały wszystkich 8 tysięcy obrazów na mojej stronie i ponownie przejechać przez usługę, z inną wartością, na przykład od 90%. Tak, znowu będę musiał zapłacić około 750 rubli za ruch na drugiej destylacji, ale nie jest to tak duża kwota, jeśli chodzi o witrynę. Zastanawiam się, czy pozbyć się zboża lub pozostawić go takim, jakim jest.

Ogólnie rzecz biorąc, jestem zadowolony z OptiPic, zwłaszcza dzięki ogromnym możliwościom automatyzacji, użytkownik nie musi nic robić samodzielnie. Moim zdaniem jest to bardzo fajne.

Przygotowanie obrazu do optymalizacji (do kompresji)

Prawdopodobnie każdy, kto choć trochę rozumie w całej tej kuchni, jasne jest, że zanim naciśniesz obraz za pomocą specjalnego programu lub usługi, musisz przygotować obraz. Cóż, nie wrzucisz JPG ważącego 25 MB do programu w celu optymalizacji.

Prawdopodobnie najważniejsze jest przygotowanie obrazu, tak aby fizyczny rozmiar (w pikselach) obrazów przesyłanych na stronę odpowiadał rozmiarowi wyświetlania tych zdjęć na stronach. Nie możesz dostosować rozmiaru za pomocą kodu! To jest, kiedy, powiedzmy, przesyłasz na stronę obraz o wymiarach 1200x800 px, a na stronie, którą ten obraz jest wyświetlany w rozmiarze 900x600 px. Ta metoda jest nieprawidłowa i wyszukiwarki to widzą. Google ma serwis PageSpeed ​​Tools, dzięki któremu możesz sprawdzić strony witryny pod kątem optymalizacji i wydajności z punktu widzenia Google. Jeśli ta usługa sprawdza podobną stronę, na której znajduje się podobny obraz (zmniejszona za pomocą kodu), usługa pokaże, że wystąpił błąd i taki obraz musi zostać fizycznie zmniejszony.

Rozdzielczość obrazu na ekranie jest mierzona w pikselach na cal (ppi). Chociaż pojęcie „rozdzielczości obrazu na ekranie” jest względne. Nic tak naprawdę nie zależy od tego, w tym wagi pliku. Wartość rozdzielczości jest nadal bardzo ważna dla drukowania obrazu, ale nie dla ekranu. Rozdzielczość większości wyświetlaczy waha się od 72 do 120 ppi. Na przykład rozdzielczość ekranu MacBooka Pro wynosi 220 ppi. W naszym przypadku kluczowe znaczenie dla przygotowania obrazu mają tylko wymiary obrazu w pikselach (szerokość / długość). Jeśli założymy, że Twoje zdjęcie ma rozmiar 800x600 px, niezależnie od ustawionej dla niego rozdzielczości, co najmniej 72, co najmniej 300 dpi, wszystkie ekrany (o różnych rozdzielczościach) pokażą go jako 800 x600. Nie będą rozciągać ani kompresować w zależności od ustawionego uprawnienia. A waga obrazu będzie taka sama, jak dla 72, dla 300 ppi. W Photoshopie domyślna rozdzielczość obrazu dla ekranu wynosi 72 ppi. Trzymam się tego, pozostawiając wartość domyślną.

Opcje kompresji JPG są ważne zarówno dla jakości obrazu, jak i wagi. Jak wiadomo, w różnych programach stopień kompresji jest ustawiony na różne skale. W Photoshopie, na przykład od 0 do 12, w Lightroom - od 0 do 100%. Ponadto w różnych programach i usługach służących do kompresji obrazów wykorzystywane są głównie dwie z tych skal. Lepiej poznać przybliżone wartości wartości tych szakali. Zasadniczo każdy zaleca stosowanie współczynnika kompresji obrazu 8-10 dla witryny w skali Photoshop, co odpowiada około 67 do 85%. Zwykle robię to dla wszystkich obrazów JPG na stronie, ustawiłem współczynnik kompresji 8-10. Tak, osiem nieznacznie zmienia jakość obrazu, ale znacznie zmniejsza jego wagę, ostateczny wybór należy do Ciebie.

Najważniejsze ustalenia:

1. Prawdopodobnie nie pomylisz się, jeśli powiem, że jednym z najwygodniejszych i najbardziej efektywnych programów (pod Windows) do kompresji obrazów w formacie JPG (bez utraty jakości, bez strat) jest Optymalizator plików. Program jest bezpłatny. Ma możliwość dostosowywania ustawień.

2. Jeśli chodzi o wygodę i automatyzację dla użytkowników, obecnie jednym z liderów jest usługa OptiPic, która umożliwia zbieranie zarówno bez strat, jak iz utratą jakości. Główną zaletą usługi jest to, że działa w trybie automatycznym. Usługa umożliwia kompresowanie już przesłanych obrazów do witryny. Ale w innych trybach ta usługa nie działa. Oznacza to, że nie będziesz mógł go w pełni wykorzystać, jeśli nie podłączysz go do swojej witryny.

3. Jedną z najbardziej wydajnych usług on-line do bezstratnej kompresji obrazu JPG jest PunyPNG. Usługa jest płatna, ale nie droga. Umożliwia ręczne pobieranie zarówno pojedynczych obrazów, jak i folderów.

4. Nie wolno zapomnieć o prawidłowym przygotowaniu obrazów przed uruchomieniem ich przez program lub usługę w celu kompresji.