Почему картинки сохраняются в формате html
Перейти к содержимому

Почему картинки сохраняются в формате html

Как сохранить картинку или фото с любой веб-страницы (даже если при клике правой кнопкой мышки — меню не появляется)

sohranit-foto

Вопрос от пользователя

Здравствуйте.

Мне нужно сохранить несколько картинок с одного «необычного» сайта: на нем, при клике правой кнопкой мышки, не появляется стандартное меню (т.е. нельзя обычным образом сохранить фото).

Есть ли какие-нибудь простые и (главное!) быстрые варианты сохранения?

Ну смотря что понимать под «быстрыми», да и от конкретного человека зависит (каждый из нас даже текст на клавиатуре набирает с разной скоростью ��).

Ниже приведу несколько способов решения задачи (выбор, как всегда, за вами. ).

Важно : имейте ввиду, что определённые фотографии и изображения на сайтах защищены авторскими правами! Если вам нужные бесплатные картинки — см. эту подборку сайтов.

Способы сохранить картинку

�� Вариант 1

При сохранении всей веб-страницы (сочетание кнопок Ctrl+S в браузере) — в подавляющем большинстве случаев будут загружены к вам на диск и все изображения, что на ней отображаются!

Сохраняем веб-страницу на HDD

Сохраняем веб-страницу на HDD

Обратите внимание, что рядом с html-файлом странички будет и одноименный каталог. Если вы его откроете — в нём должны быть сохранены все картинки, что были на веб-странице.

Рекомендую отсортировать их по размеру и оставить только то, что «нужно».

Картинки с сохраненной веб-страницы

Картинки с сохраненной веб-страницы

�� Вариант 2

А вообще, мне больше всего импонирует вариант с созданием скриншота. Т.е. вы просто делаете скриншот того, что у вас отображается на мониторе! Этот способ универсальный и подходит, как для сайтов, так и для игр, фильмов и т.д. и т.п.

Чтобы сделать скрин : нажмите клавишу Print Screen, затем откройте Paint или Word и вставьте картинку, нажав на Ctrl+V. Дальше ее можно подредактировать (например, подрезав края), и сохранить на жесткий диск. Быстро?!

Кнопка Print Screen на типовой клавиатуре

�� Вариант 3

Запомните какой-нибудь текст или описание рядом с нужной фотографией/изображением. После, откройте код страницы — сочетание кнопок Ctrl+U (работает в большинстве браузеров).

Открываем код страницы

Открываем код страницы

Затем в строке поиска (Ctrl+F) укажите текст (который запомнили) и браузер вам найдет этот участок кода веб-странички. Рядом с нужным текстом — вы увидите ссылку на картинку (я ее выделил красным, на конце — «.PNG»). Осталось только ее открыть.

Открываем картинку

А далее обычным образом (нажав ПКМ на нее) — она легко сохраняется на диск.

Сохранить как.

�� Вариант 4

Для тех, кому нужны все фотографии с сайта (да и весь другой материал: тексты, сноски, подписи и пр.) — можно посоветовать воспользоваться спец. �� программами для скачивания сайтов. Они загрузят весь ресурс целиком, а значит там будет всё, что вам было нужно. ��

Также можно попробовать сохранить �� страничку в PDF-формат. С ним в последствии можно работать, как в MS Word, так и его аналогах.

Ну а у меня на этом пока всё. Доп. способы — приветствуются!

Формат изображений WebP: что это такое и зачем он нужен

Формат изображений WebP

Ваш сайт можно сделать быстрее и легче, всего лишь изменив формат изображений на нем. Причем даже без дополнительной компрессии и потери качества. Для этого надо ознакомиться с форматом WebP и конвертировать в него все картинки на странице. Но давайте обо всем по порядку.

Краткое описание WebP

WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.

Да, другие форматы тоже поддерживают сжатие, но технологии, стоящие в основе WebP, куда прогрессивнее. И если сравнивать WebP с конкурентами в соотношении степени сжатия к качеству картинки, то разработка Google одержит уверенную победу.

В среднем вес картинок сокращается на 25–35%, что позволяет вебмастерам размещать на сайтах больше изображений, не тратя впустую драгоценное пространство на жестком диске арендованного VDS.

При разработке формата сотрудники Google использовали те же методики сжатия, что используются в компрессии кодеков VP8.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Преимущества WebP на другими форматами

Естественно, основное преимущество — это размер. Сокращение размера положительно влияет сразу на четыре аспекта работы в интернете:

  1. Сайты со сжатыми WebP-картинками работают быстрее. Уходит меньше времени на обработку небольших файлов. Даже если в статье будет под сотню изображений, компрессия спасет от чересчур долгих загрузок.
  2. Загружая на VDS маленькие изображения, можно сэкономить на пространстве жесткого диска.
  3. Пользователи будут тратить меньше мобильного трафика при посещении сайта со смартфона.
  4. Выделенный интернет-канал до сервера будет загружен гораздо меньше, если передаваемый медиаконтент меньше весит. Еще один плюс к производительности.

Но говорить о преимуществах WebP проще в сравнении с другими форматами.

