Як перетворити розмитий фон у форматі .png у стислий .jpg, не вводячи артефакти?

На даний момент я маю справу з проблемою якості зображення для фонового зображення мого веб-сайту.

У мене великий розмитий фоновий образ, який я хотів би використовувати, але хотів би, щоб він був якомога меншим за розміром для веб-сайту.

Щоб його було найвищою якістю (png), це близько 200 кбіт.

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

Чи існує особливий спосіб перетворення цього png у jpg, але уберегти зображення від таких дефектів?

Ось зображення:

PNG:

Якість JPG (100%):

JPEG не є стисненням без втрат

Стиснення JPEG вважається стисненням в збитку, навіть якщо встановлено на 100% якість, ви втрачаєте деяку якість. Ось чому для простої графіки, таких як інтерфейси інтерфейсу та фони, як правило, краще використовувати формат без втрат, такий як PNG.

200kb не такий великий у 2014/2015

Хоча було б ідеально максимально зменшити розмір фону, важливо зазначити, що 200 Кбіт не настільки великі для більшості широкосмугових з'єднань. Ви можете подати іншу версію для мобільних телефонів і планшетів, використовуючи запити css media .

Зробити png-файл ще меншим

Photoshop та інші пакети фарб використовують стандартне стиснення PNG, ймовірно, ви можете скоротити ці 200 кбіт до ще менше, використовуючи PngOptimizer або Інтернет-сервіс Yahoo Smush It . Зменшення розміру файлу ще нижче не знизить якість, оскільки його формат без втрат ... він в основному оптимізує код, зменшуючи його далі, порівнюючи його з ZIP-файлом або файлом RAR, ці файли стискання, але не знижують якість вмісту.

Розглядаючи використання градієнта смуги

Іншим можливим рішенням може бути те, що ви використовуєте тонкий градієнт PNG, який дорівнює 1 пікселя, а потім висоту сторінки, потім дублюєте це за допомогою background-repeat, ви навіть можете розглянути можливість використання CSS для генерації градієнта для вас, але, звичайно, ваш обмежений не можливість користуватися тінями та іншими налаштуваннями.

Це, ймовірно, не відповідає на ваше запитання. Деякі можливі альтернативи ...

Чи розглядали ви замість CSS:

background: linear-gradient(45deg, #3d667c, #1d283e);

Або, можливо, ви можете використовувати техніку SVG base64 ( інструмент генератора тут ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

Ви спробували використати ще менший PNG і дозволити вбудованому алгоритму збільшення масштабу браузера його збільшити? Це може зменшити розмір файлу, а також усунути артефакти JPG.

Я пропоную вам перевірити Kraken.io , у них є оптимізатор зображень. Зображення у вашій темі зменшуються на 45%, не видно очей!

Ви також можете просто використовувати css, colorzilla має приємний інструмент для створення потрібного css для всіх браузерів.

Якщо ви відчуваєте себе комфортно із зображенням градієнта, киньте колір, зробіть його чорно-білим, а потім надайте фоновому рисунку / тілу / елементу так:

background: blue url('images/gradient.png')

Деякі редактори зображень, такі як GIMP, дозволяють застосовувати згладжування, а також контролювати стиснення під час збереження jpeg.

Згладжування: встановлення параметра згладжування на ненульове значення злегка згладить зображення. Це зменшує нечіткі артефакти від стиснення і допомагає при стисненні. Установка 0,10-0,15 видаляє гарну частину артефактів, не змазуючи краї.

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

Ви також можете зменшити артефакти, контролюючи підсистему

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

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

Спробуйте додати шум, щоб мінімізувати смугу звучання:

Photoshop:

1. Створіть новий шар.
2. Перейдіть до: Image > Fill... >та використовуйте ці значення:

3. Змініть режим накладання шару на Overlay
4. Перейти до: Filter > Noise > Add Noise... >. Ці значення для мене добре працювали:

5. Налаштуйте непрозорість шару за своїм смаком. 22% було добре, і отриманий JPG:

Тож ніякого бридкого обв'язування, менших розмірів, але за рахунок шуму. Файли значно важчі порівняно з галасливою версією (близько 100 кбіт), але половина оригіналу PNG. Насправді я трохи здивований, що ваш PNG був таким великим.

Ще одна пропозиція:

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