Optymalizacja i kompresja png i jpg, jpeg bez utraty jakości. Określanie potrzebnych obrazów

Im bardziej obraz jest skompresowany, tym szybciej strona witryny ładuje się na urządzeniu mobilnym. Następnie przyjrzymy się krokom, które pozwolą Ci uzyskać optymalne obrazy dla dowolnego urządzenia.

Zrównoważona optymalizacja obrazu

Problem z optymalizacją obrazu polega na tym, że nie ma stuprocentowych reguł. Optymalizacja obrazu to zawsze delikatna równowaga pomiędzy doświadczenie użytkownika, atrakcyjność i wydajność strony.

Raluca Budiu, dyrektor ds. badań w Nielsen Norman Group, wyjaśnia:

„Ponieważ urządzenia mobilne mały ekran, obrazy, które są zbyt małe, dostarczają zbyt mało informacji, a obrazy, które są zbyt duże, mogą naprawdę spowolnić stronę. Zalecamy zacząć od zdjęcia minimalny rozmiar i pozwolić użytkownikom na powiększanie (lub przesyłanie większego obrazu).

W większości przypadków ogromne obrazy mają niską gęstość informacji i ludzie muszą poczekać na załadowanie strony i/lub przewinąć stronę w dół, aby znaleźć treść.

Nie ma dokładnych reguł określających, jak mały powinien być obraz na urządzeniu mobilnym – jest to kompromis pomiędzy jakością a rozmiarem strony. Według httpArchive średni JPG to 29 KB, a średni PNG to 16 KB.

Zmniejszenie wagi obrazu polega częściowo na utrzymaniu jego odpowiedniego rozmiaru i rozdzielczości (liczby pikseli), a częściowo na skompresowaniu obrazu. Niektóre narzędzia, takie jak Photoshop, umożliwiają pewną kompresję, ale często to nie wystarcza, szczególnie w przypadku większych typów obrazów, takich jak PNG.

Szereg narzędzi umożliwia efektywną kompresję obrazów pojedynczo lub w seriach. Na przykład obraz strona główna, powyżej, został skompresowany przy użyciu TinyPNG, co spowodowało zmniejszenie wagi o 79%.

Czy powinienem używać obrazów? różne rozmiary na urządzenia mobilne, tablety i komputery stacjonarne?

Tworząc strony internetowe na urządzenia mobilne, tablety i komputery osobiste niezależnie od tego, czy są to dedykowane adresy URL (site.com i m.site.com), czy też różne witryny za pośrednictwem jednego adresu URL (responsywne projektowanie stron internetowych), oznacza to, że rozmiar obrazów powinien odpowiadać największemu urządzeniu w tej kategorii.
Ta pozycja nie do końca nadaje się do responsywnego projektowania stron internetowych (RWD). Zasadą RWD jest obsługa tej samej witryny różne urządzenia, używając CSS do formatowania treści zgodnie z możliwościami urządzenia i rozmiarem ekranu.

Nie oznacza to jednak, że strony internetowe muszą stosować uniwersalne podejście do obrazów, mówi Alex Painter, konsultant ds. wydajności sieci w NCC Group:

„Strony na urządzeniach mobilnych często działają wolno ze względu na brak możliwości załadowania obrazów dostosowanych do widocznego obszaru. Częściowo można temu zaradzić popularność RWD – pomysł, że tę samą treść można modyfikować tak, aby układ działał w dowolnej rzutni, i może maskować fakt, że obrazy nie zostały zoptymalizowane pod kątem urządzeń mobilnych.

Wiele witryn ładuje te same obrazy zarówno na komputery stacjonarne, jak i urządzenia mobilne, ale wersje mobilne po prostu zmniejszają swój rozmiar. Użytkownik wydajnych urządzeń w szybkich i niezawodnych sieciach może nie od razu to zauważyć. Może to jednak sprawić, że strony internetowe będą całkowicie bezużyteczne dla osób ze słabszymi urządzeniami mobilnymi lub słabym połączeniem.
.
Ten wielki problem są dwa powody. Po pierwsze: za dużo na dostawę duży obraz Przez sieć trwa to dłużej.
Drugi powód jest często pomijany: urządzenie mobilne musi ciężko pracować, aby a) zdekodować i b) przeskalować obraz. Ma to swoją cenę, jeśli chodzi o moc obliczeniową i pamięć.

Ale to nie musi tak być. Wspierając grupę społeczności Responsive Images, specyfikacja HTML ułatwia programistom tworzenie wielu obrazów alternatywne obrazy Dla różne rodzaje urządzeń - dla różnych rozmiarów ekranu (przeglądanie), rozdzielczości (ilość pikseli) czy możliwości urządzenia.

Kod HTML strony internetowej informuje przeglądarkę, który z tych obrazów wybrać dla ekranów o maksymalnej szerokości i czy obraz powinien zajmować całą szerokość ekranu, czy tylko jej część.
Wcześniej niektórzy programiści używali JavaScriptu do określania użycia różnych obrazów, ale użycie Element HTML Powinien być bardziej wydajny, redukując dodatkowy kod i zapytania, które spowalniają czas ładowania strony.

Aleks Malarz:
„Wybór odpowiedniego obrazu do rzutni jest teraz dość prosty. Mieliśmy zapytania o media CSS dla obrazy tła przez jakiś czas, ale do niedawna obrazy, do których odwoływano się w HTML, stanowiły większy problem.

Teraz mamy cechę wrażliwych obrazów: element Za pomocą atrybutu srcset, który pozwala określić, który obraz powinien zostać wybrany dla jakiej szerokości rzutni (lub pozwolić przeglądarce na maksymalne wykorzystanie odpowiedni wybór z zestawu zdjęć).
Ta funkcja jest teraz bardzo dobrze obsługiwana przez przeglądarki, a programiści powinni w idealnym przypadku używać jej zamiast JavaScriptu, aby osiągnąć ten sam cel.

Kto korzysta z responsywnych obrazów?

Szybkie spojrzenie na kod źródłowy głównych stron internetowych, takich jak Amazon, Facebook i BBC, potwierdza, że żadna z nich nie korzysta jeszcze z tego elementu Aby służyć odpowiedziom.

Czy odniosą korzyść, jeśli z tego skorzystają? Udostępnianie różnych obrazów na każdej platformie ma potencjalnie wiele zalet:

Umożliwia witrynie internetowej wyświetlanie większego obrazu z większą liczbą wysoka rozdzielczość na pulpicie.
Zmniejsza rozmiar obrazu i waga całkowita strony, co przyspiesza czas jej ładowania.
Umożliwia witrynie mobilnej wyświetlanie większego obrazu na urządzeniu mobilnym (zwróć uwagę na przycięte zdjęcie psa powyżej).
Sprzedawcy detaliczni mogą wyświetlać obrazy bohaterów dostosowane do urządzeń mobilnych na urządzeniach mobilnych, zamiast tradycyjnych zdjęć głowy na większych wyświetlaczach.

Znalezienie najlepszego formatu obrazu

Jak już wiemy, najpopularniejszy format obrazu używany w witrynach mobilnych i przyjaznych urządzeniom mobilnym: JPEG 46%, PNG 28%, GIF 23% i SVG 1% według httpArchive.

Istnieją dwa rodzaje obrazów internetowych: rastrowe i wektorowe. Pierwsza składa się z kropek (np. fotografia cyfrowa), a druga z linii i kształtów. JPEG, PNG i GIF są plikami rastrowymi. SVG — wektor. SVG to więcej nowy format, który nie jest jeszcze powszechnie stosowany, ale jest zalecany do projektowania responsywnych stron internetowych (RWD).
Każdy typ obrazu ma swoje zalety i wady, a każdy projektant stron internetowych ma swoje własne opinie i ulubione formaty. Ogólnie:

JPEG jest najczęściej używany w przypadku zdjęć internetowych
GIF jest typowy dla animacji, a także prostych wykresów, ikon i logo
PNG jest typowy dla wykresów Wysoka jakość, logo, ikony i inne ilustracje oraz fotografie z efektami graficznymi
SVG nadaje się do wykresów i logo, nagłówków stron – wszystkiego, co zaprojektował ilustrator.

Alternatywy dla tradycyjnych obrazów

Strony internetowe składają się z wielu małych obrazów, takich jak ikony i przyciski. Jeśli są wykonane przy użyciu oddzielnych Obrazy GIF/ PNG / JPEG zwiększają rozmiar strony, a każdy wymaga indywidualnego żądania przeglądarki, co może spowolnić czas ładowania strony.

Istnieją trzy metody, które mogą pomóc w zachowaniu rozmiaru strony i żądań obrazów:

Sprite CSS – połącz kolekcję mniejszych grafik w jedną Plik CSS. Uwaga: przeciążanie duszków zbyt dużą lub zbyt dużą grafiką nie będzie optymalne.
Czcionki ikon to biblioteka ikon wysyłana w jednym pliku.
Formularze CSS to formularze zbudowane za pomocą za pomocą CSS, a nie jako tradycyjny obraz.

Mike D'Agruma Główny programista front-endowy, Grupa Kreatywna E-volve:

„Aby zaoszczędzić rozmiar pliku, zwykle unikam pobierania większych, bardziej popularnych bibliotek ikon i używam Fontastic do tworzenia własnych niestandardowe czcionki ikony Ta metoda działa bardzo dobrze na różnych poziomach: 1) Ponieważ używam tylko non duża liczba niestandardowe ikony, rozmiar pliku czcionki jest znacznie mniejszy; 2) Ikony są tworzone za pomocą za pomocą SVG, co gwarantuje, że są one wyjątkowo wyraźne na urządzeniach; 3) Nie da się przebić tej opcji ze względu na elastyczność, ponieważ ikony czcionek można bardzo łatwo dostosować za pomocą CSS.

Innym świetnym sposobem na zaoszczędzenie czasu, rozmiaru pliku i żądań serwera jest użycie CSS do tworzenia kształtów. Za pomocą CSS możesz tworzyć większość kształtów i dodawać dowolną liczbę efektów i przejść.
Weźmy jako przykład witrynę mobilną Summit County Metro Parks. Tylko w sekcji nagłówka mogłem użyć kombinacji Znaki CSS i ikony czcionek, aby stworzyć coś, co mogłoby być sześć różne obrazy. Uruchomienie menu dla urządzeń mobilnych powoduje wyświetlenie przykładowej animacji w postaci CSS (menu w stylu hamburgera, zamknięte znakiem „X”), a za pomocą dodatkowa ikona Z prawa strona pokazuje otwarte i stan zamknięty menu".

Techniki projektowania stron internetowych poprawiające czas ładowania

Co zrobić, gdy zmniejszyłeś wagę, usunąłeś niepotrzebne obrazy i zoptymalizowałeś resztę, ale strona nadal nie ładuje się wystarczająco szybko?

Upewnij się, że najważniejszy materiał został załadowany jako pierwszy, mówi Raluca Budiu:

„Kiedy strona się ładuje, upewnij się, że tekst ładuje się jako pierwszy, aby ludzie mogli rozpocząć skanowanie zawartości. Podczas ładowania obrazów nie przesuwaj wokół nich już załadowanej treści — spowoduje to, że czytelnicy stracą miejsce, w którym byli na stronie, a czasami nawet klikną niewłaściwy link, ponieważ cel nagle się przesunął.

Istnieje różnica pomiędzy szacowanym czasem ładowania a rzeczywistym czasem ładowania. Dla użytkownika liczy się tylko to, że treść, którą przegląda lub której szuka, jest dostępna. Nie chcą patrzeć na pusty ekran, podczas gdy przeglądarka pobiera niepotrzebne obrazy.

Można to zrobić na trzy popularne metody. Robert Gaines, programista aplikacji internetowych w Kansas w USA, wyjaśnia:

Odroczone lub leniwe ładowanie wykorzystuje JavaScript do zatrzymywania ładowania obrazów i innych zasobów do czasu zakończenia ładowania głównej zawartości strony internetowej. Leniwe ładowanie skraca czas spędzony na głównej zawartości strony internetowej, ale zmniejsza potrzebę przycinania obrazów, które w przeciwnym razie spowalniałyby stronę internetową.
Powolne ładowanie ładuje zasoby w miarę ich potrzeb. W ten sposób treść ładuje się najpierw nad zakładką, a następnie pod nią, gdy użytkownik przewija. W przypadku galerii obrazów, takich jak wyszukiwanie produktów w witrynach handlowych, używane są miniatury; duże obrazy ładują się dopiero po kliknięciu odpowiedniej ikony.
Aktywne ładowanie obrazu najpierw ładuje obrazy Niska jakość podczas renderowania strony internetowej, a następnie zastępuje je obrazami wysokiej jakości po załadowaniu głównej zawartości. Aktywne ładowanie obrazu równoważy wydajność z atrakcyjnością wizualną. W przeciwieństwie do leniwego ładowania, nie zmusza użytkowników do czekania na załadowanie obrazów wtórnych po głównej treści.