WebP против JPEG

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

Сравнение качества JPEG и WebP

Главный недостаток JPEG — заметная потеря в качестве и детализации из-за недостаточно продуманных алгоритмов сжатия. Это особенно заметно при приближении или когда у картинки изначально не слишком высокое разрешение.

У WebP качество картинки практически не теряется. Если ознакомиться с галереей Google, то станет понятно, что отличить их формат от высококачественных JPEG практически невозможно. Это видно только по размеру файлов.

WebP против PNG

PNG — формат, ставший золотым стандартом и сумевший сохранить идеальный баланс между качеством и весом. Он подходит для изображений с логотипами или некрупным текстом. Там, где нужна высокая детализация.

Но речь идет о графике. С фотоснимками PNG справляется хуже более узкоспециализированных расширений. К тому же PNG заметно тяжелее того же JPEG даже после компрессии (хоть и сохраняет высокое качество).

Сравнение WebP с популярными декодерами PNG

WebP по детализации и цветопередачи на одном уровне с PNG. Разницу трудно заметить даже при сравнении лоб в лоб. Он хорошо отображает как графику, так и фотографии. При этом размер зачастую ниже, чем у PNG, на 30%.

Недостатки WebP

Поддержка данного формата среди браузеров и веб-приложений постепенно растет. Сейчас с WebP не возникает проблем ни в Google Chrome, ни даже в Safari. Но остались сайты и программы, которые все еще не знакомы с этим расширением картинок. Поддержка в браузере Apple появилась не так давно, а в Internet Explorer не появится никогда.

Как я уже заметил выше, проблема не только в браузерах, но и в других программных решениях. К примеру, в WordPress нет нативной поддержки WebP, а это, между прочим, популярнейшая CMS в мире. И таких ресурсов все еще много.

А еще WebP-файлы зачастую нечем открывать на компьютере. Поэтому некоторые пользователи Windows и Linux негодуют, когда пытаются скачать картинку через Google Chrome, а получают файл с невнятным расширением, который нельзя открыть.

Как открыть WebP-файл

Если вы столкнулись с тем, что в вашей ОС нет программы для работы с WebP, то вам поможет поддерживаемый браузер. Алгоритм действий:

  1. Открываем картинку в формате WebP на любом сайте, где нам удалось ее разыскать.
  2. Кликаем по ней правой кнопкой мыши и сохраняем на жесткий диск в формате WebP.
  3. Затем кликаем правой кнопкой мыши по картинке уже на жестком диске.
  4. В контекстном меню системы ищем пункт «Открыть с помощью…» и выбираем в нем браузер Google Chrome или Firefox.

В Linux можно открывать WebP-файлы с помощью редактора изображений GIMP. В macOS этот формат поддерживается по умолчанию в приложении «Просмотр», в нем же картинку можно отредактировать и конвертировать.

Сохраняем WebP как JPEG (или конвертируем в другой подходящий формат)

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

Есть несколько методов превращения WebP в условный PNG или JPEG средствами Windows. Через браузер, через Microsoft Paint и через специализированный декодер и команду в терминале Windows (внезапно).

  1. Можно скопировать ссылку на сайт с изображением в новом формате и вставить ее в Internet Explorer. Он не поддерживает новинку и поэтому загрузит картинку в другом расширении.
  2. Или скопировать изображение прямо с веб-страницы и вставить его в редактор изображений Microsoft Paint. А уже находясь в нем, одновременно нажать клавиши Ctrl + Shift + S, чтобы сохранить картинку на жестком диске и указать расширение (JPEG, TIFF и т.д.).
  3. Либо использовать команду в формате C:\Путь до файла dwebp.exeназвание файла.WebP — o название файла.png. По умолчанию декодер лежит в папке «Изображения», соответственно, в команде надо указать путь до нее.

Конвертируем PNG в WebP

Инструкция для тех, кто хочет стать частью новой тенденции и перейти на WebP уже сейчас.

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

Мы рассмотрим более практичные способы с точки зрения постоянной работы с веб-контентом. То есть инструменты, используемые вебмастерами в повседневной работе при публикации сайтов и новых материалов на них.

Через плагин для Фотошопа

Берем детище Adobe как самый популярный редактор среди дизайнеров веб-интерфейсов и основной массы контентщиков.

WebP plugin для Фотошопа

Сначала скачиваем плагин WebP Photoshop Plugin с официального сайта разработчиков. После этого устанавливаем и перезапускаем редактор. При повторном запуске в нем появится новый формат для экспорта. Открываем изображение в формате JPG, PNG и т.п., затем открываем меню File и выбираем пункт Save As… Во всплывшем окошке указываем расширение WebP или WebP Lossless. Второй вариант подразумевает немного иной тип сжатия, сохраняющий все детали изображения.

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

Через node.js

Подойдет тем, кому надо пачками конвертировать разного рода изображения в WebP, тратя на это минимум сил. Естественно, нужно хотя бы примерно понимать, что такое node.js и установить ее к себе на компьютер с Linux.

