Работая с некоторыми темами WordPress, я модифицировал некоторые файлы изображений и заметил, что мои отредактированные версии иногда в 3-4 раза больше оригинала (сохраняются в том же формате). Я не хочу ухудшать качество - как можно уменьшить размер файла, чтобы он быстрее загружался?
Прямо сейчас, например, я использую Photoshop и устанавливаю ползунок качества изображения на «8» (из 10).
Ответы:
Smashing Magazine опубликовал 2 замечательные статьи об оптимизации PNG и JPG .
Они довольно подробно объясняют некоторые детали, которые вы можете не знать о форматах и их реализациях. Например, статья в формате JPEG: «Имейте в виду, что когда вы устанавливаете значение« Качество »ниже 50 в Photoshop, он запускает дополнительный алгоритм оптимизации, называемый понижающей дискретизацией цвета, который усредняет цвет в соседних восьмипиксельных блоках».
Обе статьи посвящены конкретным методам, которые вы можете использовать в Photoshop, чтобы подготовить ваши файлы к большей компрессии. Что гораздо эффективнее, чем методы, использованные после сохранения файла.
После того, как вы сохранили эти файлы или файлы, вам не повезло иметь многоуровневые исходные файлы для настройки в Photoshop, еще больше сжатия, чтобы выжать эти файлы.
Я использую приложение Mac под названием ImageOptim . С их сайта:
ImageOptim оптимизирует изображения - поэтому они занимают меньше места на диске и загружаются быстрее - путем поиска лучших параметров сжатия и удаления ненужных комментариев и цветовых профилей. Он обрабатывает PNG, JPEG и GIF анимации.
ImageOptim предоставляет графический интерфейс для различных инструментов оптимизации: AdvPNG от AdvanceCOMP , OptiPNG , PngCrush , JpegOptim , jpegtran из libjpeg, Gifsicle и, необязательно, PNGOUT .
Он отлично подходит для публикации изображений в Интернете (легко сжимает изображения «Сохранено для Интернета» в Photoshop), а также полезен для уменьшения размера приложений Mac и iPhone.
Кусок пирога. Перетащите ваши изображения (или папки с изображениями) в окно, оно запускает все эти инструменты, изменяя схемы сжатия и удаляя ненужные метаданные и информацию о цветовых профилях (которые в любом случае не поддерживаются широко - перед сохранением следует исправить цветовые профили, не сохраняя и не встраивая их).
Все инструменты, указанные в этой цитате, имеют версии для Windows / Linux / Mac, кроме PNGOUT, но, к счастью, кто-то перенес PNGOUT на OS X и linux, потому что они такие продуманные. Если вы решите использовать ImageOptim, он будет включать все, кроме PNGOUT, в .app, поэтому захватите порт PNGOUT, поместите его в / usr / local / bin (или где угодно) и скажите ImageOptim, где он находится.
Для меня нередко, особенно с изображениями в формате PNG, размеры файлов уменьшаются более чем на 30% даже после сохранения в Photoshop «Сохранить для Web и устройств».
Подсказка. После выполнения оптимизации выполните сортировку по столбцу значков слева и выделите все строки значком (X) - файлы, которые больше не уменьшались. Удалите их из списка и повторно запустите все изображения со значком галочки. Я могу почти пообещать вам, что у вас будут изображения, которые все еще теряют размер файла. Повторите сортировку, выбор, удаление, повторный запуск, пока не получите все (X) значки и не называете это днем.
При сохранении фотографий в Photoshop рекомендую использовать File > Save for Web and Devices. Это позволит вам играть с уровнями сжатия и видеть визуальный результат в режиме реального времени. На фотографиях вы обычно можете сохранить его ниже уровня 8 и при этом получить отличные результаты.
Возможно, вы захотите проверить Smush.it от Yahoo . Я нашел, что это работает очень хорошо.
Для изображений PNG вы можете уменьшить количество цветов в цветовой карте и сохранить их в виде индексированного PNG. Например, рассмотрим логотип размером 128x128 пикселей (без сжатия). Представьте, что в действительности он использует только 16 цветов.
Вы можете видеть, что без снижения качества изображения (это относится только к определенным типам изображений) вы можете существенно уменьшить его размер.
Для кнопок и значков сайта вы также можете объединить их в одно изображение и использовать CSS или JavaScript для управления их отображением (спрайтами). Это экономит количество запросов HTTP, сделанных для каждого изображения.
Попробуйте другие форматы.
По сути, попробуйте сохранить изображение в разных форматах, а затем посмотрите на размер файла.
Если вы используете JPEG, вы сможете регулировать качество изображения вверх и вниз в графическом редакторе, таком как paint.net. Качество изображения 50% обычно достаточно для веба и делает изображение намного меньше.
С PNG вы не можете этого сделать, но стоит отметить, что иногда PNG намного больше, а иногда намного меньше, чем JPEG. PNG намного меньше для черно-белых изображений, например, таких как черно-белые штриховые рисунки.
В наши дни совет состоит в том, чтобы использовать CSS-спрайты, чтобы ускорить загрузку за счет сокращения запросов, но опять же вам нужно посмотреть на размер получаемого изображения. Вполне возможно, что изображение спрайта CSS будет намного больше, чем изображения компонентов, если, например, вы объедините несколько черно-белых PNG-изображений с цветным.
Вы также хотите убедиться, что вы удаляете все данные EXIF - почти все это не имеет значения для пользователей в Интернете, им действительно нужно знать, что вы использовали Canon 5D, чтобы сделать фотографию, и что вы использовали F-Стоп 2,8, экспонированный в течение 0,5 секунды, с ISO 160, без смещения экспозиции и фокусным расстоянием 9 мм?
Все эти метаданные добавляют вес вашему изображению и в целом должны быть удалены.
Как указывает Джессегавин , большинство графических приложений покажут вам предварительный просмотр эффектов сжатия - используйте их, так как общая настройка «8» редко дает вам наилучший компромисс.
Наконец, плагин Google Page Speed Firefox / Firebug может дать вам хорошее представление о том, насколько вы можете уменьшить размеры изображений (включая возможность просмотра и сохранения меньших версий).
После того, как вы сделали все другие предложения, чтобы убедиться, что ваше изображение является как можно меньшим при сохранении желаемого уровня качества, вы также захотите настроить свой веб-сайт таким образом, чтобы он отображал изображения с минимальными заголовками HTTP и что обслуживаемые вами заголовки позволяют надлежащим образом хранить изображения с помощью кэширования прокси-серверов и веб-браузеров.
Чтобы уменьшить размер запросов, убедитесь, что ваш веб-сервер настроен так, чтобы не отправлять бесполезные заголовки, такие как X-Powered-By. Также убедитесь, что вы обслуживаете такие вещи, как изображения, CSS и другие статические компоненты, с хоста, на котором не установлены файлы cookie (например, static.example.com).
Для статических изображений установите в заголовке Expires дату в далеком будущем. Это гарантирует, что веб-браузер и любые кеширующие прокси в середине будут удерживать изображение как можно дольше. Единственным недостатком этого является то, что если вы хотите показать другое изображение, вам нужно будет использовать другое имя файла и ссылку на него. Нумерация версий в имени файла (например, myimage_1.png или /images/3/logo.png) может быть эффективным способом сделать это. Для менее статичных страниц установите реалистичный заголовок Expires (доступ плюс X часов) и убедитесь, что вы устанавливаете либо заголовок Last-Modified, либо заголовок eTag (не оба), чтобы браузеры, которые ранее загружали файлы, могли быстро протестировать имеют ли они текущую версию, сравнивая заголовки вместо того, чтобы вытащить все изображение вниз.
Хотя существует множество доступных ресурсов для обсуждения этих методов, Yahoo проделала большую работу, предоставив множество советов по повышению эффективности доставки контента в одном месте.