Narzędzia takie jak Photoshop umożliwiają zapisywanie obrazów w formacie progresywnych plików JPEG lub przeplatanych plików PNG, które będą ładowane w opisany sposób.

Szybkość ładowania stron internetowych jest jednym z czynników wpływających na „nastawienie” wyszukiwarek do Twojej witryny. Im szybciej ładują się strony, tym bardziej lojalni są użytkownicy wobec witryny - nikt nie lubi długo czekać i marnować dużo ruchu.

Szeroko znana jest (pozornie) zamknięta usługa Google PageSpeed Insights, która pozwala sprawdzić dowolną opublikowaną witrynę pod kątem szybkości ładowania i na podstawie wyników kontroli wystawić ocenę w stupunktowej skali oraz rekomendacje. Zwykle zalecenia obejmują optymalizację i redukcję kod programu, kompresja obrazu, konfiguracja buforowania serwera i przeglądarki itp.

Dla przeciętnego zasobu treści na i darmowy CMS podobnie jak WordPress (tak, mówię o moim i tysiącach podobnych witryn), opcje optymalizacji ograniczają się do instalowania wtyczek buforujących i pracy z obrazami. „Skróć” motyw i skróć HTML, CSS i Kod JavaScript Nie każdy może, a takie działania z reguły prowadzą do różnych błędów i utraty funkcjonalności.

Do pracy z obrazami w WordPressie dostępnych jest wiele wtyczek, które konwertują i kompresują obrazy ze stratą lub bez, w locie lub na żądanie. Moim zdaniem najlepszą z tych wtyczek jest EWWW Image Optimizer.

Alternatywnie możesz podłączyć jakąś usługę CDN do zawartość statyczna, a mianowicie grafika była dostarczana z serwerów stron trzecich, co nieco odciążyło serwer plików hosting i dystrybucję źródeł, przyspieszając ładowanie strony. W moim przypadku robi to moduł Photon w ramach niezwykle popularnej i okresowo krytykowanej wtyczki JetPack.

Wszystko to działa w różnym stopniu, ale istnieje uniwersalny sposób na optymalizację obrazów dla dowolnej witryny działającej nie tylko na WordPressie – na początek potrzebujesz jedynie konta Google.

Co dziwne, mówimy o Zdjęciach Google - usłudze przeznaczonej do przechowywania zdjęć zrobionych na smartfonach z Androidem oraz zainstalowanych kopii zapasowych zdjęć i filmów specjalna użyteczność użytkownicy komputerów.

Polecane przez ekspertów w pomocy PageSpeed Insights Proces Google’a optymalizację obrazu opisano w następujący sposób:

Zoptymalizuj swoje obrazy

Ta reguła jest uruchamiana, gdy PageSpeed Insights wykryje, że rozmiar obrazów na stronie można zmniejszyć bez dużej utraty jakości.

informacje ogólne

Staraj się ograniczać rozmiar obrazów do minimum: przyspieszy to ładowanie zasobów. Właściwy format i kompresja obrazów może zmniejszyć ich rozmiar. Dzięki temu użytkownicy mogą zaoszczędzić czas i pieniądze.

Na wszystkich obrazach należy przeprowadzić optymalizację podstawową i zaawansowaną. W ramach podstawowej optymalizacji przycinane są niepotrzebne pola, zmniejszana jest głębia kolorów (do minimalnej akceptowalnej wartości), usuwane są komentarze, a obraz zapisywany jest w odpowiednim formacie. Podstawową optymalizację można przeprowadzić za pomocą dowolnego programu do edycji obrazów, takiego jak GIMP. Zaawansowana optymalizacja wykonuje kompresję Pliki JPEG i PNG (bezstratny).

Użyj narzędzi do kompresji obrazu

Istnieją narzędzia, które wykonują dodatkową kompresję plików JPEG i PNG bez utraty lub obniżenia jakości. W przypadku plików JPEG zaleca się użycie jpegtran lub jpegoptim (dostępne tylko w systemie Linux, uruchamiane z opcją --strip-all). W przypadku formatu PNG lepiej jest użyć OptiPNG lub PNGOUT.

Wygląda na to, że ostatni akapit opisuje narzędzia, za pomocą których Serwery Google automatycznie optymalizuj niestandardowe obrazy przesyłane do Zdjęć. Nawiasem mówiąc, pliki wideo zawarte w serwisie są również optymalizowane, ale jest to zupełnie nieistotne, biorąc pod uwagę dalsze istnienie YouTube.

Spójrzmy na przykład. Dzisiaj sfotografowałem składany nóż do kolejnej publikacji i przepuściłem powstałe zdjęcia przez aplikację Obraz FastStone Przeglądarka (kadrowanie „artystyczne” + zmiana rozmiaru do 1280 pikseli szerokości). W rezultacie powstał folder zawierający osiem plików ważących ponad 3 (!) megabajty.

Widocznie nowo zamontowane Przeglądarka FastStone Przeglądarka obrazów domyślnie zapisuje edytowane zdjęcia w jakości zbliżonej do maksymalnej, co prowadzi do nieproporcjonalnie dużej „wagi” plików. Ale takie ustawienie w naszym przypadku jest całkiem uzasadnione, ponieważ Algorytmy Google’a kompresuj zdjęcia bez widocznej utraty jakości przy 100% mastabizacji, co oznacza dobra jakość Obrazy pozostaną takie same nawet po przesłaniu do Zdjęć Google.

Dla wygody pobrane zdjęcia lepiej umieścić w nowym albumie, który można pobrać w całości niemal natychmiast po utworzeniu w postaci archiwum ZIP:

Jeśli porównasz skompresowany w Google Zdjęcia zdjęcia korzystając z oryginalnych, uzyskasz spore oszczędności.

