Zmniejsz rozmiar pliku bez utraty jakości

11

Chciałbym zapisać pliki w Photoshopie, ale powinny być jak najmniejsze.

Używam Zapisz dla Internetu (i Urządzeń) i zapisuję jako JPEG. Oto ustawienia, których użyłem:

Ustawienia

Naprawdę nie chcę obniżać ustawień jakości, ponieważ używam tekstu i czasami widzę artefakty, jeśli ustawienie jest zbyt niskie.

Powoduje to utworzenie plików o wielkości kilkuset kilobajtów w zależności od rozmiaru obrazu. Chociaż nie jest to ogromny problem, te obrazy są używane w Internecie, a mniejsze są lepsze. Jakie są techniki bez obniżania jakości w celu zmniejszenia rozmiaru pliku?

Aktualizacja:

Aby dodać więcej informacji tutaj:

Wiele obrazów, których używam i które tworzę, wysyłanych jest pocztą elektroniczną. Ogranicza to poważnie to, co mogę zrobić z umieszczaniem tekstu za pomocą HTML i CSS nad obrazem.

Używam również różnych czcionek. Niektórych mógłbym użyć do Internetu za pomocą CSS, @font-faceale możesz napotkać duże rozmiary plików, aw niektórych przypadkach nie możesz legalnie załadować czcionki do sieci. Mógłbym skorzystać z usługi takiej jak Typekit, ale ponownie wiele używanych czcionek nie jest dostępnych w Typekit.

Oto przykładowy obraz:

Przykładowy obraz

— L84
źródło

1

Jest na to kilka odpowiedzi - pomocny byłby przykład obrazów, o których mówisz.

— e100

1

@ e100 - Aktualizuję pytanie, aby podać przykładowy obraz i dodać więcej informacji.

— L84

Podobne pytanie: graphicdesign.stackexchange.com/q/3429/10419

— Kornel

Jeśli kontrolujesz stronę internetową, sprawdź opcje kodu / kompilacji. Jestem projektantem dla profesjonalnego zespołu internetowego i dostarczamy pełny ekran wideo na komputer stacjonarny / telefon komórkowy bez wielkiego przeboju. Obrazy, o ile nie są ściśle wymagane, to wektorowy plik SVG i ładowany jako czcionka. Drastycznie zmniejsza liczbę KB stron. Banery bohaterów o szerokości 2000 pikseli mają format JPG na poziomie 85%, a faceci ładują się w tle. Urządzenie użytkownika końcowego zostaje wykryte i dostarczone względne wersje pliku (tj. Mniejsza wersja dla urządzeń mobilnych). Zanim użytkownik przejdzie na stronę główną, ładowanie ekranu jest natychmiastowe. I dążymy do strony głównej maksymalnie 2 sekundy.

— Applefanboy

15

Wybór najlepszej metody kompresji zależy od zawartości obrazu. Jeśli próbujesz zapisać obraz z dużą ilością kolorów i płynnymi przejściami między nimi, wybierz raczej JPEG. W przeciwnym razie, jeśli masz jakiś lineart, tekst, obraz z kilkoma kolorami, powinieneś spróbować PNG.

Konkretny schemat kompresji, parametry, redukcja kolorów itp. Zależą od konkretnego przypadku. Istnieje kilka obrazów, które można bezpiecznie zapisać za pomocą „suwaka” kompresji JPEG ustawionego na 30 lub 40 bez ujawniania artefaktów. Niektóre inne wymagają ustawień 80 lub więcej. Twoje oko powinno być sędzią.

Kiedy mówimy o kompresji JPEG, nie wahaj się użyć np. Opcji „Progresywnej” lub ustawić „Rozmycie” na wartość niezerową (subtelne rozmycie może maskować poważne artefakty kompresji).

W przypadku PNG powinieneś starać się maksymalnie ograniczyć ilość używanych kolorów (w tym celu użyj PNG-8). Gdy wymagane jest „wygładzenie”, wypróbuj inne algorytmy ditheringu.

Oto kilka przykładów:

JPEG, progresywny, jakość: 40, rozmycie: 0,18 JPEG, zoptymalizowany, jakość: 60, rozmycie: 0 JPEG, progresywny, jakość: 60, rozmycie: 0 PNG-8, Dithering: rozproszony, 256 kolorów

Od lewej do prawej, od góry do dołu, ich parametry to:

JPEG, progresywny, jakość: 40, rozmycie: 0,18, rozmiar: 9 672 bajtów
JPEG, zoptymalizowany, jakość: 60, rozmycie: 0, rozmiar: 16 898 bajtów
JPEG, progresywny, jakość: 60, rozmycie: 0, rozmiar: 11 104 bajtów
PNG-8, Dithering: rozproszony, Kolory: 256, Rozmiar: 4528 bajtów

