Який "оптимальний" розмір файлів JPEG-зображень щодо їх розмірів?

Я планую написати сценарій, який просканує 100 000+ JPEG-зображень і повторно стисне їх, якщо вони "занадто великі" з точки зору розміру файлу. Сценарій - це легка частина, але я не впевнений, як класифікувати зображення як "занадто велике".

Наприклад, є зображення розміром 2400x600px з розміром файлу 1,81 Мб. Збереження Photoshop для веб-команди створює файл 540 КБ в 60 якості та однакових розмірах. Це приблизно 29% від оригінального розміру.

Зараз я думаю про використання цих цифр як орієнтиру. Щось на зразок 540 КБ / (2400 * 600/1 000 000) = 375 КБ на мегапіксель. Будь-яке зображення більшого розміру вважається великим. Це правильний підхід чи є кращий?

Редагувати 1: зображення потрібно оптимізувати для відображення на веб-сайтах.

Редагування 2: Я можу визначити бажану якість виводу, експериментуючи, мені потрібно знати, чи великі зображення за розмірами wrt розміру файлу і чи потрібно їх зберігати нижчою якістю.

У середньому солодке місце JPEG становить близько одного біта на піксель .

Звичайно, це залежить від вмісту зображення, оскільки певні типи графіки (наприклад, плоскі ділянки та плавні градієнти) стискаються краще, ніж інші (шум, текст), тому це не надійний метод сліпого застосування до кожного зображення.

У вас також є проблема нетисненого еталонного зображення для порівняння, так що ви насправді не знаєте напевно, яка поточна якість зображень у вас є, і наскільки більше ви можете знизити якість, щоб бути ще прийнятними. Про якість можна певною мірою здогадатися з таблиць квантування в JPEG, але це не є надійним методом (конкретно, судження про якість ImageMagick дуже неправильне для JPEG зі спеціальними, оптимізованими таблицями квантування).

Сказавши це, існує розумний практичний підхід:

1. Виберіть максимальний параметр якості JPEG, яким ви задоволені (десь у діапазоні від 70 до 85).
2. Знову роздрукуйте зображення до цього рівня якості.
3. Якщо рекомпресоване зображення менше на ~ 10% , тоді зберігайте повторно стиснене зображення.

Важливо не вибирати лише менший розмір файлу, а вимагати значного зменшення розміру файлу. Це тому, що рекомпресія JPEG має тенденцію завжди незначно зменшувати розмір файлу через втрату деталей, викликану втратою характеру JPEG та перетворенням на 8-бітний RGB, тому невеликі краплі розміру файлу можуть мати непропорційно великий падіння якості, яке не варто це.

Розмір файлів, стислих за допомогою JPEG, змінюється залежно від складності зображення. Якщо ви намагаєтеся керувати розмірами файлів, як ви описуєте, це призведе до високої якості сприйнятого зображення.

Розгляньте натомість такі варіанти:

• Достатньо хороший підхід.  Використовуйте налаштування якості, яке вважаєте прийнятним, наприклад 75. Порівняйте розмір результату з вихідним зображенням і збережіть менший файл. Див. Яку якість вибрати при переході в JPG?

• Використовуйте мінімізатор JPEG , наприклад JPEGmini або jpeg-recompressз jpeg-архіву . Вони по суті розроблені для того, щоб робити те, що, здається, намагаєтесь зробити, але з більшою обізнаністю про внутрішні алгоритми JPEG.

• Створюйте мініатюри різного розміру , як пропонує Натанкахілл , з точки зору веб-розробників.

Ні. Це неправильний підхід.

Розмір файлу в пікселях, так, має відношення до кінцевої ваги, але це не єдиний фактор.

Зробіть тест. Візьміть повністю білий файл того самого 2400x600px і збережіть його як JPG.

Тепер сфотографуйте ліс (той самий 2400x600px) з великою кількістю деталей і збережіть його. Цей файл буде більшим за допомогою тих же параметрів стиснення.

Остаточний розмір залежить від цих 3 факторів:

• Розмір пікселів
• Налаштування стиснення
• Зміст (деталізація та складність зображення)

Тож не можна і не слід визначати вагу на основі розміру пікселів.

Але я розумію вашу проблему.

Не аналізуючи поточне стиснення зображення, важко визначити "оптимальну" вагу (що стосується спостерігача чи використання зображень)

Ви, ймовірно, можете визначити параметр стиснення і перекомпресувати "всі вони". Я не знаю, чи хочете ви це зробити перед "завантаженням", що, ймовірно, заощадить вам більше часу, ніж збережене пропускання деяких з них.

Існує кілька інструментів, які аналізують зображення та обчислюють поточний коефіцієнт стиснення. Але я сумніваюся, що це важливо.

Веб-розробник тут. Ось як я підійшов би до цього:

1. Визначте розміри відображуваних зображень та потрібну роздільну здатність екрана.

