У меня есть файл полноцветного изображения в формате PSD, который я хочу преобразовать в формат, которым можно легко поделиться в Интернете.
Текущий размер PSD составляет около 7 МБ.
Я хочу уменьшить размер файла примерно до 70 КБ без потери качества.
Каков наилучший формат и лучший способ сделать это?
Я попытался добиться этого уменьшения размера файла с помощью инструментов Photoshop. Сохранение в формате JPEG и настройка качества highдают мне файл размером 110 КБ.
Это слишком велико, и с более низким уровнем качества дает мне неприемлемые результаты.
Я знаю, что есть много других способов уменьшить размер файла, можете ли вы поделиться своим опытом в этом вопросе?
В дополнение к пробным настройкам качества, также поэкспериментируйте с большим сжатием и настройкой «размытие» для JPEG.
Также попробуйте дополнительные инструменты оптимизации, такие как Image Optim, ImageAlpha, TinyPNG или JPEGmini .
Это фотография или что-то близкое к векторному изображению, например, схема?
В первом случае лучше всего выбрать JPEG: изображения в формате PNG часто бывают больше. Это не мешает вам попробовать PNG в предварительном просмотре и увидеть, как это влияет на качество и размер, но в большинстве случаев вы будете разочарованы.
При использовании JPEG не ограничивайте себя уровнями сжатия из списка (например, 20, 40, 60, 80 и 100). В некоторых случаях установка, например, 75 вместо 80 давала изображение меньшего размера, а падение качества было практически незаметным.
Во втором случае JPEG обычно приводит к существенной потере качества, а PNG — нет.
Кроме того, если изображение не имеет градиента, попробуйте PNG-8 вместо PNG-24 по умолчанию и поэкспериментируйте с количеством цветов, чтобы увидеть, как это влияет на размер и качество изображения.
Например, нет ничего необычного в том, что PNG-8 с 16 цветами создает намного меньшие файлы по сравнению с PNG-8 с 32 цветами или выше или по сравнению с PNG-24, а падение качества едва заметно.
Диалоговое окно, отображаемое при переходе в меню «Файл» › «Сохранить для Интернета и устройств», поощряет эксперименты, позволяя быстро просмотреть различные настройки ; также не забудьте использовать вкладки «2-Up» и «4-Up» в верхнем левом углу этого диалогового окна.
Наконец, запомните золотые правила веб-дизайнера:
Никогда не помещайте текст внутри изображений. Нет необходимости тратить пропускную способность пользователя, когда вы можете просто включить текст в HTML, не считая других катастрофических последствий размещения текста в изображениях (таких как убийство SEO, автоматический перевод, доступность и т. д.).
Дважды подумайте, действительно ли изображение полезно для ваших пользователей. Обогащает ли это контент или просто добавляет больше визуального беспорядка? Нельзя ли заменить его элементами, предоставляемыми HTML 5 и CSS 3?
Никогда не создавайте изображения, которые всегда будут отображаться меньше их реального размера. Если миниатюры продуктов на сайте электронной коммерции имеют размер 400×300, не используйте повторно полномасштабные фотографии 1200×900, если вы действительно не хотите убить пропускную способность вашего сервера и ваших клиентов.
Если это не фотореалистичное изображение и/или его цветовая палитра ограничена, Photoshop Save For Web в формате PNG-8 может быть вашим лучшим вариантом. Здесь вы можете указать количество цветов (2-256), чем меньше цветов, тем меньше файл. Вы можете указать разные значения количества цветов и увидеть эффекты на изображении (в предварительном просмотре) и итоговый размер файла.
Возможно, вы даже захотите вернуться и переработать свое изображение, чтобы оно работало с меньшим количеством цветов. Я часто с самого начала стараюсь, чтобы веб-графика выглядела хорошо с меньшим количеством цветов, чтобы создавать небольшие файлы PNG-8.
Недавно я прочитал здесь , что вы можете сохранить в формате jpg сжатие 31, используя удвоенные размеры, которые вам нужны, а затем отобразить его на своей веб-странице в половине этих размеров, и он будет хорошо выглядеть. Поэтому, если вы хотите, чтобы ваша фотография отображалась с разрешением 200 на 200 пикселей, вы сохраняете ее с разрешением 400 на 400 пикселей с качеством 31 и устанавливаете размер изображения в CSS или HTML как 200 на 200 пикселей. Это делает изображение таким, как будто оно было сохранено в высоком качестве, но с гораздо меньшим размером файла, И оно хорошо выглядит на дисплеях Retina. Это будет хорошо работать для фотографий.
Для изображений с большими областями сплошных цветов я бы либо сохранил как PNG-8, либо, если изображение имеет градиент или много цветов, PNG-24. Или, если вы сделали это в Illustrator, вы можете сохранить его как SVG, в зависимости от вашей целевой аудитории (и их браузеров).
Вы можете изменить размеры изображения , т.е. пиксели, при сохранении разрешения . Это определенно уменьшит размер файла, сохранив при этом качество фотографии.
Скотт