Лучший формат изображения для изображений с цветными градиентами?

Question

Это не совсем программный вопрос, но я думаю, что это лучшее место, чтобы спросить.

На первой странице моего сайта есть красивый баннер, где более половины изображения представляет собой «градиент»цвет, и есть также некоторый текст.Теперь, чтобы получить приемлемый качественный текст, я должен сохранить файл JPEG с качеством> 90% и занимает 106 КБ (не так уж и плохо, но он добавляет дополнительную нагрузку на мой сайт, тем более что это целевая страница, я хочу, чтобы она была быстрой).

Теперь я хочу знать, существует ли какой-либо формат изображения (например, PNG / GIF), где такие градиенты могут храниться в более сжатом виде.Если это так, я попрошу моего дизайнера напрямую сохранить в этом формате.Проблема в том, что преобразование из JPEG в PNG / GIF не является правильным способом и фактически увеличивает размер, потому что «шум» должен кодироваться без потерь.

Изображение: http://pollwidget.org/images/first_view.jpg

спасибо

Answer 1

С таким большим изображением, как у вас, с таким же количеством цветов, как и у вас ... вы не получите намного лучше, чем 80-100 КБ, учитывая ваши параметры качества.

Я бы порекомендовал разделить изображение как минимум на два компонента: один - градиент фона, а другой - вид пользовательского интерфейса, который у вас есть.Обычно вы можете добиться некоторой хорошей экономии, если будете использовать PNG / GIF и устанавливать ограничения на цветовую палитру.

Действительно, однако, вы должны отделить текст от изображения.Мало того, что текст будет нечитаемым для поисковых систем;Вы можете сэкономить много места, позволяя браузеру обрабатывать рендеринг текста.Просто требуется немного гибкости с гарнитурами, которые вы можете использовать.Проверьте Каталог шрифтов Google , если вам не нравятся шрифты браузера по умолчанию.

Answer 2

Если вы немного исследуете, вы обнаружите, что в идеале JPG следует использовать для качественных фотографий.Файлы PNG8 и GIF будут работать одинаково, поскольку они оба поддерживают 256 цветов, но GIF не будет поддерживать «альфа» -эффект, который сглаживает прозрачность или градиент.PNG8 будет и, более того, PNG24 будет даже лучше.Таким образом, у PNG есть возможность сделать пиксели темными на одном конце и прозрачными на другом (альфа).GIF достигает этого по-другому.Я научился всему этому, когда занялся шелкографией, поэтому не уверен, как это будет работать с графическим дизайном.Вот хорошая ссылка, которую я нашел, которая помогла мне действительно понять это. JPG, PNG, GIF

Answer 3

В вашем конкретном примере, поскольку градиент - это просто повторение однострочного пикселя (он изменяется по горизонтальному измерению, но остается равномерным / повторяющимся по вертикальному измерению), я предлагаю сохранить его в виде изображения (ширина 955, высота 1) и используйте мозаику для заполнения экрана.

Затем используйте методы, упомянутые в ответе Джейсона Андерсона, чтобы составить другие элементы.