816 KB w porównaniu z 3,27 MB. Jednocześnie, moim zdaniem, jakość zdjęć wcale nie ucierpiała. Facebook i VKontakte powinny uczyć się od Google, jak optymalizować zdjęcia. Co więcej, GPhotos jest wyposażony w dobre narzędzia do edycji obrazu - od stosowania filtrów po ręczną regulację kontrastu, jasności, nasycenia itp.

Tym samym Zdjęcia Google to nie tylko doskonała chmura do przechowywania i publikowania zdjęć, ale także potężne narzędzie do optymalizacji zdjęć pod kątem publikacji w sieci. Tylko w przypadku WordPressa nie zapomnij wyłączyć wtyczek optymalizujących i tego samego modułu Photon Jetpack, w przeciwnym razie zdjęcia już przygotowane do publikacji zostaną poddane dodatkowej kompresji, co doprowadzi do zauważalna strata jakość (na przykład zobacz zrzuty ekranu przesłane przez Zdjęcia Google, a następnie Photon w tym poście).

Kilka najbardziej znane programy w celu optymalizacji obrazów. Pozwólcie, że od razu dokonam rezerwacji: mówimy o algorytmach znacznie zmniejszających rozmiar pliku „ze stratami” („stratnymi”). Bezstratna kompresja JPEG nie jest szczególnie interesująca, ponieważ JPEG sam w sobie jest formatem przechowywania „stratnych” obrazów, a kompresja bezstratna w jakikolwiek sposób daje maksymalny zysk na poziomie 3-5%. Mówimy tutaj o programach, które mogą kilkakrotnie zmniejszyć rozmiar pliku.

Nawiasem mówiąc, w Gallerix Art Club od dawna wdrażana jest optymalizacja plików przesyłanych przez uczestników. Jest ona przeprowadzana automatycznie w dwóch etapach: pierwszy – natychmiast po przesłaniu (bezstratny, używany jest Jpegtran) i drugi – po pewnym czasie. programu JPEGMini.

Jeśli Twoje domowe archiwum nigdy nie było zoptymalizowane i zajmuje teraz na przykład 100 GB, całkiem możliwe jest zmniejszenie tej liczby 2-2,5 razy (do 45-50 GB) bez ingerencji w jakość obrazu i 3-4 razy (do 20-25 GB) z niewielkim, niezbyt zauważalnym spadkiem jakości.

Trochę o technicznej części pytania. Najprościej mówiąc, działanie narzędzi do kompresji obrazu można porównać do wynalezienia zmiennej przepływności dla plików audio. Sekcje audio bardziej nasycone różnymi dźwiękami kodowane są z dużą przepływnością, cisza - z najniższą. W przeciwieństwie do plików audio o stałej przepływności, format JPEG ma już wbudowaną optymalizację, której moc zależy od ustawienia jakości ustawionego podczas zapisywania pliku z dowolnego programu. Praca usług kompresji obrazu również opiera się na podejściu ze zmienną przepływnością - identyfikowaniu fragmentów obrazu, których kodowanie można sprytnie pominąć, aby zaoszczędzić miejsce na dysku.

Do tych celów na rynku dostępnych jest kilka komercyjnych rozwiązań i według wielu rosyjskich i zagranicznych kolegów JpegMini jest numerem jeden pod względem zestawu parametrów. Celem tego testu jest porównanie wszystkich komercyjnych i bezpłatnych narzędzi do optymalizacji obrazu w celu odświeżenia „tabeli rang”.

Pliki źródłowe

Pierwszy z nich – nakręcony z ręki telefonem komórkowym z przeszłości – Uwaga Samsunga II, z minimalną rozdzielczością pliku. Każdy z nas ma miliony takich zdjęć, takie pliki nie są nagradzane jakością, jest ich dużo i zazwyczaj są trochę nieostre i bardzo ziarniste.

Drugi plik ma całkowicie pochodzenie techniczne to wygenerowana tabela gradientów za pomocą Adobe Photoshop i zapisane ze 100% jakością. Widoczne zmiany w obróbce tej tabeli posłużą do oceny końcowej jakości.

Trzeci plik został nakręcony „przeciętnym” amatorskim aparatem Panasonic GF3 w automatycznym trybie ręcznym. To jest gospodarstwo domowe kamera systemowa, bez lusterek, ale z wymienną optyką. Dzięki stabilizacja optyczna, ostrość jest tu lepsza, to nie telefon komórkowy, ale hałas jest prawie taki sam.

Ostatni plik pochodzi z Unsplash.com i jest autorstwa Karla Fredricksona. Służy jako przykład zdjęcia wykonanego profesjonalnym aparatem z kosztowną optyką.

Narzędzia

JPEGMini

JPEGMini płatnego programu. Istnieją wersje za 20 i 149 USD, a także droga wersja serwerowa. Wersje desktopowe działają tak samo, młodsza ma dwa ograniczenia: w szybkości przetwarzania i w maksymalna rozdzielczość(28 MP), starszy jest ograniczony rozmiarem pliku (60 MP). Działa na Windowsie i Macu.

MałyJPG

Jeść wersja płatna w postaci wtyczki do Adobe Photoshop (50 USD) oraz darmowej wersji online z ograniczeniami dotyczącymi rozmiaru pliku i liczby pobrań dziennie (która jednak jest bardzo łatwa w zarządzaniu). Wtyczka działa również na systemach Windows i Mac. Pierwsze 500 plików miesięcznie za pośrednictwem API jest bezpłatnych, następnie 0,009 USD za plik.

Kompresor.io

Znany serwis internetowy. Jedynym ograniczeniem jest maksymalny rozmiar pliku, 10MB.

Kraken.io

Popularny na Zachodzie profesjonalny serwis z wysokimi cłami i rygorystycznymi kontyngentami. Darmowa wersja online jest ograniczona największy rozmiar plik ma 1 MB i trudno go postrzegać jako narzędzie. To nic innego jak wersja demonstracyjna - zwykły amatorski aparat nie jest w stanie wygenerować pliku mniejszego niż 2-3 MB. Taryfy za korzystanie z API zaczynają się od 5 USD miesięcznie za przychodzący wolumen 500 MB.

ConvertImage.net

Zestaw narzędzi online do przetwarzania obrazu, w tym kompresor JPEG. Całkowicie za darmo.

JPEG-Optimizer.com