Ваше перше завдання - визначити, у яких розмірах пікселів відображатимуться зображення. Чи є фотографії товарів в інтернет-магазині? Фотогалерея? Фотографії користувача? Кілька різних розмірів? Складіть список розмірів пікселів, які вам знадобляться. Перевірте, чи вам потрібні @ 2x зображення для екранів високої роздільної здатності, як останні телефони та планшети.

2. Використовуйте мініатюрний скрипт для створення нових файлів зображень.

Вони називаються мініатюрними скриптами, але їх можна використовувати набагато більше, ніж просто ескізи. Там багато сценаріїв, або ви можете написати свій власний. Не змінюючи розмір оригінальних файлів, ви можете це зробити, якщо ви зробили помилку в своєму сценарії або зрозуміли, що вам потрібно зображення з більшою роздільною здатністю. Поширена практика - вказувати суфікс у назві вихідного файла. Наприклад:

lena.jpg (Original, 2000x3000)
lena-thumb.jpg (100x150)
lena-thumb@2x.jpg (200x300)
lena-product.jpg (400x600)
lena-product@2x.jpg (800x1200)

3. Стиснення.

Сценарій ескізів повинен визначати стиснення jpg під час вирізання нових файлів зображень. Однак є й інші міні-версії, які можуть ще більше зменшити розмір файлу.

Хоча відповідь @ Рафаеля пояснила стиснення JPEG і вимкнення, я спробую відповісти на ваш веб-сайт і завантажити проблематично.

Використання зображення на веб-сайті (для дизайну чи вмісту) буде диктувати деякі імперативи: для чого буде використовуватись моє зображення? Логотип, обкладинка, мініатюра, фото в публікації в блозі, фотографії на повноекранному екрані для галереї ... Також, якщо ви використовуєте її для декількох цілей (наприклад, фотографію та мініатюру галереї), ви хочете відхилити її у всіх необхідних розмірах. Однак, якщо ви не створюєте власний веб-сайт, більшість сучасних веб-сервісів генеруватимуть зображення меншого розміру з вашої більшої картини для використання на сайті.

Тепер, коли ви знаєте своє призначення зображення, веб-сайт (або CMS або фронтальна рамка) завжди вимагатиме максимального розміру в пікселях, щоб ваше зображення відповідало. Логотипи можуть бути максимум 600x600px, фонова обкладинка може бути не більше 1280x720px, фотографія вмісту для повноекранного дисплея 1920x1080 або вихідна роздільна здатність камери для абсолютного збереження деталей. Перевірте правильний розмір на веб-сайті, на який потрібно завантажити. Ви хочете відповідати хоча б максимальному необхідному розміру пікселя, залежно від співвідношення, яке ви хочете досягти. Остерігайтеся, якась послуга обріже і розтягне ваше зображення, якщо співвідношення сторін не буде однаковим. У такому випадку вам доведеться переробити зображення, щоб відповідати необхідному максимальному розміру та співвідношенню.

Тоді веб-сайт може встановити обмеження розміру файлу (а може і не, залежно від призначення зображення). Що стосується часу завантаження сторінки, то чим світліше, тим краще. У вашому прикладі зображення високої роздільної здатності з роздільною здатністю 2400x600px, 300 - 500kB - це абсолютно чудовий розмір для завантаження. Картинки вмісту (наприклад, фотографії) можуть бути важчішими, якщо цього вимагає цільове зображення (наприклад, повноекранний дисплей), до натурної роздільної здатності вашої камери, якщо це необхідно. Якщо не вказано обмеження розміру файлів, важко здогадатися, оскільки це може залежати від обладнання аудиторії (мобільний, настільний ...), якості мережі мережі аудиторії ... Для отримання максимальної якості та обслуговування зверніться до фотографії по одному до отримати мінімальний розмір файлу без видимих ​​артефактів. Для зручності або швидкості обробки, змініть розмір сценарію, використовуючи загальний задовольняючий рівень стиснення (близько 70 повинно бути добре).@ xiota відповідь також може бути потрібним інструментом. Встановіть тут свій власний стандарт.

TL; DR призначення зображення на веб-сайті є ключовим для зміни розміру / стиснення.

Що ви обчислюєте, це середній розмір стисненого пікселя зображення, якщо розділити його на розмір необробленого пікселя (як правило, 3 октети на 24 біт RGB), ви отримаєте коефіцієнт стиснення.

Це хороший показник, який дає вам інформацію про стан стиснення зображення, але недостатньо судити про те, чи є зображення достатньо стисненим чи ні, оскільки коефіцієнт стиснення не залежить лише від профілю стиснення (алгоритм = JPEG, якість = 60/100), але також і щодо потенціалу стиснення зображення: різні зображення з однаковим розміром і однаковим профілем стиснення дають різний розмір jpeg, оскільки зображення більш-менш легко стискати (порожнє зображення дуже легко стискати, біле шуму немає).