Представим, что node.js уже установлен и работает. Возвращаемся к конвертеру. Будем использовать плагин imagemin и соответствующий скрипт на его базе, чтобы автоматизировать процесс конвертации.

Чтобы установить imagemin, введем в командную строку:

npm install imagemin imagemin-webp

Затем создаем скрипт в формате JavaScript со следующими вводными данными и запустим его в node.js:

var imagemin = require("imagemin"), webp = require("imagemin-webp"), outputFolder = "./img", // Папка под WebP PNGImages = "./img/*.png", // Название картинки в PNG JPEGImages = "./img/*.jpg"; // Название картинки в JPEG imagemin([PNGImages], outputFolder, < plugins: [webp(< lossless: true // Losslessly encode images >)] >); imagemin([JPEGImages], outputFolder, < plugins: [webp(< quality: 65 // Quality setting from 0 to 100 >)] >);

По умолчанию в переменных outputFolder, PNGImages и JPEGImages указаны значения img, но их можно заменить на другие. В названиях изображений вовсе можно оставить звездочку, чтобы скрипт конвертировал все изображения с расширениями JPEG и PNG, что сможет обнаружить в папке.

Через плагин для WordPress

Если работаете в CMS WordPress, можно не изгоняться с node.js, а установить плагин WebP Express. Он использует библиотеку WebP Convert Library для конвертации изображений с расширениями PNG и JPEG в формат компании Google.

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

А еще есть плагины для сжатия изображений в WordPress, которые создают WebP-копии загружаемых картинок и распространяют их по CDN. Они также ужимают другие форматы, минимизируя потери в качестве.

Подключаем WebP к HTML- и CSS-файлам

В случае с плагинами и CMS все понятно. Там есть графические интерфейсы для загрузки изображений. С кодом тоже нет сложностей. WebP можно встраивать в HTML-разметку как «обычные» изображения – через тег Правда, только для поддерживаемых браузеров.

В случае с неподдерживаемыми придется добавить в разметку элемент и внутри него прописать дополнительные источники изображений со всеми расширениями. Это делается через тег ссылка на картинку» type=”image/формат картинки«>. В CSS WebP добавляется через параметр background-image: url (ссылка на картинку с нужным расширением).

На этом все. Как видите, в формате WebP нет ничего страшного. Обычные картинки, просто не везде поддерживаются. Отсюда и некоторые сложности в работе, но совсем скоро эта проблема исчезнет и WebP окончательно станет веб-стандартом.

Как сохранить WEBP в формате JPEG или PNG

Новый формат изображения WEBP в Google довольно крут: его уникальные системы сжатия могут отображать изображения примерно на две трети размера одного и того же изображения в формате JPEG или PNG.

Но, несмотря на шесть лет развития, и значительную популярность в продуктах Google, он по-прежнему не поддерживается некоторыми из наиболее распространенных инструментов для создания и просмотра изображений. Windows в приложении по умолчанию для просмотра фотографий, например, не может открыть этот формат. Так же Word и многие другие не могут использовать для вставки в документ. Можно, конечно, конвертировать одним из этих инструментов, но есть путь проще.

webp-to-jpeg

Как сохранить изображение WEBP в более общем формате?

Откройте браузер Chrome, Яндекс или Opera на любой платформе — только эти два основных браузера, которые поддерживают отображение изображений WEBP. Перейдите на сайт, который использует изображения WEBP, все картинки в play.google.com размещены в экономичном формате.

Щелкните правой кнопкой мыши или долго нажмите одно из изображений и нажмите кнопку «Открыть изображение в новой вкладке», получится картинка WEBP со своим URL-адресом в верхней части этой вкладки. Эта ссылка непосредственно на объект изображения, которую вы можете отредактировать и одновременно изменить формат файла. Это почти чудо, которое может браузер.

webp to png

Щелкните по строке URL, удалите последние три символа в адресе («-rw»), а затем нажмите «Ввод». То же изображение будет отображаться снова, но на этот раз оно отображается в исходном формате, обычно JPEG или PNG.

Щелкните правой кнопкой мыши или долго нажмите изображение, а затем выберите опцию «Сохранить изображение как». Что сохранит его в исходном формате — как и любой другой файл.

Способ в новой вкладке

Просто открывайте картинку в новой вкладке и при сохранении меняйте ее расширение с .webp на .png или .jpg — покажу на примере Авито.

Параметры сохранения для Интернете

Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG, PNG и WBMP, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные.

Параметры оптимизации JPEG

Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.

Определяет уровень сжатия. Чем выше значение параметра «Качество», тем больший уровень детализации сохраняется при сжатии. Однако чем выше значение параметра «Качество», тем больше размер файла. Чтобы определить наилучшее соотношение качества и размера файла, рекомендуется просмотреть оптимизированное изображение с различными настройками качества.

Создается улучшенный файл JPEG с незначительно меньшим размером файла. Формат «Оптимизированный JPEG» рекомендуется для максимального сжатия. Однако некоторые браузеры старых версий могут не поддерживать эту функцию.