Serwis internetowy. Całkowicie za darmo i bez ograniczeń. Jeść ustawienie ręczne poziom kompresji.

Optimizilla.com

Bezpłatny serwis internetowy. Ten sam silnik występuje także w innych domenach. Wielojęzyczny interfejs. Instalacja ręczna poziom kompresji (ustawienie pojawia się po załadowaniu obrazu). Nie więcej niż 20 plików jednocześnie.

DynamicDrive.com

Zestaw bezpłatnych narzędzi do przetwarzania obrazu online. Zoptymalizowany z limitem pliku 2,8 MB. Wyświetla kilka gotowych obrazów za pomocą na różnych poziomach kompresja do wyboru.

ShortPixel.com

Niektóre nowa usługa z mnóstwem różnych plany taryfowe obowiązuje miesięczna subskrypcja i stawki pakietowe (10 000 plików za 9,99 USD). Działa poprzez API lub interfejs WWW (do 20 plików jednocześnie). Limit rozmiaru pliku w darmowa wersja internetowa- do 10 MB.

ACDSee Ultimate

ACDSee Ultimate 9 profesjonalny program do organizowania i przetwarzania obrazów dla systemu Windows. Zapisywanie z włączoną opcją „Optymalizuj kody Huffmana” i „Próbkowanie składników koloru”, jakość 70%. Program jest płatny, cena zaczyna się od 40 USD za najskromniejszą wersję, ale wiele z nich ma podobne ustawienia darmowe programy. To jest przykład czystego oszczędzania z odrobiną bezstratnej optymalizacji.

„Czysty” JPEG

Zapisywanie pliku o jakości około 70% (9 z 12) z programu Adobe Photoshop CS6, odmiany „podstawowego” formatu. Oto czysty JPEG wykorzystujący wyłącznie możliwości formatu, „najniższego punktu odniesienia”, dostępny za darmo z dowolnego programu, który potrafi zapisać w formacie JPG.

Teraz trochę o tych, którzy zostali zapomniani i dlaczego. Z pewnością znajdziesz to w Google, jeśli sam spróbujesz znaleźć optymalizatory, więc nie sposób o nich nie wspomnieć.

Myślę, że dla niedoświadczonego użytkownika z plikiem niezbyt wysokiej jakości wynik wszystkich narzędzi będzie wydawał się akceptowalny. Różnice pomiędzy oryginalną jakością a zoptymalizowanym plikiem z artefaktami nie są warte słów, jeśli chodzi o stare, rozmazane zdjęcia w domowym archiwum. Wszystko, co zostało napisane poniżej, dotyczy głównie fotoestetów. Na poziomie amatorskim wszystkie narzędzia dają całkiem odpowiednie wyniki; liczy się tylko ostateczny rozmiar pliku.

JpegMini i Kraken znalazły się na samym dole tabeli, posortowane według wielkości finalnego pliku, ale tylko te dwie technologie kompresują plik, zapisując obraz w pełni uczciwie. W kategorii „10 punktów” JpegMini wygląda atrakcyjniej ze wszystkich stron.

Przy nieco mniej akceptowalnym obrazie okazało się, że Compressor.io lepiej kompresuje małe pliki, a Optimizilla.com duże, ale jest to bardzo arbitralny wniosek w ramach tego testu.

Biorąc pod uwagę stosunek wielkości do jakości, co w tabeli jest poniżej dziewiątek, ale ma niższe noty, kiedy większy rozmiar plik - nie ma praktycznego znaczenia. A nad „dziewiątkami” są tylko dwie usługi.

Ciekawie okazała się najnowsza usługa – ShortPixel. Artefakty są bardzo zauważalne, ale jeśli skompresujesz obraz do tego rozmiaru, użyj go najbardziej formacie JPG- obraz okazuje się zauważalnie gorszy. ShortPixel jest bardziej zorientowany na API i stosunkowo niedrogi, ale bardzo niszczy obraz.

TinyJPG w formie wtyczki jest skromniejsze, co chyba jest zrobione poprawnie. Nadal jest lepszy od wszystkich innych pod względem rozmiaru pliku, ale artefakty są nieco mniejsze niż w wersji online.

Ciekawa funkcja TinyJPG w postaci wtyczki: po przetworzeniu plik może być 8-10 razy mniejszy niż rozmiar oryginalny lub półtora do dwóch razy większy.

Obraz testowy nr 2 został najlepiej skompresowany za pomocą programu ShortPixel, ale w przypadku większości plików z dużą liczbą drobnych szczegółów zwycięża wersja internetowa TinyJPG. Plik okazuje się mniejszy, a oryginalny obraz nie jest tak zdeformowany. Jednak TinyJPG akceptuje pliki nie większe niż 5 MB, a ShortPixel, nawet w wersji darmowej, akceptuje pliki do 10 MB.

Inny ważny czynnik pomiary (z wyjątkiem ostatecznego rozmiaru pliku) - łatwość użycia na streamie. Na przykład, jeśli po raz pierwszy masz za zadanie optymalizację domowego archiwum o pojemności 100 GB, jego całkowite przetworzenie przy użyciu usług online będzie bardzo pracochłonne i czasochłonne ze względu na ograniczenia i konieczność przesyłania tego woluminu w porcjach na serwer i z powrotem. Pomimo tego, że za skromne 20 dolarów, w przypadku JpegMini wymaga to jednego ruchu myszką (dosłownie: wystarczy przeciągnąć Folder główny z obrazami w oknie programu).

Nawiasem mówiąc, wtyczka TinyJPG do Photoshopa nie jest zaprojektowana jako filtr, ale jako kanał eksportu, tj. Nie nadaje się do tworzenia skryptu automatyzacji w PS. Korekta: ze strony producenta można pobrać skrypty automatyzujące, które działają w dowolnej wersji Photoshopa, a w Photoshopie CC eksport poprzez wtyczkę jest operacją przetwarzanie wsadowe. Wtyczka nie ma żadnych ograniczeń - testowana na pliku o rozdzielczości 130MP (czas przetwarzania to około 7 minut na dość mocnym komputerze).

Ogólnie rzecz biorąc, w przypadku przetwarzania masowego istnieją tylko dwie opcje - użycie API i JpegMini. Za każdy przetworzony plik będziesz musiał zapłacić za przetwarzanie poprzez API.

wnioski

