Pracując z niektórymi motywami Wordpress modyfikowałem niektóre pliki graficzne i zauważyłem, że moje edytowane wersje są czasami 3-4 razy większe niż oryginalne (zapisane w tym samym formacie). Nie chcę obniżać jakości - jakie są sposoby zmniejszenia rozmiaru pliku, aby ładował się szybciej?
Na przykład teraz używam Photoshopa i ustawiam suwak jakości obrazu na „8” (spośród 10).
Odpowiedzi:
Smashing Magazine napisał 2 świetne artykuły na temat optymalizacji PNG i optymalizacji JPG .
Są dość szczegółowe, wyjaśniając bardzo szczegółowo niektóre rzeczy, których możesz nie wiedzieć o formatach i ich implementacjach. Na przykład artykuł JPEG: „Należy pamiętać, że po ustawieniu opcji Jakość poniżej 50 w programie Photoshop uruchamia dodatkowy algorytm optymalizacji zwany próbkowaniem kolorów w dół, który uśrednia kolor w sąsiednich ośmiopikselowych blokach”.
Oba artykuły dotyczą określonych technik, których można użyć w Photoshopie, aby przygotować pliki do większej kompresji. Co jest znacznie bardziej skuteczne niż techniki stosowane po zapisaniu pliku.
Po zapisaniu tych plików lub w przypadku plików, które nie mają wystarczającego szczęścia, aby warstwowe pliki źródłowe można było ulepszyć w programie Photoshop, nadal istnieje większa kompresja przy wyciąganiu tych plików.
Używam aplikacji Mac o nazwie ImageOptim . Z ich strony:
ImageOptim optymalizuje obrazy - dzięki czemu zajmują mniej miejsca na dysku i ładują się szybciej - poprzez znalezienie najlepszych parametrów kompresji i usunięcie niepotrzebnych komentarzy i profili kolorów. Obsługuje animacje PNG, JPEG i GIF.
ImageOptim zapewnia GUI dla różnych narzędzi optymalizacyjnych: AdvPNG z AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran z libjpeg, Gifsicle i opcjonalnie PNGOUT .
Doskonale nadaje się do publikowania obrazów w Internecie (łatwo zmniejsza obrazy „Zapisane do Internetu” w Photoshopie), a także jest przydatny do zmniejszania aplikacji Mac i iPhone.
Bułka z masłem. Przeciągnij swoje obrazy (lub foldery obrazów) do okna, przechodzi przez wszystkie te narzędzia, modyfikując schematy kompresji i usuwając niepotrzebne metadane i informacje o profilu kolorów (które i tak nie są szeroko obsługiwane - przed zapisaniem powinieneś naprawić profile kolorów, nie zapisując ich i nie osadzając).
Wszystkie narzędzia połączone w tym cytacie mają wersje Windows / Linux / Mac oprócz PNGOUT, ale na szczęście ktoś przeniósł PNGOUT na OS X i Linux, ponieważ są tak przemyślane. Jeśli zdecydujesz się użyć ImageOptim, będzie on zawierał wszystkie oprócz PNGOUT w .app, więc złap port PNGOUT, upuść go w / usr / local / bin (lub gdziekolwiek) i powiedz ImageOptim, gdzie on jest.
Nierzadko zdarza mi się, szczególnie w przypadku obrazów PNG, aby rozmiar pliku spadł o ponad 30%, nawet po zapisaniu w programie „Zapisz dla Internetu i urządzeń” w Photoshopie.
Protip: Po uruchomieniu optymalizacji posortuj według kolumny ikon po lewej stronie i zaznacz wszystkie wiersze ikoną (X) - pliki, które nie zostały już zmniejszone. Usuń je z listy i ponownie uruchom wszystkie obrazy, które mają ikonę znacznika wyboru. Mogę prawie obiecać, że będziesz mieć obrazy, które wciąż tracą rozmiar pliku. Powtarzaj sortowanie, wybieranie, usuwanie, ponowne uruchamianie, aż zobaczysz wszystkie ikony (X) i nazwiesz to dniem.
Podczas zapisywania zdjęć w Photoshopie zalecam używanie File > Save for Web and Devices. Pozwoli ci grać z poziomami kompresji i zobaczyć wynik wizualny w czasie rzeczywistym. Na zdjęciach zwykle możesz zapisać go poniżej poziomu 8 i nadal uzyskać świetne wyniki.
Może chcesz sprawdzić Yahoo's Smush.it . Uważam, że działa bardzo dobrze.
W przypadku obrazów PNG można zmniejszyć liczbę kolorów na mapie kolorów i zapisać jako zindeksowany obraz PNG. Rozważmy na przykład logo o rozmiarze 128 x 128 pikseli (nieskompresowane). Wyobraź sobie, że faktycznie używa tylko 16 kolorów.
Widać, że bez obniżania jakości obrazu (dotyczy to tylko niektórych rodzajów obrazów) można znacznie zmniejszyć rozmiar.
W przypadku przycisków i ikon witryn można również rozważyć ich połączenie w jeden obraz i użycie CSS lub JavaScript do kontrolowania ich wyświetlania (duszki). Oszczędza to liczbę żądań HTTP wykonanych dla każdego obrazu.
Wypróbuj inne formaty.
Zasadniczo spróbuj zapisać obraz w różnych formatach, a następnie sprawdź rozmiar pliku.
Jeśli używasz JPEG, powinieneś być w stanie zmieniać jakość obrazu w górę iw dół w edytorze graficznym, takim jak paint.net. 50% jakości obrazu jest zwykle wystarczająca dla Internetu i znacznie zmniejsza obraz.
W przypadku PNG nie można tego zrobić, ale warto zauważyć, że czasami PNG jest znacznie większy, a czasem znacznie mniejszy niż JPEG. PNG jest znacznie mniejszy w przypadku czarno-białych obrazów, na przykład takich jak czarno-białe rysunki linii.
Porada podana w dzisiejszych czasach polega na użyciu duszków CSS, aby przyspieszyć ładowanie poprzez zmniejszenie liczby żądań, ale znowu musisz spojrzeć na otrzymany rozmiar obrazu. Jest całkiem możliwe, że obraz duszka CSS będzie znacznie większy niż obrazy składowe, jeśli na przykład połączysz kilka czarno-białych plików PNG z jednym kolorem.
Chcesz również upewnić się, że usuwasz wszystkie dane EXIF - prawie wszystko to nie ma znaczenia dla użytkowników w Internecie, czy naprawdę muszą wiedzieć, że użyłeś Canona 5D do zrobienia zdjęcia i że użyłeś F-Stop 2.8, eksponowany przez 0,5 sekundy, z ISO 160, bez odchylenia ekspozycji i ogniskowej 9 mm?
Wszystkie te metadane zwiększają wagę obrazu i ogólnie powinny zostać usunięte.
Jak wskazuje jessegavin , większość aplikacji graficznych wyświetli podgląd efektów kompresji - użyj ich, ponieważ ogólne ustawienie „8” rzadko daje najlepszą możliwą kompromis.
Wreszcie wtyczka Google Page Speed Firefox / Firebug może dać ci dobre wyobrażenie o tym, o ile możesz zmniejszyć rozmiary obrazów (w tym umożliwić przeglądanie i zapisywanie mniejszych wersji).
Po wykonaniu wszystkich innych sugestii, aby upewnić się, że obraz jest tak mały, jak to możliwe, przy jednoczesnym zachowaniu pożądanego poziomu jakości, będziesz również chciał skonfigurować swoją stronę internetową, aby wyświetlała obrazy z minimalnymi nagłówkami HTTP i upewnij się, że podawane nagłówki umożliwiają odpowiednie przechowywanie obrazów przez buforowanie serwerów proxy i przeglądarek internetowych.
Aby zmniejszyć rozmiar żądań, upewnij się, że serwer WWW jest skonfigurowany tak, aby nie wysyłać bezużytecznych nagłówków, takich jak X-Powered-By. Upewnij się również, że podajesz takie rzeczy, jak obrazy, CSS i inne elementy statyczne z hosta, który nie ustawia plików cookie (np. Static.example.com).
W przypadku obrazów, które są statyczne, ustaw nagłówek Expires na datę w dalekiej przyszłości. Zapewnia to, że przeglądarka internetowa i wszelkie pośredniczące serwery buforujące na środku będą trzymać obraz tak długo, jak to możliwe. Jedynym minusem jest to, że jeśli chcesz pokazać inny obraz, musisz użyć innej nazwy pliku i łącza do niego. Skuteczne może być numerowanie wersji w nazwie pliku (np. Myimage_1.png lub /images/3/logo.png). W przypadku mniej statycznych stron ustaw realistyczny nagłówek Wygasa (dostęp plus X godzin) i upewnij się, że ustawiasz nagłówek Ostatnia modyfikacja lub nagłówek eTag (nie oba), aby przeglądarki, które wcześniej pobrały pliki, mogły szybko przetestować czy mają aktualną wersję, porównując nagłówki zamiast ciągnąć w dół cały obraz.
Chociaż dostępnych jest wiele zasobów omawiających te techniki, Yahoo wykonało świetną robotę, dostarczając wiele wskazówek dotyczących poprawy wydajności dostarczania treści w jednym miejscu.