Изображение в веб-браузере отображается прогрессивно. Изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки. Для параметра «Прогрессивный» необходимо использование формата Оптимизированный JPEG.

Примечание.

Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.

Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.

Встроенный профиль (Photoshop) или ICC-профиль (Illustrator)

Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.

Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).

Полностью прозрачные пиксели исходного изображения заполняются выделенным цветом. Частично прозрачные пиксели исходного изображения смешиваются с выбранным цветом.

Параметры оптимизации для форматов GIF и PNG‑8

Формат GIF является стандартом сжатия для изображений с цветами смесевых красок и четкой детализацией, например, для штриховых рисунков, логотипов или иллюстраций с текстом. Аналогично GIF, формат PNG‑8 эффективно сжимает сплошные области цвета с сохранением четкости деталей.

Файлы PNG‑8 и GIF поддерживают 8-разрядную глубину цвета, то есть до 256 цветов. Процесс определения используемых цветов называется индексированием, поэтому изображения в форматах GIF и PNG‑8 иногда называют изображениями индексированных цветов. Чтобы преобразовать изображение в индексированные цвета, для хранения и индексации цветов в изображении используется таблица цветов изображения. Если в таблице цветов исходного изображения отсутствует нужный цвет, то приложение подбирает ближайший цвет из таблицы или имитирует цвет с помощью сочетания доступных цветов.

Кроме приведенных ниже параметров, можно задать количество цветов в таблице цветов изображения. См. Настройка таблицы цветов для изображений GIF и PNG‑8.

Потери (только GIF)

Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра «Потери», тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра «Потери» значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40%.

Примечание.

Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Дизеринг шума» или «Регулярный дизеринг».

Цвета и метод редукции цвета

Определяет метод создания таблицы цветов изображения и необходимое количество цветов в таблице. Доступны следующие методы редукции цвета.

Перцепционная Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.

Селективная Создает таблицу цветов, аналогичную таблице «Перцепционная», но отдавая предпочтение областям большого размера и сохранению веб-цветов. Обычно при использовании этой таблицы получаются изображения с наибольшей достоверностью цветов. Значение «Селективная» задано по умолчанию.

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

Ограниченная (Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). При выборе этого параметра дизеринг в браузере не применяется при отображении с 8-разрядной глубиной цвета (такая палитра также называется «безопасной палитрой Web»). Использование палитры Web может приводить к увеличению размера файла, и рекомендуется только в тех случаях, когда крайне важно исключить дизеринг в браузере.

Заказная Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG‑8 в нем будет пользовательская палитра цветов.

Примечание.

Таблица цветов изображения настраивается с помощью палитры Таблица цветов в диалоговом окне «Сохранить для Web и устройств».

«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.

Определяет метод и степень дизеринга. Дизеринг позволяет имитировать цвета, которые отсутствуют в системе цветного изображения компьютера. Более высокий процент дизеринга позволяет передавать больше цветов и деталей, но также приводит к увеличению размера файла. Для оптимального сжатия рекомендуется использовать наименьший процент дизеринга, обеспечивающий необходимую детализацию цвета. К изображениям, состоящим преимущественно из сплошных тонов, дизеринг можно не применять. В изображениях с непрерывными оттенками (особенно градиентами) дизеринг может быть нужен для того, чтобы избежать полошения цветов.

Доступны следующие методы дизеринга.

Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.

Узор Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.

Шум Применяется случайный узор, подобный методу дизеринга «Случайный», но без распространения на смежные пиксели. При использовании метода дизеринга «Шум» швы не возникают.

«Прозрачность» и «Подложка»

Определяет способ оптимизации прозрачных пикселей в изображении.

  • Чтобы сделать полностью прозрачные пикселы прозрачными и смешать частично прозрачные пикселы с цветом, выберите «Прозрачность» и укажите цвет подложки.
  • Чтобы заполнить полностью прозрачные пикселы цветом и наложить частично прозрачные пикселы на этот же цвет, выберите цвет подложки и отмените выбор параметра «Прозрачность».
  • Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).

Примечание.

Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.

A. изображение B. Прозрачность выбрана с цветом подложки C. Прозрачность выбрана без подложки D. Прозрачность отключена с цветом подложки

При выборе параметра «Прозрачность» можно указать метод дизеринга частично прозрачных пикселей.

  • При выборе параметра «Без дизеринга прозрачности» дизеринг к частично прозрачным пикселям в изображении не применяется.
  • Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели. При выборе этого алгоритма необходимо указать процент дизеринга, управляющий степенью дизеринга, который применяется к изображению.
  • В режиме «Регулярный дизеринг прозрачности» применяется квадратный узор наподобие полутонового для частично прозрачных пикселей.
  • В режиме «Шумовой дизеринг прозрачности» применяется случайный узор, подобный узору в режиме «Случайный дизеринг», но без распространения на смежные пикселы. При использовании алгоритма «Шум» швы не возникают.

До полной загрузки файла изображение в браузере отображается в низком разрешении. Чересстрочное отображение позволяет уменьшить время ожидания полной загрузки и показать пользователям процесс загрузки изображения. Однако чересстрочноое отображение также увеличивает размер файла.