Wszystkie narzędzia, które pozwalają uzyskać w miarę akceptowalny plik o mniejszym rozmiarze niż zapewnia JpegMini - albo wizualnie degradują obraz i ustępują mu łatwością obsługi, albo mają mniej atrakcyjną politykę cenową - czasową lub plik po pliku wypożyczenie zamiast jednorazowego zakupu w JpegMini.
W przypadkach, gdy jakość obrazu ma ogromne znaczenie i gdy zmniejszenie rozmiaru pliku kosztem degradacji wizualnej jest niedopuszczalne, najlepszym narzędziem pozostaje JpegMini.
W przypadkach, gdy jakość pliki źródłowe można trochę pominąć ze względu na kompresję, sensowne jest użycie obu wersji TinyJPG, w zależności od zadania.
Jeśli wybierasz tylko z darmowych kompresorów, najlepiej wyglądają Compressor.io i Optimizilla.com, które prawie nie psują obrazu, mimo że finalny plik jest zauważalnie mniejszy niż JpegMini.
Właściciele witryn informacyjnych z dużym przepływem ilustracji, których wymagania dotyczące jakości nie są tak ostre, warto zwrócić uwagę na ShortPixel i TinyJPG. Ich zaletami są przystępne ceny, kompresja nagrań i praca poprzez API. A jeśli jakość ma znaczenie (ale pieniądze nie), to warto połączyć Krakena przez API lub, w przypadku bardzo dużych wolumenów, wersję serwerową JpegMini.

recenzja

Optymalizacja obrazów jest ważną częścią promocji witryny. Odpowiednio zoptymalizowane obrazy przyczyniają się do wyższej pozycji zasobu w wynikach wyszukiwania i przyspieszają prędkość ładowania treści. Co to jest optymalizacja obrazu i jak się ją wykonuje?

Optymalizacja obrazu to proces zmniejszania rozmiaru obrazów używanych w projektach stron internetowych i artykułów bez utraty jakości.

Zanim rozpoczniemy proces „kompresowania” obrazów, oceniamy prędkość ładowania stron internetowych i rozumiemy, jakie wskaźniki uniemożliwiają nam poprawę wyników. Pomoże w tym usługa PageSpeed Insights. Jeśli strona uzyska więcej niż 85 na 100 punktów, oznacza to, że tak dobry wynik i właśnie do takiej wartości powinniśmy dążyć.

Na przykład teraz wynik jest taki:

A po optymalizacji:

Wynik ten był możliwy dzięki wykorzystaniu rekomendacji Google:

formacie PNG

Jak zoptymalizować obrazy, jeśli do ich zapisywania używany jest format PNG? Możesz w tym celu skorzystać z rekomendacji Google:

Jeśli planujesz tylko podstawową optymalizację obrazu, możesz skorzystać z dowolnego programu do edycji obrazu: GIMP, Photoshop itp. Ale który jest lepszy? Mały eksperyment pomoże Ci się tego dowiedzieć. Pobieramy niezoptymalizowany obraz formacie PNG o wadze 293 KB:

Tworzymy dwa foldery: „GIMP” i „Photoshop” i umieszczamy w nich to samo zdjęcie.

W jaki sposób obraz jest kompresowany bez utraty jakości przy użyciu edytorów GIMP i Photoshop?

Wynik wygląda następująco:

Konkluzja: Photoshop lepiej zoptymalizował obraz niż GIMP.

Nie oznacza to jednak, że możesz korzystać tylko z tych opcji. Istnieją inne, nie mniej skuteczne narzędzia do kompresji obrazów w formacie PNG. Na przykład i PNGOUT. Efekt ich pracy jest następujący:

Pomimo tego, że OptiPNG przegrał z Photoshopem o 1 KB, sam program waży zaledwie 96 KB, a to duży plus. Ale PNGOUT przewyższył swoich „konkurentów” pod każdym względem:

Praca z programami

Przede wszystkim musisz pobrać narzędzie OptiPNG lub PNGOUT (a może oba) z oficjalnych stron internetowych. Następnie skopiuj pliki .exe do folderu: C:\Windows.

Aby „uprościć” zadanie, wystarczy skopiować te pliki z folderu Windows i umieścić do nich skróty na pulpicie. Dla wygody skrót OptiPNG można od razu nazwać opting-o7 (parametr maksymalna kompresja który utrzymuje jakość). Pozostaje tylko go przesunąć niezbędne zdjęcia do skrótu i poczekaj, aż program je zoptymalizuje.

Ta metoda jest prosta, ale niezbyt wygodna. Czasami podczas próby optymalizacji dużej liczby obrazów może pojawić się błąd. Ponadto nie każdy będzie lubił ciągłe przeciąganie i upuszczanie plików.

Dlatego istnieje inna opcja pracy z narzędziami. Tworzymy dokument testowy, otwieramy go i wpisujemy tam kod (działa poprawnie tylko na systemie operacyjnym Windows):

Zapisujemy plik w formacie .reg i w kodowaniu ANSI, uruchamiamy, zatwierdzamy wszystkie działania i gotowe. Narzędzia są zintegrowane Powłoka Windowsa.

Jak przebiega optymalizacja obrazu? Proces wygląda następująco: kliknij prawym przyciskiem myszy folder zawierający niezoptymalizowane obrazy w formacie PNG (narzędzie nie zmienia plików innych rozszerzeń) i wybierz program, za pomocą którego skompresujemy obrazy. Możesz to zrobić za pomocą dwóch narzędzi po kolei.

Następnie otwiera wiersz poleceń, który demonstruje proces optymalizacji:

formacie JPEG

Aby skompresować obraz JPEG, potrzebujesz narzędzi Jpegtran lub Jpegoptim. Oczywiście, że możesz skorzystać Redaktorzy GIMP-a i Photoshopie. Jednak z zadaniem optymalizacyjnym lepiej radzą sobie Jpegtran lub Jpegoptim, dlatego pobieramy i instalujemy oba programy.

Konfigurowanie narzędzia Jpegtran

Aktywacja programu Jpegtran poprzez wstrzyknięcie go do powłoki Windows nie jest do końca odpowiednia opcja dla użyteczności. Nie będzie działać poprawnie, ponieważ kod (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) został zaprojektowany tak, aby kompresować wagę tylko jednego obrazu, a nie wszystkich plików w folderze.

