Как преобразовать размытый фон .png в сжатый .jpg без использования артефактов?

В настоящее время я имею дело с проблемой качества изображения для фонового изображения моего сайта.

У меня есть большое размытое фоновое изображение, которое я хотел бы использовать, но хотелось бы, чтобы оно было как можно меньшего размера для веб-сайта.

Чтобы иметь его в высочайшем качестве (PNG), это около 200 КБ.

Я могу уменьшить его примерно до 100 КБ в формате JPG, но качество снижается, что ожидается, но вокруг линейной линии появляются ужасно выглядящие линии, которые делают его ужасным.

Есть ли какой-то особый способ конвертировать этот PNG в JPG, но не допускать наличия дефектов на изображении?

Вот изображения:

PNG:

JPG (100%) качество:

JPEG - это не сжатие без потерь

Сжатие JPEG считается сжатием с потерями, даже если качество установлено на 100%, а качество теряется. Вот почему для простой графики, такой как интерфейсы пользовательского интерфейса и фоны, обычно лучше использовать формат без потерь, такой как PNG.

200 КБ не так уж велик в 2014/2015

Хотя было бы целесообразно максимально уменьшить размер фона, важно отметить, что 200 КБ не так уж велика для большинства широкополосных соединений. Вы можете использовать другую версию для мобильных телефонов и планшетов, используя медиа-запросы CSS .

Делаем 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 для всех браузеров.

Если вы чувствуете себя комфортно с градиентным изображением, отбросьте цвет, сделайте его черно-белым, а затем дайте элементу div / body / element фон следующим образом:

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, которое обеспечивает самую богатую гамму для экранов монитора (меньше полос).