Привязка к веб-цветам

Определяется уровень изменения цветов на ближайшие эквивалентные цвета палитры Web (с отменой дизеринга в браузере). Чем выше значение, тем больше изменяется цветов.

Оптимизация прозрачности в изображениях GIF и PNG

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

Настроить оптимизацию прозрачных пикселей в изображениях GIF и PNG можно с помощью параметров «Прозрачность» и «Подложка» в диалоговом окне «Сохранить для Web и устройств».

  • (GIF и PNG‑8) Чтобы сделать полностью прозрачные пикселы прозрачными и наложить частично прозрачные пикселы на цвет, выберите «Прозрачность» и укажите цвет подложки.
  • Чтобы заполнить полностью прозрачные пикселы цветом и наложить их на частично прозрачные пикселы того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
  • (GIF и PNG‑8) Чтобы сделать все пикселы с прозрачностью более 50% полностью прозрачными, а все пикселы с прозрачностью 50% и менее полностью непрозрачными, установите флажок для параметра «Прозрачность» и укажите «Нет» в меню «Подложка».
  • (PNG‑24) Чтобы сохранить изображение с многоуровневой прозрачностью (до 256 уровней), установите флажок для параметра «Прозрачность». Параметр «Подложка» станет недоступен, поскольку многоуровневая прозрачность позволяет накладывать изображение на любой фоновый цвет.

Примечание.

В браузерах, не поддерживающих прозрачность PNG‑24, прозрачные пикселы могут отображаться на фоновом цвете по умолчанию, например на сером.

Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите нужный цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).

Примечание.

Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.

Просмотр таблицы цветов для оптимизированного фрагмента

Таблица цветов для фрагмента отображается на панели Таблица цветов диалогового окна «Сохранить для Web и устройств».

Выберите фрагмент, оптимизированный в формате GIF или PNG‑8. Таблица цветов для выбранного фрагмента отобразится на палитре «Таблица цветов» диалогового окна «Сохранить для Web и устройств».

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

Настройка таблицы цветов для изображений GIF и PNG‑8

Цвета в оптимизированных изображениях GIF и PNG-8 настраиваются с помощью таблицы цветов в диалоговом окне «Сохранить для Web и устройств». Сокращение количества цветов часто позволяет сохранить качество изображения при одновременном уменьшении размера файла изображения.

Цвета в таблице цветов можно добавлять или удалять, заменять выбранные цвета на безопасные Web-цвета, а также блокировать выделенные цвета, чтобы предотвратить их удаление из палитры.

Сортировка таблицы цветов

Выберите порядок сортировки в меню палитры «Таблица цветов».

  • При выборе параметра «Без сортировки» восстанавливается исходный порядок.
  • Команда «Сортировать по тону» сортирует цвета по положению на стандартном цветовом круге (в градусах от 0 до 360). Нейтральным цветам присваивается тон 0 и они помечаются красным.
  • Команда Сортировать по светимости сортирует цвета по светимости.
  • Команда «Сортировать по частоте использования» сортирует цвета по частоте их использования в изображении.

Добавление нового цвета в таблицу цветов

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

Если в таблице цветов выделены какие-либо цвета, выберите в палитре Таблица цветов пункт Отменить выделение всех цветов, чтобы отменить выбор этих цветов.

Выберите цвет, выполнив одно из следующих действий.

  • В диалоговом окне «Сохранить для Web и устройств» щелкните значок «Цвет пипетки» и выберите цвет из палитры.
  • В диалоговом окне «Сохранить для Web и устройств» выберите инструмент «Пипетка» и щелкните изображение.

Выполните одно из следующих действий.

  • Нажмите кнопку «Создать цвет» в таблице цветов.
  • Выберите команду «Новый цвет» в меню палитры «Таблица цветов».
  • Чтобы переключить таблицу цветов на палитру «Заказная», удерживайте при добавлении нового цвета нажатой клавишу «Ctrl» (Windows) или «Command» (Mac OS). Новый цвет отобразится в таблице цветов со значком в виде небольшого белого квадрата в правом нижнем углу. Такой значок показывает, что цвет заблокирован. В динамической таблице цветов исходный цвет отображается в левом верхнем углу, а новый цвет — в правом нижнем углу.

Выбор цветов в таблице цветов

Вокруг выделенного цвета появляется белая рамка в Таблица цветов.

  • Чтобы выбрать цвет, щелкните его в таблице цветов.
  • Чтобы выбрать в таблице цветов несколько цветов, удерживайте нажатой клавишу «Shift». Будут выбраны все строки между первым и вторым выделенными цветами. Чтобы выбрать несмежную группу цветов, нажмите клавишу «Ctrl» (Windows) или «Command» (Mac OS) и щелкните нужные цвета. Кроме того, в меню палитры «Таблица цветов» доступны команды выбора цветов.
  • Чтобы выбрать цвет в изображении предварительного просмотра, щелкните его инструментом «Пипетка» в диалоговом окне «Сохранить для Web и устройств». Чтобы выбрать несколько цветов, удерживайте нажатой клавишу «Shift».
  • Чтобы отменить выбор всех цветов, выберите в меню палитры «Таблица цветов» пункт «Отменить выделение всех цветов».