Через це і через те, що "останній використаний" профіль якості не зберігається на цьому зображенні (ні в метаданих чи структурі заголовка jpeg), найбільш використовуваний підхід при повторному опублікуванні зображень із цільовим розміром / профілем якості насправді просто перекомпресувати (і потенційно змініть розмір) все (автоматично) незалежно від початкового стану зображення.

Так, ви можете повторно роздруковувати, коли це не потрібно, так, ви можете навіть втратити місце, якщо перекомпресіювати з профілем більш високої якості, але це кращі випадки, і у великому масштабі це найпростіше зробити для забезпечення цільового профілю якості. Звичайно, ви хочете зробити це лише один раз, щоб поступово не погіршувати зображення, і вам, ймовірно, слід зберігати дві бібліотеки зображень: початкову «недоторкану» та «опубліковану / повторну».

Існує безліч інструментів, щоб перекомпресувати купу файлів, ви також можете написати власний сценарій, використовуючи правильний технічний стек (в основному C ++ і libjpeg), це може бути досить проклятим навіть для файлів> 100k.

Якщо ви хочете реалізувати розумніший / складніший процес, ви можете спробувати експериментувати з ітераційною логікою повторного стиснення / порівняння розміру, щоб оцінити вихідний профіль якості (повторне стиснення з однаковою якістю повинно отримати приблизно однаковий розмір, з високим якість має трохи збільшити розмір, а з меншою якістю повинна значно зменшити розмір). Звичайно, це вимагало б набагато більшої потужності процесора.

For example there is a 2400x600px image with a file size of 1.81MB.
Photoshop's save for web command creates a 540KB file at 60 quality and same dimensions.    
This is about 29% of original size.

Оригінальний нестиснений розмір - 2400 х 600 х 3 = 4,320 000 байт (4,1 МБ), оскільки 24-бітний колір - це завжди три байти даних RGB на піксель . Навколо цієї абсолютної істини немає ніякого шляху.

Однак розмір JPG також залежить від деталізації зображення. Великі гладкі ділянки (як небо або пофарбовані стіни) краще стискаються, але ділянки з більшою деталізацією (як дерево, повне листя) також не стискаються. Так що немає абсолютного числового показника.

Але 540 КБ становить 0,540 / 4,1 = 13% від оригінального розміру 4,1 Мб . Це може бути 29% від попереднього розміру JPG, але це 13% від оригінального нестисненого розміру. Так що це 1/8 оригінального нестисненого розміру, що зазвичай вважається "пристойною" якістю. Не оптимальна, не максимальна якість, але загалом пристойна, можливо, достатньо хороша для деяких застосувань. Просто кажу, це вже мало.

Більший файл JPG - краща якість зображення, а менший - менша якість зображення. Ви повинні вирішити, що досить добре, але JPG ніколи не є "занадто великим", оскільки якість зображення знижується зі стисненням JPG. 24-бітний колір має три байти на піксель, не стиснений.

Тож рішення - якщо ви хочете його невеликого або якщо ви хочете його гарного.

Але збільшити існуючий JPG все-таки гірше, оскільки додається більше артефактів JPG, а колись невеликі, дані змінюються, і він ніколи не покращиться.

Артефакти JPG зазвичай демонструють двома способами, як видимі блоки 8x8 пікселів одного кольору в гладких ділянках без деталей, або як видимі шорсткі краї по краях деталей.

Якщо редагувати та зберігати JPG, додаються додаткові артефакти JPG. Якщо це потрібно, то добре застосовувати завжди збереження, щоб відповідати початковому параметру стиснення.

"Збереження для Інтернету" Photoshop насправді є досить хорошим компромісом між розміром та якістю файлу, тому, якщо у вас немає конкретніших вимог, вам слід поступити з цим. Типовий рада для веб - розробників дотримуватися 50-70% діапазону якості. Звичайно, є винятки: вам потрібно 90-95% якості логотипу компанії, який повинен виглядати чудово в будь-який час (або навіть конвертувати його у формат без втрат), і ви хочете знижуватись до 30% на великому, але ледве видимий фон сторінки.

Також не забудьте змінити масштаб зображень. Зображення розміром 2400x600 буде чудово виглядати на 4K-дисплеї, але воно буде розміщене на менших екранах, витрачаючи пропускну здатність даних без візуального покращення для користувача. Перевірте шаблон веб-сайту, який ви використовуєте, щоб дізнатися оптимальну ширину для зображень. Як правило, на момент написання це буде десь 1200-1300 пікселів (див. Найпопулярнішу роздільну здатність тут ).

Не забудьте зберегти оригінали зображень, які ви перетворюєте на якість Web. Якщо вам коли-небудь знадобиться переробляти або друкувати цей матеріал, ви пошкодуєте, що він матиме його лише у 60% якості та роздільній здатності 1 Мпікс.