Уменьшите размер файла без потери качества

Выбор лучшего метода сжатия зависит от содержимого вашего изображения. Если вы пытаетесь сохранить изображение с большим количеством цветов и плавными переходами между ними, вам лучше выбрать JPEG. В противном случае, если у вас есть лайнарт, текст, изображение с парой цветов, вы должны вместо этого попробовать PNG.

Конкретная схема сжатия, параметры, уменьшение цвета и т. д. зависят от конкретного случая. Есть некоторые изображения, которые вы можете безопасно сохранить с помощью «ползунка» сжатия JPEG, установленного на 30 или 40, без видимых артефактов. Некоторые другие требуют настройки 80 или больше. Ваш глаз должен быть судьей.

Когда мы говорим о сжатии JPEG, не стесняйтесь попробовать использовать, например, опцию «Прогрессивный» или установить «Размытие» на ненулевое значение (легкое размытие может маскировать сильные артефакты сжатия).

В случае с PNG вы должны попытаться максимально уменьшить количество используемых цветов (используйте для этого PNG-8). Когда требуется некоторое «сглаживание», попробуйте различные алгоритмы дизеринга.

Вот несколько примеров:

Слева направо, сверху вниз их параметры:

1. JPEG, Progressive, Качество: 40, Размытие: 0,18, Размер: 9 672 байта
2. JPEG, Оптимизированный, Качество: 60, Размытие: 0, Размер: 16 898 байт
3. JPEG, Progressive, Качество: 60, Размытие: 0, Размер: 11 104 байта
4. PNG-8, дизеринг: диффузный, цветов: 256, размер: 4 528 байт

Сравните их визуально, а затем внимательно посмотрите на их соответствующие размеры данных. Первая пара составляет около 9,7 КБ против 16,9 КБ. Второй — 11,1 КБ против 4,5 КБ. Все это за счет (ИМХО) незначительной визуальной разницы.

Вот несколько вариантов:

• Используйте другой формат, кроме JPEG (PNG или GIF); результаты с точки зрения размера файла и качества изображения будут зависеть от содержимого вашего изображения; каждый лучше подходит для определенных видов контента
• Сделайте изображение меньше в пикселях — это будет иметь очень значительный эффект, и его обязательно следует учитывать, если вы контролируете общий макет.
• По возможности используйте элементы, не являющиеся изображениями, например, попробуйте заменить текст на изображениях текстом HTML; попробуйте заменить блоки цвета элементами HTML.

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

Попробую ответить на некоторые вопросы, которые пока остаются без ответа:

Многие изображения, которые я использую и создаю, отправляются по электронной почте. Это несколько ограничивает то, что я могу сделать с размещением текста с помощью HTML и CSS поверх изображения.

Вы можете отправлять электронные письма в формате html (как делаются информационные бюллетени). С html и встроенным CSS (для совместимости). Изображения должны быть на сервере, и вы должны поместить полный URL-адрес в теги стилей/img. Вот список того, что работает в разных почтовых клиентах.

Также я использую различные шрифты. Некоторые я мог бы использовать для Интернета, используя CSS @font-face, но вы можете столкнуться с большими размерами файлов, а в некоторых случаях вы не можете загрузить шрифт в Интернет на законных основаниях.

Попробуйте google webfonts , безусловно, лучший источник веб-шрифтов. Все бесплатно для использования. Другим может быть Font Squirrel . (Он также использует @font-face).

Вы не можете сделать это. JPEG — это формат с потерями. Всегда есть компромисс между качеством и размером файла.