Замена цвета

Выделенный цвет в таблице цветов можно изменить на любое другое значение цвета RGB. При повторном выводе оптимизированного изображения выделенный цвет будет заменен на новый цвет в тех областях изображения, где он присутствует.

Для отображения палитры цветов по умолчанию дважды щелкните цвет в таблице цветов.
Выберите цвет.

Исходный цвет отображается в левом верхнем углу образца цвета, а новый — в правом нижем углу. Небольшой квадрат в правом нижнем углу образца цвета показывает, что цвет заблокирован. При замене на Web-цвет в центре образца появляется небольшой белый ромб.

Чтобы отменить замену цвета, выполните одно из следующих действий.

  • Дважды щелкните образец замененного цвета. Исходный цвет выделится в палитре цветов. Чтобы восстановить цвет, нажмите кнопку «OK».
  • Чтобы отменить выделение всех замененных цветов (включая замененные веб-цвета), выберите в меню палитры Таблица цветов пункт «Отменить замену всех цветов».

Замена цветов на ближайшие эквивалентные цвета палитры Web

Чтобы в браузере не выполнялся дизеринг, можно заменить цвета на ближайшие эквивалентные цвета в палитре Web. Это позволяет предотвратить выполнение дизеринга в браузерах операционных систем Windows или Macintosh, в которых доступно только 256 цветов.

Выберите один или несколько цветов в оптимизированном изображении или в таблице цветов.
Выполните одно из следующих действий.

  • Нажмите кнопку «Заменить на Web» в палитре «Таблица цветов».
  • В меню палитры Таблица цветов выберите пункт «Заменить/Отменить замену выделенных цветов на цвета палитры Web». Исходный цвет отобразится в левом верхнем углу образца, а новый цвет — в правом нижнем углу. Небольшой белый ромб в центре образца показывает, что цвет является веб-цветом. Небольшой квадрат в правом нижнем углу образца показывает, что цвет заблокирован.

Чтобы задать допуск для замены, введите значение параметра «Web-цвета». Чем выше значение, тем больше изменяется цветов.

Чтобы вернуть цвета, замененные на Web-цвета, выполните одно из следующих действий.

  • Выделите в таблице цветов цвет, замененный на веб-цвет, и нажмите кнопку «Заменить на Web» в палитре «Таблица цветов».
  • Чтобы отменить в таблице цветов замену всех цветов на веб-цвета, выберите в меню палитры «Таблица цветов» пункт «Отменить замену всех цветов».

Преобразование цветов в прозрачность

Чтобы добавить в оптимизированное изображение прозрачность, нужно преобразовать существующие цвета в прозрачность.

Выберите один или несколько цветов в оптимизированном изображении или в таблице цветов.
Выполните одно из следующих действий.

  • Нажмите кнопку «Преобразовать прозрачность» в палитре «Таблица цветов».
  • В меню палитры Таблица цветов выберите пункт «Преобразовать/Отменить преобразование выделенных цветов в прозрачность». На половине каждого преобразованного цвета отобразится сетка прозрачности . Небольшой квадрат в правом нижнем углу образца цвета показывает, что цвет заблокирован.

Чтобы вернуть преобразование прозрачности в исходное состояние, выполните одно из следующих действий.

  • Выберите цвет, для которого нужно отменить преобразование в прозрачность, и нажмите кнопку Преобразовать прозрачность либо в меню палитры «Таблица цветов» выберите пункт «Преобразовать/Отменить преобразование выделенных цветов в прозрачность».
  • Чтобы вернуть все преобразованные цвета в исходное состояние, выберите пункт «Отменить преобразование цветов прозрачного объекта».

Блокировка или снятие блокировки цвета

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

Примечание.

Блокировка цветов не отменяет дизеринг в браузере.

Выберите нужные цвета в таблице цветов.
Чтобы заблокировать цвет, выполните одно из следующих действий.

  • Нажмите кнопку «Закрепить» .
  • В меню палитры «Таблица цветов» выберите пункт «Закрепить/Отменить закрепление выделенных цветов».

В правом нижнем углу каждого заблокированного цвета отобразится белый квадрат .

Чтобы разблокировать цвет, выполните следующие действия.

  • Нажмите кнопку «Закрепить» .
  • В меню палитры «Таблица цветов» выберите пункт «Закрепить/Отменить закрепление выделенных цветов».

Белый квадрат исчезнет из образца цвета.

Удаление выделенных цветов

Чтобы уменьшить размер файла изображения, можно удалить выделенные цвета из таблицы цветов. При удалении цвета области оптимизированного изображения, в которых ранее присутствовал этот цвет, выводятся повторно с использованием ближайшего доступного цвета в палитре.

После удаления цвета таблица цветов автоматически превращается в палитру «Заказная». Это происходит потому, что при повторной оптимизации изображения удаленный цвет автоматически возвращается в палитры «Адаптивная», «Перцепционная» и «Селективная», а палитра «Заказная» при этом действии не изменяется.