Porównaj je wizualnie, a następnie dobrze przyjrzyj się ich rozmiarom danych. Pierwsza para to około 9,7 kB vs. 16,9 kB. Drugi to 11,1 kB vs. 4,5 kB. Wszystko to dzięki (IMHO) nieznacznej różnicy wizualnej.

— thebodzio
źródło

Moje największe obawy dotyczące opcji progresywnej to obsługa klientów e-mail. Dodałem więcej informacji do mojego pytania, aby to wyjaśnić.

— L84

1

O ile wiem, „progresywny” jest częścią standardu JPEG, a nie czymś egzotycznym, więc wsparcie powinno wynosić prawie 100%. Ale to „myślę”, a nie „wiem” :).

— thebodzio

Zgadzam się i wierzę, że masz rację, zadałem to pytanie na Webmaster SE, aw najgorszym przypadku obrazy będą się wyświetlać, ale nie do momentu pełnego załadowania.

— L84,

1

Właśnie w ten sposób ma działać „progresywny”: powinien pokazywać kolejne, bardziej szczegółowe wersje obrazu, gdy dostępnych będzie więcej danych.

— thebodzio

Przepraszam, miałem na myśli, że nic się nie pokazuje, dopóki obraz nie zostanie załadowany w porównaniu do ładowania skanowania za pomocą skanowania.

— L84,

10

Oto kilka opcji:

Użyj innego formatu niż JPEG (PNG lub GIF); wyniki zarówno pod względem wielkości pliku, jak i jakości obrazu będą zależeć od zawartości obrazu; każdy jest lepszy w niektórych rodzajach treści
Zmniejsz obraz pod względem pikseli - będzie to miało bardzo znaczący efekt i na pewno należy go wziąć pod uwagę, jeśli masz kontrolę nad ogólnym układem
W miarę możliwości używaj elementów innych niż obraz, np. Spróbuj zamienić tekst w obrazie na tekst HTML; spróbuj zastąpić bloki koloru elementami HTML.

Rozwijając ostatnie dwa punkty, powinieneś starać się zminimalizować zakres obrazów w swoich układach jako całości, zanim poświęcisz czas na zmniejszenie rozmiaru plików istniejących obrazów.

— e100
źródło

2

Spróbuję odpowiedzieć na niektóre dotychczasowe pytania bez odpowiedzi:

Wiele obrazów, których używam i które tworzę, wysyłanych jest pocztą elektroniczną. Ogranicza to poważnie to, co mogę zrobić z umieszczaniem tekstu za pomocą HTML i CSS nad obrazem.

Możesz wysyłać wiadomości e-mail w formacie HTML (sposób tworzenia biuletynów). Z html i wbudowanym CSS (dla kompatybilności). Obrazy muszą znajdować się na serwerze i musisz wstawić pełny adres URL do tagów stylów / img-tagów. Oto lista tego, co działa w różnych klientach e-mail.

Używam również różnych czcionek. Niektórych mógłbym użyć do Internetu za pomocą CSS @ font-face, ale możesz napotkać duże rozmiary plików, aw niektórych przypadkach nie możesz legalnie załadować czcionki do sieci.

Wypróbuj Google webfonts , zdecydowanie najlepsze źródło webfontów. Wszystko za darmo. Kolejną byłaby Font Squirrel . (Używa również @ font-face).

— Jannik Ruf
źródło

Dzięki za linki. Przeglądałem niektóre witryny Campaign Monitors, ale nie widziałem strony CSS. Bardzo przydatne informacje.

— L84,

-1

Nie ma takiej możliwości. JPEG jest formatem stratnym. Zawsze istnieje wymiana między jakością a rozmiarem pliku.

— chcąc252
źródło

Wszelkie inne zalecenia poza użyciem JPEG. Jak tam PNG?

— L84

1

PNG jest bezstratny, ale także dość duży. Gdzie używasz tego obrazu? Jeśli dotyczy Internetu, zawsze lepiej jest zakodować tekst.

— Jannik Ruf

JPEG i GIF są dobrym wyborem do oglądania w Internecie (PNG jest rzadko używany). Ale zależy to w dużej mierze od tego, co chcesz zrobić: tła, pokazu slajdów, miniatury lub ikony itp.

— Wanting252

Jeśli jest to tylko tekst bez efektów (tzn. Tylko biały tekst na czarnym tle), gif jest dobry i bardzo mały.

— Jannik Ruf

4

To nie jest naprawdę dobra odpowiedź. Istnieje kilka sposobów zmniejszenia rozmiaru pliku; błędne jest twierdzenie, że PNG jest rzadko używany w sieci.

— e100