Oznacza to, że musisz użyć innej metody, aby aktywować narzędzie. Jpegtran nie musi być umieszczony w folderze C:\Windows, ale możesz zapisać jego kopię tutaj. Umieść program jpegtran.exe w dowolnym folderze i zmień jego nazwę (dla wygody) na!jpegtran.

Następnie za pomocą Notepad++ tworzymy plik w kodowaniu UTF-8 (bez BOM) z rozszerzeniem .bat i nazwą!start. Umieściliśmy w nim taki kod:

Aby zoptymalizować obrazy, musisz umieścić pliki jpegtran.exe i!start.bat w tym samym folderze i rozpocząć proces kompresji za pomocą pliku!start.bat:

Konfigurowanie programu Jpegoptim

Narzędzie Jpegoptim można bez problemu zintegrować z powłoką systemu Windows. Aby ją aktywować należy dodać kod na końcu pliku PMGoptim.reg (został już wcześniej utworzony dla narzędzi do obrazów PNG):

Proces optymalizacji obrazów za pomocą tego programu jest prosty: kliknij lewym przyciskiem myszy folder z obrazami i wybierz „Uruchom jpegoptim”.

Wynik Jpegtrana i Jpegoptim:

Usługi online

W Internecie istnieje wiele usług, które pozwalają skutecznie optymalizować zdjęcia. Czasami wynik ich pracy jest lepszy niż narzędzia omówione powyżej.

Jednak usługi online pogarszają jakość kompresji obrazów. Czasami tylko kilka pikseli, ale zniekształcenie jest nadal zauważalne. Oznacza to, że rozmiar obrazów może nam odpowiadać, ale jakość pozostawia wiele do życzenia.

Według pracowników Yandex „zdjęcia są bardzo ważną częścią naszych poszukiwań. Pomagają użytkownikom zobaczyć tranzyt Wenus przez dysk słoneczny, dowiedzieć się, jak wygląda Yorkshire terrier lub nowy sedan Tesli, skład grupy ołowianych sterowców i jak zawiązać krawat.

Dzięki rankingowi w wyszukiwaniu na podstawie obrazów witryna będzie mogła uzyskać znaczną część ruchu. Także w przypadku zapytań komercyjnych, gdy użytkownik chce zobaczyć, jak wygląda dany produkt. Ponadto takie pozytywne czynniki behawioralne, jak liczba przejść, czas trwania i głębokość przeglądania witryny przez użytkowników, którzy przybyli z wyszukiwania obrazów, również wpływają na ranking witryny w bezpłatnych wynikach wyszukiwania dla wszystkich zapytań. I atrakcja grupa docelowa do witryny komercyjnej, nawet ze źródła takiego jak wyszukiwarka obrazów, przy odpowiedniej prezentacji treści, może przyciągnąć do witryny znaczną liczbę docelowych użytkowników, którzy wykonają działania powodujące konwersję.

Przeglądanie zdjęć w serwisie Yandex.Images

W materiale porozmawiamy O standardowe metody optymalizacja obrazu mająca zastosowanie do wszystkich typów witryn i uwzględniana przez wszystkie wyszukiwarki. Teraz każdy z nich zostanie rozważony bardziej szczegółowo, a także podany zostanie rozszerzony opis każdego punktu zaleceń wraz z objaśnieniami.

Optymalizacja obrazu

Dostępność na stronie obrazy wysokiej jakości- jeden z elementów sukcesu większości projektów internetowych. Użytkownicy wolą otrzymywać informacje w formie formularza obrazy graficzne, nie tekst. Jest postrzegany szybciej i lepiej, łatwiej go zapamiętać. Aby zwiększyć konwersję witryny i ją ulepszyć czynniki behawioralne konieczny jest ciągły rozwój treści graficznych. Musisz starać się jak najlepiej zwizualizować wszystkie aspekty i niuanse dostępnych informacji. Dzięki temu użytkownicy będą chcieli obejrzeć więcej stron serwisu, łatwiej będzie im dokonać wyboru i zakończyć akcję powodującą konwersję.

Korzyści płynące z optymalizacji obrazu są niedoceniane przez wielu ekspertów. Jednakże, dzięki proste kroki możesz uzyskać doskonałe wyniki w postaci lojalnych użytkowników, których liczba będzie rosła zarówno w wyniku wyszukiwania obrazów, jak i wyszukiwań organicznych.

Atrybuty obrazu alternatywnego i tytułowego

Najważniejszymi atrybutami obrazu, które można określić w odpowiednim znaczniku kodu HTML, są atrybuty alt i title. Ich wartości są jednym z głównych źródeł informacji o obrazie Wyszukiwarki.

atrybut alternatywny — Jest to alternatywne źródło informacji dla użytkowników, którzy wyłączyli wyświetlanie obrazów w swojej przeglądarce. Jeśli zdefiniowano atrybut alt, to w przypadku braku możliwości wyświetlenia obrazu w jego miejsce wyświetli się tekst atrybutu:

Obraz z określonym atrybutem alt

Bez ustawionego atrybutu alt obraz będzie wyświetlany jako pusty:

Obraz bez określonego atrybutualt

Szczególnie ważne jest opisywanie obrazów za pomocą atrybutu alt w przypadku witryn, których treść składa się głównie z obrazów.

Atrybut tytułu dostarcza dodatkowych informacji o obrazie. Tekst zawarty w tym atrybucie pojawia się po najechaniu kursorem na obraz:

ObrazCdany atrybuttytuł

Rozważmy więc główne zalecenia wyszukiwarek dotyczące pracy z obrazami stron internetowych, aby na ich podstawie, a także w oparciu o praktyki promocji stron internetowych, móc określić listę działań, które pomogą Ci uzyskać maksymalny efekt z obrazu optymalizacja.

Nie osadzaj znaczącego tekstu na obrazach. Innymi słowy, wszystkie ważne napisy muszą mieć formę tekstową.

Nadaj plikom obrazów szczegółowe, opisowe nazwy. Najlepiej użyć w nazwie pliku 1-2 słów opisujących obraz.

Dodaj szczegółowy tekst do tagualt.

Najlepsza opcja:

Zapewnij wystarczający kontekst dla obrazów. Tekst otaczający obraz powinien odpowiadać temu, co jest na nim przedstawione.