Выберите нужные цвета в таблице цветов.
Чтобы удалить цвет, выполните одно из следующих действий.

  • Щелкните значок «Удалить» .
  • В меню палитры «Таблица цветов» выберите пункт «Удалить цвет».

Сохранение таблицы цветов

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

В меню палитры «Таблица цветов» выберите пункт «Сохранить таблицу цветов».

Присвойте таблице цветов имя и выберите папку для сохранения. По умолчанию файлу таблицы цветов присваивается расширение «ACT» (Adobe Color Table).

Чтобы использовать таблицу цветов при выборе параметров оптимизации для изображения GIF или PNG, сохраните таблицу цветов в подпапке Optimized Colors папки приложения Photoshop.

Нажмите кнопку «Сохранить».
Примечание.

После повторной загрузки таблицы все замененные цвета будут отображаться в виде полных образцов, их закрепление будет отменено.

Загрузка таблицы цветов

В меню палитры «Таблица цветов» выберите пункт «Загрузить таблицу цветов».

Перейдите к файлу с таблицей цветов, которую нужно загрузить. Это может быть файл Adobe Color Table (.act), файл Adobe Color Swatch (.ace) или GIF-файл (для загрузки внедренной в файл таблицы цветов).

Нажмите кнопку «Открыть».

Параметры оптимизации PNG‑24

Формат PNG‑24 подходит для сжатия нерастрированных изображений. Однако размер файлов в этом формате больше размера JPEG-файлов. Преимущество формата PNG‑24 заключается в возможности сохранять в изображении до 256 уровней прозрачности.

«Прозрачность» и «Подложка»

Определите способ оптимизации прозрачных пикселей в изображении. См. Оптимизация прозрачности изображений в форматах GIF и PNG.

До полной загрузки файла изображение в браузере отображается в низком разрешении. Чересстрочное отображение позволяет уменьшить время ожидания полной загрузки и показать пользователям процесс загрузки изображения. Однако чересстрочноое отображение также увеличивает размер файла.

Параметры оптимизации WBMP

Формат WBMP является стандартным форматом оптимизации изображений для мобильных устройств, например сотовых телефонов. Формат WBMP поддерживает 1-разрядный цвет, то есть изображения WBMP содержат только черные и белые пикселы.

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

Доступны следующие методы дизеринга.

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

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

Примечание.

В режиме «Случайный дизеринг» по границам фрагментов могут возникать видимые швы. Связывание фрагментов распространяет узор дизеринга на все связанные фрагменты, что устраняет швы.

Значения пикселей определяются с помощью квадратного узора наподобие полутонового.

Применяется случайный узор, подобный узору в режиме «Случайный дизеринг», но без распространения на смежные пикселы. При использовании алгоритма «Шум» швы не возникают.

Параметры оптимизации SWF (Illustrator)

Формат файла Adobe Flash (SWF) — это векторный формат, который используется для создания масштабируемых и компактных изображений для Интернета. Поскольку этот формат является векторным, качество графического объекта не зависит от разрешения. Формат SWF идеально подходит для создания кадров анимации, но также позволяет сохранять растровые изображения в формате SWF или смешивать растровые и векторные изображения.

Определяет набор предопределенных параметров для экспорта. Можно создавать новые наборы параметров с нужными настройками и сохранять их с помощью команды «Сохранить настройки» в меню панели (чтобы открыть меню панели, щелкните треугольник справа от меню «Набор параметров»).

Версия проигрывателя Flash

Определяет самую раннюю версию проигрывателя Flash, которая поддерживает экспортированный файл.

Определяет тип экспорта слоев. Укажите «AI-файл в SWF-файл» для экспорта графического объекта в один кадр. Укажите «Слои в SWF-кадры» для экспорта графического объекта каждого слоя в отдельный кадр SWF для создания анимированного SWF.

Примечание.

Укажите AI-файл в SWF-файл для сохранения обтравочных масок слоев.

Определяет точность кривых Безье. Чем ниже значение, тем меньше размер экспортированного файла с незначительной потерей качества кривых. При более высоком значении кривые Безье прорисовываются более точно, но размер файла увеличивается.

Задает частоту воспроизведения анимации в программе просмотра Flash. Этот вариант доступен только для команды «Слои в SWF-кадры».

Позволяет зацикливать воспроизведение анимационного ролика в проигрывателе Flash, в отличие от разового воспроизведения. Этот вариант доступен только для команды «Слои в SWF-кадры».

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

Сохранить возможность редактирования

Обводки преобразуются в SWF-обводки, и прозрачность, не поддерживаемая SWF, приближается или не учитывается.

Примечание.

Формат SWF поддерживает непрозрачность только на уровне объектов.

Примечание.

При экспорте в отдельный SWF-файл порядок наложения графического объекта следует сохранять с помощью команды «Экспорт», а не «Сохранить для Web и устройств». Экспортированные SWF-файлы позднее можно одновременно импортировать в Adobe Flash.

Выполняется сжатие экспортированного файла.

Устанавливается защита файла от импорта в приложения, отличные от Flash.