Zastanów się, jak najlepiej chronić swoje zdjęcia. Można to zrobić na różne sposoby, na przykład poprzez dodanie znaku wodnego, umieszczenie kodu umożliwiającego osadzenie obrazu w innej witrynie lub udostępnienie obrazów na licencji wymagającej łącza do źródła, takiej jak licencja Creative Commons.

Publikowanie zdjęć dobrej jakości. Zdjęcia wysokiej jakości nie tylko pomóc użytkownikom zobaczyć wszystko małe części na obrazie, ale także lepiej sprawdzają się jako miniatury w wynikach wyszukiwania i są częściej klikane przez użytkowników.

Dla każdego obrazu utwórz osobną stronę docelową, na której będą zbierane wszystkie informacje z nim związane. Dotyczy to witryn, w których obrazy są jednym z głównych elementów treści, lub sklepów internetowych.

Staraj się umieszczać obrazy na górze stron, tak aby były widoczne na pierwszy rzut oka. To szybko zainteresuje użytkownika i obejrzy stronę do końca.

Spróbuj zorganizować swoje katalogi w taki sposób, aby podobne obrazy trzymano razem.

Określ szerokość i wysokość wszystkich obrazów. Przyspieszy to ładowanie strony, ponieważ... Przeglądarki mogą je renderować przed załadowaniem obrazów, jeśli znają ilość miejsca zarezerwowanego dla elementów niewymiennych.

Nie zapomnij o tekstach opisujących obrazek:

Podpisy do zdjęć (alt, tytuł);
Tekst obok obrazu;
Nazwy plików i skryptów z uwzględnieniem transliteracji i uproszczonego tłumaczenia międzyliniowego;
Teksty linków do zdjęć z innych stron i z innych witryn;
Teksty i tytuły krótkich dokumentów ujętych w jeden obraz.

To właśnie z tekstów odnoszących się do zdjęć Yandex wyszukuje obrazy na podstawie żądań użytkowników.

Yandex indeksuje tylko standardowe obrazy formaty graficzne(JPEG, GIF i PNG). Przed przesłaniem obrazu do serwisu należy upewnić się, że jest on zapisany w jednym z tych formatów.

Na ranking wpływa także jakość samego obrazu.

W wynikach wyszukiwania przy każdym znalezionym obrazie link do strony, na której opis tekstowy Obrazy lepiej odpowiadają słowom w zapytaniu. Dlatego treść tekstowa strony jest ważnym czynnikiem rankingowym w wyszukiwaniu obrazów. Podobnie jak w przypadku Google, powinien on zawierać jak najwięcej informacji o tym, co widać na obrazku i to powinno uzupełniać tekst.

Kroki, które należy podjąć, aby zoptymalizować obrazy

1. Obrazy muszą być przechowywane i dostępne na tym samym serwerze i hostingu, co sama witryna. Jest to jeden ze wskaźników jakości witryny dla wyszukiwarek. Tylko poważne witryny i firmy mogą sobie pozwolić na przechowywanie zdjęć na swoim hostingu lub serwerze, ponieważ... wymaga to dodatkowych kosztów materiałowych. Ponadto takie obrazy będą ładować się szybciej.

2. Używaj oryginalnych obrazów wysokiej jakości i maksymalnej rozdzielczości. Obrazy te z kolei muszą zostać przetworzone przez system zarządzania witryną i wyświetlone na odpowiednich stronach w mniejszy rozmiar dzięki czemu strona ładuje się szybko. Po kliknięciu obrazu powinien on otworzyć się w największym możliwym oryginalnym rozmiarze, jaki jest dostępny.

3. Atrybuty alt i title zdjęcia muszą być wypełnione w taki sposób, aby dokładnie opisywały jego zawartość. Muszą używać 1-2 słów kluczowych, pod kątem których strona jest zoptymalizowana. Najlepiej, jeśli jest to główne słowo kluczowe pasujące do tytułu strony i kotwicy linku do niej z menu głównego serwisu.

4. Umieść podpis pod obrazkami, który po kliknięciu pojawi się również poniżej. Podpis może być identyczny z atrybutem alt. Podpis musi znajdować się w tym samym akapicie „P”, komórce tabeli „TD” lub znaczniku „DIV”, co obraz.

5. Strona, na której umieszczony jest obraz, musi zawierać odpowiedni tekst. W tekście należy także uwzględnić to, co jest przedstawione na obrazku. To z kolei uzupełnia ten tekst.

6. W atrybutach określ wysokość i szerokość obrazu.

7. Zmień nazwę plików graficznych, zapisując je w transliteracji. W nazwie pliku określ w 1-2 słowach, co zawiera obraz.

8. Do zdjęć możesz dodatkowo dodać atrybut LONGDESC. Więcej szczegółów na ten temat: http://htmlbook.ru/html/img/longdesc.

9. We właściwościach plików jpg oryginalne obrazy wypełnij następujące pola:

— Tytuł: pasuje do atrybutu alt obrazu;

— Temat: nazwa sekcji, do której należy produkt;

— Ocena: 5 gwiazdek;

— Słowa kluczowe: słowa kluczowe ze strony działu, do którego należy produkt;

— Uwagi: opis produktu z pola „O produkcie” na stronie produktu;

— Wymiary: maksymalny rozmiar oryginału;

— Szerokość: maksymalny rozmiar oryginału;

— Wysokość: maksymalny rozmiar oryginału;

— Rozdzielczość pozioma: maksymalna oryginalne znaczenie;

— Rozdzielczość pionowa: maksymalna wartość pierwotna;

— Głębia koloru: maksymalna wartość pierwotna;

— Właściciel: nazwa firmy;

— Komputer: nazwa firmy.

Wniosek

Jak widać, istnieje wystarczająco dużo wskazówek i zaleceń dotyczących optymalizacji obrazów z samych wyszukiwarek główny pomysł o tym, co należy zrobić, aby witryna mogła normalnie zajmować pozycję w wyszukiwaniu obrazów. Wiele zaleceń pokrywa się, niektóre są wyjątkowe. Do wdrożenia większości zaleceń wystarczą jednorazowe działania, dzięki którym stabilnie wynik pozytywny. Nie zaniedbuj możliwości zdobycia znacznej liczby odwiedzających Twoje zasoby. Zawsze należy publikować jak najwięcej treści graficznych, dzięki czemu witryna może zdobyć zaufanie stałych i nowych odwiedzających.