Текст в виде контуров

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

Параметры оптимизации SVG (Illustrator)

SVG — векторный формат, описывающий изображения в виде фигур, линий, текста и фильтров. Конечные файлы компактны и гарантируют высокое качество графики для Интернета, печати и даже для переносных устройств с ограниченными ресурсами.

Позволяет создавать сжатые файлы SVG (SVGZ).

Задает определение типа XML-документа SVG для экспортируемого файла.

SVG 1.0 и SVG 1.1 Применяются при создании SVG-файлов, предназначенных для просмотра на настольном компьютере. SVG 1.1 — полная версия спецификации SVG с подмножествами SVG Tiny1.1, SVG Tiny1.1 Plus, SVG Tiny 1.2 и SVG Basic 1.1.

SVG Basic 1.1 Применяется при создании SVG-файлов, предназначенных для просмотра на устройствах средней мощности, например на мобильных устройствах. Следует помнить, что не все мобильные устройства поддерживают профиль SVG Basic. В результате, выбор этого параметра не гарантирует возможность просмотра SVG-файла на всех мобильных устройствах. SVG Basic не поддерживает непрямоугольную обрезку и некоторые эффекты фильтров SVG.

SVG Tiny 1.1 и SVG Tiny 1.1+ Применяются при создании SVG-файлов, предназначенных для просмотра на небольших экранах, например, на мобильных телефонах. Следует учитывать тот факт, что не все мобильные телефоны поддерживают профили SVG Tiny и SVG Tiny Plus. В результате выбор этих параметров не гарантирует возможность просмотра SVG-файла на всех небольших устройствах.

SVG Tiny 1.2 Используется при создании SVG-файлов, предназначенных для просмотра на различных типах устройств, начиная от КПК и мобильных телефонов и заканчивая ноутбуками и настольными компьютерами.
SVG Tiny не поддерживает градиенты, прозрачность, обтравку, маски, символы и некоторые фильтры SVG. SVG Tiny Plus поддерживает отображение градиентов и прозрачность, но не поддерживает обтравку, маски, символы и некоторые эффекты фильтров SVG.

Примечание.

Дополнительные сведения о профилях SVG см. в спецификации SVG на веб-сайте Консорциума World Wide Web (W3C) по адресу (www.w3.org).

Определяет точность векторных данных в SVG-файле. Можно задать от 1 до 7 десятичных знаков. Чем больше значение, тем больше размер файла и выше качество изображения.

Сокращение знакового состава шрифта

Определяет глифы, встраиваемые в SVG-файл. В меню «Сокращение знакового состава» выберите «Нет», если есть уверенность, что необходимые шрифты установлены на компьютерах конечных пользователей. Выберите «Только используемые глифы», чтобы включить глифы только для текста, присутствующего в данном графическом объекте. Другие значения («Символы английского языка», «Символы английского языка + использованные глифы», «Романские символы», «Романские символы + использованные глифы», «Все глифы») полезны в случаях, когда текстовое содержимое файла SVG является динамическим (например, текст, генерируемый сервером, или текст, получаемый в результате взаимодействия с пользователем).

Определяет экспорт шрифтов.

Adobe CEF Использует подсказки шрифтов для более качественного рендеринга маленьких шрифтов. Этот тип шрифта поддерживается в Adobe SVG Viewer, однако может не поддерживаться другими средствами просмотра SVG.

SVG Контрольная точка шрифтов не используется. Данный тип шрифта поддерживается во всех программах просмотра SVG.

Преобразовать текст в контуры Преобразует текст в векторные контуры. Используйте этот параметр, чтобы обеспечить единообразие внешнего вида текста во всех средствах просмотра SVG.

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

Определяется порядок сохранения атрибутов CSS-стилей в SVG-коде. По умолчанию используется параметр Атрибуты представления, определяющий свойства на самом высоком уровне иерархии, что обеспечивает наибольшую гибкость для подробных правок и преобразований. Метод «Атрибуты стиля» позволяет создать наиболее удобные для чтения файлы, но может увеличить размер файла. Этот метод следует использовать, если SVG-код будет использоваться в преобразованиях, например преобразованиях с использованием XSLT (Extensible Stylesheet Language Transformation). Метод «Ссылки на объекты» позволяет сократить время визуализации изображения и уменьшить размер SVG-файла. Метод «Элемент стиля» используется при использовании файлов совместно с HTML-документами. После того как будет выбран параметр «Элемент стиля», можно переместить элемент стиля из SVG-файла во внешний файл таблицы стилей, на который также ссылается HTML-файл, но это приведет к снижению скорости визуализации.

Определяется кодировка символов в SVG-файле. Кодировка UTF (Unicode Transformation Format) поддерживается всеми процессорами XML (формат UTF-8 является 8‑разрядным, а UTF-16 — 16‑разрядным). В ISO 8859‑1 и UTF‑16 метаданные файла не сохраняются.

Оптимизировать для программы просмотра Adobe SVG Viewer

Выполняет оптимизацию изображений для программы просмотра Adobe SVG Viewer.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *