Как в Gimp сохранить PNG или JPEG для Web?
В Adobe Photoshop есть очень нужная функция – сохранение картинок PNG и JPEG оптимизированными для использования в Интернете. В Gimp из коробки такой возможности нет, но ее можно добавить.
Вебмастера, которым приходится подготавливать картинки для Веба знают, что сохранять png и jpeg нужно в оптимизированном виде. Конечно в Gimp есть все инструменты чтобы это сделать: можно вручную для PNG урезать палитру цветов или в JPEG при сохранении картинки выкрутить оптимизацию на 75 или 65 пунктов. Эти инструменты, к сожалению, «разбросаны» по всему графическому редактору и пользоваться ими не всегда удобно. О скорости работы можно вообще забыть.
Удобно и быстро сохранять фото в популярных форматах для Веба – png и jpeg в Gimp`е можно с помощью стороннего плагина – gimp-save-for-web. Это дополнение не добавляет нового функционала в редактор, а всего-лишь собирает нужные настройки и инструменты в одном окне.
Для Linux: Ubuntu\Debian
Несколько лет назад для сохранения оптимизированных картинок PNG и JPEG был плагин – gimp-save-for-web. Сейчас его поддержка, как отдельного пакета, прекратилась и он вошел в состав сборника плагинов
Поэтому для Ubuntu правильным решение будет установить 1 deb-пакет из официального репозитория:
sudo apt-get install gimp-plugin-registryЕсли Вам не нужна солянка из дополнительных плагинов и фильтров, которые Вы не планируете использовать, а нужно только в Gimp сохранить фото JPEG или картинки PNG, то можете загрузить и установить пакет вручную.
Для Windows
У пользователей Windows немного больше действий для установки дополнения в Gimp:
- Загружаем плагин — save_for_web_0.28.6_win32.zip
- В архиве файл webexport.exe нужно поместить в директорию C:\Documents and Settings\\.gimp-2.10\plug-ins
- Перезапустить Gimp
Для Windows пользователей, возможно, будет удобно использовать альтернативный решение – riot-optimizer
Для MacOS
Для последних версий Gimp пока нет информации по установке.
В заключении хотелось бы сказать, что маленький плагин gimp-save-for-web позволяет существенно облегчить работу вебмастеру, сохраняя PNG\JPEG изображения для последующего размещения их в интернете.
Теги: gimp и linux
Рассказать в соц. сетях
Комментарии
Когда Photoshop отображает совсем не то, что надо / Хабр
Такая вот ситуация: дизайнер присылает макет, а у верстальщика открывается какая то лабуда светлая, или темная (если верстальщик испольует МасOS, а дизайнер Win.). Или же верстальщик сохраняет картинку, а там цвета другие стали.
Разберемся почему так и как с этим жить.
Небольшой экскурс в теорию. Для отображения цвета на наших мониторах используется цветовая модель RGB, но поскольку но, поскольку, мониторы разных моделей и производителей различаются, были предложены несколько альтернативных цветовых пространств, соответствующих «усредненному» монитору. Нам интересно пространство sRGB.
sRGB – это цветовая модель использование которой будет одинаково отображать графику как на навороченном так и на допотопном ноутбуке.
sRGB это пространство используемое по умолчанию для отображение графики в интернете.
Различие в профилях.
У правильного верстальщика профиль стоит North America Web/Internet. Проследите чтобы в Working Spaces было именно sRGB.
У правильного дизайнера тоже должен стоять такой профиль при создание макета сайта. Тогда ни у кого не будет проблем.
Помимо этого ваш Photoshop должен не только работать с нужным профилем, но и отображать вам истинный вид макета. А поскольку навороченные мониторы вряд ли используют усредненный sRGB, то необходимо чтобы стояла галочка на Proof Colors. Этим вы заставляете Photoshop отображать изображения согласно профилю.
Различия в OS
В Win по умолчанию на картинки накладывается профиль sRGB, то есть даже если вы не выбрали вышеуказанный профиль, у вас все равно будет sRGB. Однако в MacOs на картинки по умолчанию накладывается профиль монитора, что плохо. Однако решающее значение будет играть тот факт, какой профиль вы используете в граф. редакторе.
Есть еще одно различие: в Win гамма по умолчанию 2.2, а в Мас 1.8 (по крайней мере в последней ОС). Из за этого картинки с Мака выглядят темнее в Винде, и наоборот. Если дизайнер хочет постичь Дао, то нужно на Маке поднять гамму до 2.2 ( кто скажет как это сделать, тому спасибо и ссылка Настройки -> Мониторы -> Цвет -> Калибровать -> Продолжить -> 2.2 Телевизионная гамма… Прокликать дальше, как-нибудь назвать и использовать. Спасибо
Вадиму Макееву). Почему поднять на Маке, а не опустить на Вин? Потому что в Linux тоже 2.2, да и новая версия МаcOS выйдет с гаммой 2.2 (слухи ходят).
Мне прислали макет в профиле отличном от sRGB
Это самое интересное.
Так бывает. Стоит у дизайнера какой-нибудь “Cinema HD_BQB01072007” и дизайнер знать об этом не знает. Мол, наше дело нарисовать, художника всякий обидеть может и тэдэ.
Вряд ли сможете убедить дизайнера перевести макет в sRGB и перерисовать все цвета. Разве что при совсем уж отчаянной харизме (впрочем топор тоже может помочь). Не страшно.
Для начала необходимо убедится, что у нас стоят вот эти галки.
Теперь при получении некошерного профиля нам будет выдаваться вот такое окошко.
Что мы тут можем сделать.
- Мы можем применить профиль который идет с изображение
- Мы можем конвертировать профиль в наше рабочее пространство.
- Мы можем продолжить использовать свой профиль.
Многие начинающие верстальщики перебирают все три способа, пока картинка не будет идентична той что отображается в просмотрщик(ACDSee или Irfan и примеру). И останавливаются на третьем. Это НЕ ПРАВИЛЬНО, потому что вас просмотрщик тоже отображает не правильно.
И так допустим вы выбрали первый вариант. В этом случае при сохранении картинок нужно обязательно при сохранении картинки через Save for Web & Devices… убрать галку с Convert sRGB. Иначе у нас сохранится совсем не то что нам надо.
Внимание. В Photoshop CS3 она прячется здесь.
Я же настоятельно рекомендую выбирать второй пункт — конвертацию. Но перед этим зайдите в Convert to Profile и снимите вот эту галочку
Потому что в случае если в присланном вам профиле используется большее кол-во цветов чем в sRGB, то Photoshop будет пытаться заменить отсутствующие цвета комбинацией своих. Правда я не знаю как это будет выглядеть, ибо не сталкивался никогда. Скорее всего будет частичное цветовое несоответствие.
На этом все. Жду ваших вопросов.
Все дело в формате или как правильно сохранить картинку в фотошопе | DesigNonstop
Все дело в формате или как правильно сохранить картинку в фотошопе
10
Сегодня мы поговорим о том, как правильно сохранить и оптимизировать картинку в фотошопе и в каком формате это лучше сделать. А ведь правильный выбор формата сохранения очень сильно влияет на качество и внешний вид картинки, а также на вес картинки в килобайтах. Это особенно важно для тех, кто учитывает расход трафика. Итак, давайте разберемся по порядку с jpg, gif и png.
1. В каких форматах сохранять картинки
После того, как вы открыли в фотошопе любимую фотографию и каким-то образом поколдовали над ней или, вообще, создали с нуля коллаж собственного производства, вам предстоит сохранить этот файл у себя на компьютере. Для сохранения файла существуют три самых распространенных формата.
Формат jpg. Пожалуй, самый распространенный формат. Подходит для сохранения сложных графических изображений со множеством цветов и оттенков и насыщенной текстурой. То есть фотографии лучше всего сохранять в этом формате. Среди его недостатков — не поддерживает прозрачность и очень чувствителен к красному цвету.
Формат gif. В этом формате очень хорошо сохранять файлы, с ограниченным количеством цветов. Например, текстовые страницы, таблицы, схемы, логотипы, простые картинки. Получается гораздо четче и весит меньше. Плюс формат поддерживает прозрачность и анимацию. Однако, формат морально устаревает и уже уступает формату png.
Формат png. Похож на предыдущий формат, но более продвинут и эффективнее сжимает картинки. В png очень удобно сохранять клипарты на прозрачном фоне. Существует в двух форматах png-8 (для простых картинок, поддерживает 256 цветов) и png-24 (для более сложных изображений, хорошо поддерживает цвета).
2. Сохраняем с помощью функции «Сохранить как…» (Save as…)
Можно сохранить картинку используя старый добрый способ через меню «Файл» -> «Сохранить как…» (Save as…) или комбинация клавиш «Shift+Ctrl+S». В выпадающем меню выбирается формат файла, в котором хотим сохранить файл. (Смотрим рисунок ниже) Этот способ используется когда сохраняемая картинка останется на вашем компьютере и не предназначается для публикации в интернете.
3. Сохраняем с помощью функции «Сохранить для Web» (Save for Web…)
Если же ваша картинка предназначена для того, чтобы быть вывешенной в интернете, то лучше воспользоваться функцией «Сохранить для Web» (Save for Web…). При таком способе картинка лучше и качественнее сохраняется именно для интернета и плюс там есть несколько удобных возможностей. Выбираем в меню «Файл» -> «Сохранить для Web…» (Save for Web…) или комбинация клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно.
Для того, чтобы сохранить картинку в формате jpg в выпадающем меню (1) выбираем формат JPEG. Ставим качество сохранения (2) от 75% до 95%. Я всегда ставлю 75%. Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».
Для того, чтобы сохранить картинку в формате gif в выпадающем меню (1) выбираем формат GIF. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). После этого нажимаем «Сохранить».
Для того, чтобы сохранить картинку в формате png в выпадающем меню (1) выбираем формат PNG-8. Выбираем количество цветов для сохранения (2). Устанавливаем, если надо, необходимые размеры картинки (3). В окошках слева показан изначальный размер картинки (4) и размер оптимизированной картинки (5). Ставим галочку в чекбоксе «Прозрачность» (6) для того, чтобы фон был прозрачным. После этого нажимаем «Сохранить».
Если сразу не понятно, в каком режиме сохранять, лучше всего перепробовать все режимы сохранения, на глаз определяя оптимальное для вас сочетание качества картинки и ее веса после оптимизации. Вообще, полезно поэкспериментировать с настройками, чтобы понять, как работает та или иная функция.
Как сохранить изображения WebP в формате JPG и PNG
WebP — это формат изображений от Google. Он сохраняет качество изображения JPG и прозрачность PNG, но в очень меньшем размере. Однако, мы всё-таки чаще пользуемся привычными нам форматами и поэтому нужно знать, как легко конвертировать изображение из одного формата в другой.
1. С помощью расширения:
Save Image As Type (Сохранить изображение как тип) — это расширение Google Chrome, которое при установке дает возможность сохранять изображения в формате JPG или PNG через контекстное меню.
2. С помощью редактирования URL-адреса:
Если вы столкнулись с изображением WebP, щелкните правой кнопкой мыши по нему и выберите Скопировать URL-адрес. Теперь вставьте его в другую вкладку и посмотрите, есть ли -rw в конце URL. Если URL-адрес имеет -rw, то удалите его и и нажмите клавишу Enter. Теперь вы сможете сохранять изображения в JPG или PNG.
3. С помощью веб-сервиса
Если не хочется устанавливать расширения или колдовать с адресом, то попробуйте веб-сервисы. Я рекомендую Image Decoder или Zamzar.
Спасибо, что читаете! Подписывайтесь на мои каналы в Telegram, Яндекс.Мессенджере и Яндекс.Дзен. Только там последние обновления блога и новости мира информационных технологий.
Также, читайте меня в социальных сетях: Facebook, Twitter, VK, OK.
Респект за пост! Спасибо за работу!
Хотите больше постов? Узнавать новости технологий? Читать обзоры на гаджеты? Для всего этого, а также для продвижения сайта, покупки нового дизайна и оплаты хостинга, мне необходима помощь от вас, преданные и благодарные читатели. Подробнее о донатах читайте на специальной странице.
Есть возможность стать патроном, чтобы ежемесячно поддерживать блог донатом, или воспользоваться Яндекс.Деньгами, WebMoney, QIWI или PayPal:
Заранее спасибо! Все собранные средства будут пущены на развитие сайта. Поддержка проекта является подарком владельцу сайта.
Поделиться ссылкой:
Функция «Сохранить для Интернета» в Photoshop
Начиная с версии 5 и выше, Photoshop включает очень удобную команду «Сохранить для Интернета». Эта функция позволяет создавать копию изображения, оптимизированную для использования в Интернете. Это означает, что файл изображения будет как можно меньше и в изображении будут использоваться только безопасные для Интернета цвета (при желании). Сохранить для Интернета можно создавать изображения в формате GIF, JPEG или PNG.
Использование сохранения для Интернета
Когда вы будете готовы разместить изображение на своей веб-странице, выберите Сохранить для Интернета… в меню Файл .Откроется диалоговое окно «Сохранить для Интернета»:
Здесь вы указываете Photoshop, как вы хотите оптимизировать свое изображение для Интернета. Вы можете выбрать формат файла для создания (GIF, JPEG или PNG), какую палитру размеров вы хотите использовать, как обрезать цвета, чтобы они соответствовали выбранному размеру палитры, насколько размыть оптимизированное изображение (если вообще ) и насколько жертвовать качеством изображения, чтобы получить файл меньшего размера.
Просмотры изображения
Четыре вкладки над панелью просмотра изображений слева позволяют просматривать исходное изображение, оптимизированную версию (это значение по умолчанию), оригинальную и оптимизированную версии, расположенные рядом («2 варианта»), а также исходную. , optimized и два варианта оптимизации вместе («4-Up»).Вы также можете использовать инструмент Рука в левом верхнем углу для перемещения обзора (если изображение больше, чем вид), инструмент Масштаб для увеличения и уменьшения изображения и инструмент Пипетка для выбора цвет из изображения, который будет использоваться различными параметрами цвета в правой части диалогового окна.
пресетов
В диалоговом окне «Сохранить для Интернета» есть множество опций, и выбор может быть довольно запутанным! К счастью, есть список предустановок, из которых вы можете выбрать, чтобы упростить задачу.Щелкните раскрывающийся список Settings: (сразу под кнопкой Cancel ), чтобы открыть список предустановок:
В предустановках есть три основных формата изображений — GIF, JPEG и PNG. Как правило, используйте JPEG для фотографий и GIF для всего остального. Полное руководство по выбору правильного формата изображения см. В разделе Общие сведения о форматах изображений.
Оптимизация GIF
Если вы создаете GIF, начните с предустановки, например GIF 32 Dithered , которая должна хорошо работать для большинства GIF.Затем вы можете настроить оптимизацию в соответствии со своими потребностями. Некоторые из важных вариантов оптимизации обсуждаются ниже.
Метод уменьшения цвета
Это раскрывающийся список под полем «Формат изображения». Обычно используется optio
Photoshop Сохранить как и Сохранить для веб-сравнения
Photoshop предлагает два варианта сохранения изображения после редактирования:
- Файл -> Сохранить как …
- Файл -> Сохранить для Интернета…
Обе эти опции меню создают выходной файл JPEG из вашего рабочего изображения, но они различаются как доступными параметрами, так и гибкостью и представлением качества сжатия JPEG.
Быстрый выбор
| Если вы планируете … | Вы должны использовать |
|---|---|
| Создание изображений для вашего сайта, или оптимизируйте файл как можно меньше | Сохранить для Интернета |
| Обмениваться изображениями с другими, и вы хотите, чтобы зрители знали время / дату съемки и т. д. | Сохранить как |
| Обмениваться изображениями с другими, и вы не хотите, чтобы другие знали время / дату съемки и т. д. Например, стоковые фотографии или опасения по поводу конфиденциальности | Сохранить для Интернета |
Преобразование изображения в файл заданного размера, | Сохранить для Интернета |
| … для всех остальных случаев | Сохранить как |
Photoshop Сохранить как
Диалоговое окно «Сохранить как» содержит очень большое количество выходных файлов. форматы, поскольку это стандартный метод, с помощью которого пользователи будут создавать их окончательные файлы изображений. Поскольку этот метод вывода не оптимизирован для передачи с низкой скоростью передачи данных носитель (например, Интернет), дополнительная информация кодируется в полученное изображение за счет увеличения размера файла.Как показано ниже, эти дополнительные данные могут занимать около 40 КБ.
Одна из основных причин, по которой фотографы выбирают «Сохранить как» вместо «Сохранить для Интернета» при публикации фотографий, заключается в том, что метаданные EXIF (которые включают информацию о камере и сведения о снимках) могут быть отображены для других заинтересованных зрителей. Большинство сайтов по обмену фотографиями (например, pbase) автоматически извлекают эту EXIF-информацию для других фотографов. Однако, учитывая, что он также включает время и дату исходного снимка, он может иметь последствия для конфиденциальности.
16-битный режим
Как «Сохранить как» не поддерживает 16-битные изображения, может потребоваться сначала преобразовать в 8-битные, сохранить, а затем отменить этап преобразования глубины цвета, если вы планируете продолжить работу с файлом. Вы можете преобразовать в 8-битный RGB, выбрав Изображение -> Режим -> 8 бит / канал. Сохранить для Интернета автоматически преобразует глубину цвета.
Photoshop Сохранить для Интернета
Диалоговое окно «Сохранить для Интернета» не обеспечивает такой гибкости форматы файлов изображений вывода как диалоговое окно «Сохранить как», но оно предлагает больше гибкости с каждым поддерживаемым вариантом.Поддерживаемые форматы выходных файлов:
- JPEG — Выбор уровня качества (1-100). Нет прозрачности.
- GIF — Различные размеры палитры (2-256) и параметры дизеринга определяют качество. Поддерживает однобитовая прозрачность.
- PNG-8 — Уменьшенная глубина цвета (2-256 цветов) и параметры дизеринга определяют качество. Поддерживает многобитную прозрачность.
- PNG-24 — 24-битное качество «без потерь».Поддерживает многобитную прозрачность.
- WBMP — Черно-белый вывод с дизерингом.
| Главное окно «Сохранить для Интернета» |
Основное внимание на этой странице будет уделяться выходному формату JPEG.
Сохранить для веб-вывода JPEG
Поскольку команда «Сохранить для Интернета» предназначена для использования с изображениями, предназначенными для отображения в Интернете, одна из основных целей — максимально оптимизировать размер файла при сохранении приемлемого качества изображения.Для этого используются два метода: a) предварительный просмотр изменения ползунков качества сжатия JPEG и b) удаление всех ненужных метаданных (маркеров JPEG) в выходном файле.
Основные функции Save for Web включают:
- Оптимизировать до размера файла : Возможность автоматического выбора как формата файла (JPEG или GIF), так и уровня сжатия JPEG для достижения выбранного размера файла.
- Удаление метаданных EXIF .Для многих это полезная функция, в то время как другие полностью избегают сохранения для Интернета из-за нее. Для простых изображений на веб-сайте или из соображений конфиденциальности вы можете скрыть время / дату съемки фотографии или другие параметры. Но если вы планируете публиковать свои изображения на сайте фотохостинга и хотите указать зрителям фокусное расстояние, апертуру и другие параметры, сохранение для Интернета не будет правильным методом.
- Удаление дополнительных маркеров . В большинстве выходных файлов JPEG используются специальные маркеры для указания дополнительной информации или обеспечения устойчивости в случае ошибок / повреждения.Метод «Сохранить для Интернета» удалит их и позволит декодерам JPEG работать.
Цветовые профили ICC
Как «Сохранить для Интернета», так и «Сохранить как» дают вам возможность включить в изображение цветовой профиль ICC. Цветовые профили используются для отображения на экране зрителя, так как значения RGB в данных изображения должны соответствовать реальным цветам. Предполагая, что у вас есть среда с управляемой цветом (откалиброванный и профилированный монитор), этот профиль используется для отображения цветов в том виде, для которого они предназначены.
К сожалению, большинство веб-браузеров не читают этот профиль, и у большинства людей нет откалиброванных мониторов, поэтому обычно используется цветовое пространство по умолчанию sRGB. Поэтому, если вы публикуете свои фотографии в Интернете, и ваши фотографии были сняты в таком цветовом пространстве, как Adobe RGB, настоятельно рекомендуется сначала преобразовать их в sRGB. Как только вы это сделаете, нет необходимости включать профиль ICC в файл.
Сравнение маркеров JPEG
Различия между выходными данными двух методов сохранения сжатых файлов JPEG легко увидеть при сравнении самих файлов JPEG (JFIF).Формат файла JPEG (JFIF) определяет количество обязательных маркеров, а также некоторые дополнительные. На приведенной ниже диаграмме показано сравнение Photoshop CS2 Save as и Photoshop CS2 Save for the Web на низком уровне с помощью JPEGsnoop:
| Сравнение маркеров JPEG в Photoshop | ||
|---|---|---|
| Сохранить как | Сохранить для Интернета | Описание |
| СОИ | СОИ | Маркер начала изображения |
| APP0 | APP0 | Идентификатор, версия, разрешение, расширения JFIF |
| APP1 | данных EXIF, в обоих удалены Makernotes.(длина ~ 5 КБ) | |
| ПРИЛОЖЕНИЕ 13 | Photoshop IRB (данные, относящиеся к Photoshop, включая качество) (длина ~ 5 КБ) | |
| APP1 | Метаданные XML (EXIF, IPTC и т. Д.) (Длина ~ 17 КБ) | |
| APP2 * | APP2 * | Цветовой профиль ICC (* опционально) (длина ~ 3 КБ) |
| APP12 | Тег Ducky — Save for Web Quality — хранит уровень качества (длина 17B) | |
| APP14 | APP14 | Информация о кодировании: преобразование цвета (например,г. YCbCr, YCCK, RGB, CMYK) и были ли образцы смешаны или нет (длина 14B) |
| DQT | DQT | Таблицы квантования |
| SOF0 | SOF0 | Базовый DCT, субдискретизация цветности |
| DRI | Интервалы перезапуска — добавляет уровень восстановления в случае ошибок (длина переменная, зависит от частоты) | |
| DHT | DHT | Компрессионные столы Хаффмана |
| SOS | SOS | Начало сканирования: поток данных изображения |
| EOI | EOI | Маркер конца изображения |
Как видно из вышеприведенной таблицы, дополнительные данные сохранены в формате «Сохранить как JPEG» по сравнению с «Сохранить для Интернета» в формате JPEG. обычно порядка ~ 40 КБ.В большинстве фотографий с высоким разрешением эта дополнительная нагрузка незначительна, но при попытке сжать небольшие изображения для использования в Интернете эти накладные расходы могут быть значительными.
Извлечение настроек качества в «Сохранить как
»В файлах, созданных с помощью «Сохранить как», можно получить настройку качества из ресурса Photoshop IRB (0x0406) в маркере JPEG APP13 (0xFFED). На следующем шестнадцатеричном представлении показано изображение, сохраненное с настройкой качества 2.
| Значение | Качество |
|---|---|
| 0xFFFD | Качество 1 (Низкое) |
| 0xFFFE | Качество 2 |
| 0xFFFF | Качество 3 |
| 0x0000 | Качество 4 |
| 0x0001 | Качество 5 (Среднее) |
| 0x0002 | Качество 6 |
| 0x0003 | Качество 7 |
| 0x0004 | Качество 8 (высокое) |
| 0x0005 | Качество 9 |
| 0x0006 | Качество 10 (максимум) |
| 0x0007 | Качество 11 |
| 0x0008 | Качество 12 |
Извлечение настроек качества в Save For Web
В файлах, созданных с помощью функции «Сохранить для Интернета», можно получить настройку качества (1..100) из ресурса Ducky в маркере JPEG APP12 (0xFFEC) (начинается со строки ASCII с завершающим нулем Ducky). Значение процента сохраняется в шестнадцатеричном формате. В следующем шестнадцатеричном представлении показан файл, сохраненный с настройкой качества 51 = 0x33:
.Сравнение качества «Сохранить как» и «Сохранить для Интернета»
Многие люди не понимают, почему существует разница в определение настроек качества в Photoshop и, кроме того, как они сравнивают. В следующей таблице показаны два метода и относительный упорядочение качества между настройками, от лучшего к худшему.См. Описание ниже, чтобы узнать об ограничениях такого упорядоченного сравнения.
Для получения дополнительной информации прочтите о подвыборке цветности JPEG.
| Метод | Качество JPEG | Предустановка | Субдискретизация цветности |
|---|---|---|---|
| Сохранить для Web | 100 | Максимум | 1×1 |
| Сохранить как | 12 | Максимум | 1×1 |
| Сохранить для Интернета | 90 | 1х1 | |
| Сохранить как | 11 | 1х1 | |
| Сохранить для Интернета | 80 | Очень высокий | 1×1 |
| Сохранить как | 10 | 1х1 | |
| Сохранить для Интернета | 70 | 1х1 | |
| Сохранить как | 9 | 1х1 | |
| Сохранить для Интернета | 60 | Высокая | 1×1 |
| Сохранить как | 8 | Высокая | 1×1 |
| Сохранить для Интернета | 51 | 1х1 | |
| Сохранить для Интернета | 50 | 2×2 | |
| Сохранить как | 6 | 2×2 | |
| Сохранить как | 7 | 1х1 | |
| Сохранить как | 5 | Средний | 2×2 |
| Сохранить для Интернета | 40 | 2×2 | |
| Сохранить как | 4 | 2×2 | |
| Сохранить как | 3 | Низкая | 2×2 |
| Сохранить для Интернета | 30 | Средний | 2×2 |
| Сохранить как | 2 | 2×2 | |
| Сохранить для Интернета | 20 | 2×2 | |
| Сохранить как | 1 | 2×2 | |
| Сохранить для Интернета | 10 | Низкая | 2×2 |
В графической форме вот диаграмма, которая показывает сравнение JPEG яркость и цветность в предустановках по умолчанию, каждый с эквивалентным Стандартный «коэффициент качества» JPEG.Конечно, важно отметить что показанный коэффициент качества не является точным показателем качества изображения поскольку это действительно сопоставимые количества, только если и Сохранить для Интернета, и Сохранить как были основаны на линейном масштабировании включенных таблиц квантования. в стандартном приложении JPEG. Поскольку ни один из них не основан на образцах таблиц, коэффициент качества следует рассматривать только как очень приблизительную меру сравнения. График упорядочен по убыванию добротности яркости.
| Упорядоченный график |
| Сравнительный график |
Полное руководство по сохранению изображений для Интернета
На первый взгляд, сохранение изображений для Интернета может быть довольно простым процессом. Однако, если вы копнете глубже, вы можете упустить множество информации и техник.
В этой статье основное внимание будет уделено разнообразным функциям команды Photoshop «Сохранить для Интернета и устройств», а также некоторым передовым методам сохранения изображений, оптимизированных для использования в Интернете. Мы начнем с очень простого для всех новичков, но по мере нашего прогресса у нас будет много дополнительной информации для опытных ветеранов, которые работают в профессиональных командах веб-дизайнеров.
До сохранения
Подготовка изображений для Интернета начинается не с сохранения.Перед тем как перейти в диалоговое окно «Сохранить для Интернета», рекомендуется ознакомиться с некоторыми моментами.
Во-первых, вам нужно взглянуть на свой режим изображения . При разработке для Интернета или любого другого экранного носителя вы должны убедиться, что ваши изображения отформатированы в формате RGB. Традиционно CMYK зарезервирован для печати. Это потому, что существует фундаментальная разница между созданием цветов с помощью света и имитацией цветов с помощью чернил. В то время как принтеры используют крошечные точки, содержащие только один из четырех цветов (голубой, пурпурный, желтый или черный), чтобы создать иллюзию других цветов, экраны способны воспроизводить миллионы цветов.
Кроме того, RGB является аддитивной системой, что означает, что результатом большего количества цвета является белый цвет. И наоборот, CMYK — это система вычитания, что означает отсутствие какого-либо цвета — это белый (цвет большей части бумаги), а цвета добавляются, чтобы приблизиться к черному. Аддитивные системы способны производить более яркие цвета в более широком спектре.
Ключевая информация здесь заключается в том, что для экранной графики вы не можете превзойти изображение RGB .
Помните об этом в самом начале проекта, особенно если вы создаете веб-графику с помощью Photoshop.Начать работу в рабочем пространстве RGB намного лучше, чем работать с CMYK и конвертировать позже, что позволяет создавать пятнистые градиенты и приглушенные цвета. Команда Photoshop «Сохранить для Интернета» автоматически преобразует изображения CMYK в соответствующую цветовую систему на основе вашего выбора в диалоговом окне, но вы определенно захотите узнать и принять во внимание исходный цветовой режим изображения, прежде чем даже войдете в диалоговое окно. Если вы не знаете цветовой режим данного изображения, посмотрите в строке меню в разделе Изображение> Режим.
Второе, на что нужно обратить внимание, это размер исходного изображения .Если ваше изображение слишком велико, нажатие «Сохранить для Интернета» выдаст вам следующее предупреждение:
По сути, Photoshop сообщает вам, что ваше изображение не только слишком велико для большинства веб-приложений, но и больше, чем было создано командой «Сохранить для Интернета». Если вы нажмете «продолжить», Photoshop фактически выполнит сохранение. Однако диалог и включенные команды могут быть очень медленными из-за размера файла, в зависимости от системных ресурсов вашего компьютера. Рекомендуется уменьшить размер больших файлов перед входом в диалоговое окно «Сохранить для Интернета», чтобы избежать проблем.
Вход в диалоговое окно «Сохранить для Интернета»
Когда у вас есть цветовой режим и размер изображения, все в квадрате, нажмите Cmd / Ctrl + Shift + Alt + S на клавиатуре, чтобы открыть диалоговое окно «Сохранить для Интернета и устройств».
Если вы не знакомы с этим диалоговым окном, сначала он может показаться немного утомительным. Фактически, даже если вы являетесь проверенным временем профессионалом Photoshop, но не владеете CS4, все будет выглядеть немного иначе, поскольку Adobe полностью переработала это меню.
Здесь все важно, но вы обнаружите, что есть несколько ключевых функций, которые вы будете использовать чаще всего, которые выделены ниже.
Размер изображения
В правом нижнем углу окна вы должны увидеть раздел «Размер изображения». Этот раздел довольно прост и работает так же, как и в предыдущих версиях Photoshop.
Вы можете установить размеры, используя высоту / ширину в пикселях или просто набрав процент от исходного размера изображения.Когда вы настраиваете эти числа, обратите внимание на предварительный просмотр изображения, поскольку оно будет обновляться, чтобы отразить изменения.
Качество передискретизации
Самой сложной частью этого раздела является раскрывающееся меню Качество . Если вы откроете его, вы увидите, что у вас есть выбор: Ближайший сосед , Билинейный , Бикубический , Бикубический сглаживающий или Бикубический более резкий . Каждый из них отражает свой метод интерполяции пикселей.
Изменение размера изображения с помощью только базовой интерполяции просто увеличивает / уменьшает данные пикселей и может привести к довольно уродливым результатам. Чтобы предотвратить это, Photoshop пытается манипулировать способом интерпретации пикселей при изменении размера изображения.
К сожалению, нет лучшего решения для каждого изображения, и Photoshop не достаточно умен, чтобы решить, какой режим лучше всего подходит для данного изображения. По умолчанию выбран бикубический. Как правило, этого достаточно для большинства новичков, и на самом деле это самый сложный метод.Однако, если вы действительно хотите научиться получать максимальную отдачу, ознакомьтесь с краткими объяснениями плюсов и минусов каждого метода ниже.
Ближайший сосед: Этот параметр является самым основным режимом интерполяции и направлен на сохранение резких краев изображения путем простого увеличения или уменьшения данных пикселей, как упомянуто выше. Это может быть хорошо, если ваше изображение не содержит большого количества градиентов, но при значительном изменении размера будет получаться изображение с наложением и пикселями.
Билинейный: Немного более интеллектуальный, чем ближайший сосед, и использует средневзвешенное значение 4 ближайших пикселей для увеличения количества пикселей. Этот метод создает эффект сглаживания, который устраняет резкие пиксельные края, но в результате может создавать размытое изображение.
Бикубический: Бикубический — самый сложный метод и выборки из ближайших 16 пикселей. Как и в случае с билинейным, этот метод приводит к сглаживанию для предотвращения любых нежелательных артефактов.
В программе Photoshop есть три версии бикубического метода: бикубический, бикубический сглаживание и бикубический формирователь. Чтобы получить подсказку, когда использовать каждый из них, мы обратимся к другой части Photoshop. Закройте диалоговое окно «Сохранить для Интернета» и перейдите в строку меню в разделе «Изображение»> «Размер»> «Размер изображения». Теперь загляните в раскрывающееся меню «resample», и вы найдете несколько знакомых опций.
На этот раз мы видим, что каждая опция (кроме билинейной) имеет небольшую подсказку относительно того, когда ее использовать.Теперь мы можем видеть, что у каждого варианта бикубического режима есть свои преимущества: бикубический режим лучше всего подходит для создания плавных градиентов, бикубический сглаживание лучше всего подходит для увеличения, а бикубический сглаживание лучше всего подходит для уменьшения.
Всегда помните об этих советах при изменении размера изображений в диалоговом окне «Сохранить для Интернета». Однако не следует слепо следовать им, не изучив результаты каждого, чтобы решить, какой вариант лучше всего подходит для конкретного изображения.
Тип файла и качество изображения
В правом верхнем углу окна вы найдете настройки, позволяющие выбрать тип файла для вывода, а также различные параметры, касающиеся качества вывода.
При настройке этих параметров вы, очевидно, захотите следить за предварительным просмотром изображения, но не менее важна, чем то, как выглядит изображение, — это информация непосредственно под предварительным просмотром, относящаяся к размеру изображения и приблизительному времени загрузки.
Помните, что всегда существует компромисс между качеством и размером файла . Как новичок, у вас может возникнуть соблазн выбрать качество вместо размера и сделать снимок по максимуму, но это большая ошибка, из-за которой ваши сайты загружаются очень медленно.Как вы можете видеть на изображениях выше, по умолчанию размер моего файла составляет почти 1,3 МБ. Это намного больше, чем предпочтительно для большинства веб-изображений. С помощью всего лишь нескольких настроек размера и качества я могу легко уменьшить его до примерно 20 КБ (гораздо более предпочтительный размер).
Параметры типа файла
Есть три основных типа файлов, на которых мы хотим сосредоточиться для сохранения изображений, оптимизированных для Интернета: GIF, JPG и PNG . У каждого типа файла есть свои сильные и слабые стороны, и очень важно знать и помнить о них при сохранении изображения.Начнем с самого сложного: GIF .
Работа с GIF
GIF-изображенияпопулярны для простой веб-графики из-за их относительно небольшого размера файла. Однако GIF-файлы ограничены 256 цветами и поэтому должны использоваться очень избирательно. Многие дизайнеры укажут на то, что фотографии не следует сохранять в формате GIF из-за того, что для воссоздания сцены «реальной жизни» необходимы миллионы цветов. Это определенно правильно, но не дает вам свободы использовать GIF для всех нефотографических элементов.Например, изображение «шести редакций», которое мы использовали до сих пор, было создано в Photoshop и, следовательно, не является фотографическим, но все еще очень плохой кандидат для файла GIF. Взгляните на выделенный текст с помощью сжатия GIF:
.Как видите, даже при включенном максимальном количестве цветов градиент от белого к красному довольно пестрый. Однако это определенно не исключает GIF как полезного формата файлов. Часто бывает, что вы сохраняете изображение, например логотип, в котором может быть только несколько цветов. Все, что имеет большие области сплошного цвета и минимальные градиенты, должно отлично выглядеть в формате GIF . Например, если бы наше изображение было изменено так, чтобы оно больше походило на изображение ниже, у нас было бы гораздо больше свободы в выборе типа файла.
Как видите, изображение выше довольно простое и даже не требует всех 256 доступных цветов. Если в качестве типа файла в диалоговом окне «Сохранить для Интернета» выбран GIF, у вас будет несколько вариантов, сколько цветов вы хотите использовать, от 2 до 256.
Очевидно, что двух цветов слишком мало для создания красивого изображения. Однако 256 выглядит немного излишним, потому что наша 16-цветная версия так хороша. Эта версия имеет всего 7 КБ, в то время как JPG аналогичного качества подтолкнет нас более чем вдвое к 16 КБ.
Другие способы уменьшения размера файла GIF включают уменьшение или устранение любого дизеринга, настройку настроек цветовой палитры (перцепционная, адаптивная и т. Д.) И увеличение сжатия с потерями. Потребуется еще несколько абзацев, чтобы оценить эти параметры должным образом, поэтому я просто рекомендую вам изменить эти настройки, наблюдая за качеством и размером файла, чтобы попытаться найти идеальный результат.
Работа с JPG
Как я упоминал ранее, форматы JPG будут вашим лучшим выбором при работе с фотографиями или графикой, содержащей сложные эффекты , такие как тени, градиенты и т. Д. Из-за широкого диапазона цветов, доступных в JPG, вам не нужно беспокоиться о выборе цветовой палитры. Остается изменить основные параметры качества.
Для настройки качества изображения используйте ползунок «Качество» справа или раскрывающийся список слева (от низкого до максимального).Опять же, не забудьте, что для следите как за предварительным просмотром изображения, так и за размером файла , когда вы пробуете различные настройки. Как вы можете видеть на изображении ниже, существует широкий диапазон качества между самыми низкими и самыми высокими настройками.
Обратите внимание, что при снижении качества страдают не только резкие края, но и градиенты. Изящная деградация от одного цвета к другому превращается в неаккуратный беспорядок с четко различимыми ступенями цвета. Однако для максимального размера мы увеличиваем 90 КБ, что немного не нужно для этого небольшого изображения.Вы обнаружите, что лучшее решение почти всегда находится где-то между самыми низкими и самыми высокими настройками. Постарайтесь найти настройку самого низкого качества, которая не приведет к значительному ухудшению мельчайших деталей изображения.
Совет. Увеличив параметр «Размытие» при сохранении JPG, вы можете уменьшить размер файла. Однако делайте это только в той степени, в которой это не приведет к значительному ухудшению качества вашего изображения.
Работа с PNG
Photoshop предоставляет вам два варианта работы с PNG: PNG-8 и PNG-24.Если вы откроете параметры PNG-8, вы увидите, что они очень похожи на параметры, которые мы видели для GIF. Мы снова возвращаемся к выбору максимального количества цветов 256. Это означает, что PNG-8 ограничен теми же типами простых файлов, которые вы использовали бы для GIF. Иногда использование PNG-8 вместо GIF может дать файл меньшего размера при почти идентичном качестве. Лучше поэкспериментировать с обоими, чтобы увидеть, какой из них дает лучший результат
PNG-24, с другой стороны, обеспечивает гораздо более высокое качество изображения.PNG-24 сохраняют большую часть исходного качества изображения PSD и могут обрабатывать прозрачность намного лучше, чем GIF.
Как вы можете видеть на изображении выше, качество теней довольно высокое, и они будут отлично смотреться на сплошном фоне в файле HTML. Однако у использования PNG есть два больших недостатка. Во-первых, размер файла; обратите внимание, что для PNG шириной 550 пикселей больше размера файла в 40.9K. Это неплохо для большинства современных подключений к Интернету, но он намного больше, чем эквивалентный JPG или GIF, и может действительно затянуть веб-страницу с большим количеством изображений.Последним и еще более серьезным недостатком использования прозрачных PNG является то, что они поддерживаются не всеми основными веб-браузерами. Почти каждый профессиональный веб-дизайнер знает об этом и либо игнорирует это вопреки всем пользователям, которые не обновляют свои браузеры, либо вообще избегает использования PNG, либо придумывает хитроумные уловки, чтобы обмануть браузеры, такие как IE6, и заставить их представить. Независимо от того, какой метод вы выберете для жизни, обязательно примите осознанное решение, прежде чем оставлять позади посетителей. Если у вас уже есть сайт, воспользуйтесь Google Analytics или другим аналогом, чтобы отслеживать процент посетителей, которых вы получаете с помощью браузеров, не поддерживающих PNG.Это позволяет вам принять наилучшее решение для вашей текущей пользовательской базы.
Режимы просмотра
К настоящему времени вы можете быть немного ошеломлены количеством опций, доступных для сохранения изображений для Интернета. Вы можете подумать, что переключение между различными параметрами занимает слишком много времени и что точное сравнение этих параметров практически невозможно без сохранения версии каждого из них. К счастью, Photoshop устраняет эти проблемы, позволяя одновременно просматривать несколько вариантов.В верхнем левом углу диалогового окна «Сохранить для Интернета» вы увидите 4 вкладки с названиями Исходный, Оптимизированный, 2 варианта и 4 варианта. Дизайнеры часто не обращают на них внимания, но они чрезвычайно полезны при выборе оптимальных настроек для данного изображения.
Оригинал и оптимизация
При просмотре вкладок «Исходный» и «Оптимизированный» можно просмотреть одно изображение. Принципиальное отличие состоит в том, что «Исходный» позволяет видеть неизмененный PSD, а «Оптимизированный» позволяет видеть, как будет выглядеть изображение после сохранения с текущими настройками.
2 варианта и 4 варианта
Эти две вкладки значительно упрощают сохранение изображений для Интернета, позволяя экспериментировать с различными параметрами без потери настроек. Оба они работают одинаково и различаются только количеством вариантов, с которыми вы можете поэкспериментировать.
Каждый предварительный просмотр показывает тип файла, размер, качество и приблизительное время загрузки изображения с настройками, относящимися к этому выбору. Если вы выберете предварительный просмотр, щелкнув по нему, вы можете изменить его настройки справа, используя все методы, описанные выше.Затем вы можете выбрать другой предварительный просмотр и изменить его настройки для быстрого визуального сравнения. Вы можете сравнивать файлы разных типов (JPG, PNG, GIF и т. Д.) Или в пределах одного типа файлов и ограничивать вариации настройками качества. Если вы делаете последнее, Photoshop может автоматизировать задачу, автоматически заполняя каждое окно разными настройками, чтобы вы могли видеть, в каком направлении вы хотите двигаться.
Сначала выберите тип файла, который, по вашему мнению, вам понадобится, например: JPG. Затем следуйте рисунку выше, чтобы найти раскрывающийся список в правом верхнем углу окна «Сохранить для Интернета».Нажмите на это и перейдите к «Заново заполнить просмотры». Это автоматически заполнит каждое представление JPG, содержащим различные настройки качества. Просто найдите тот, у которого наиболее приемлемая четкость изображения и размер файла, и изменяйте настройки до тех пор, пока вы не будете удовлетворены. Этот метод позволяет новичкам разобраться в настройках, не тратя много времени на их изучение по одному.
Работа с ломтиками
Веб-дизайнеры, которые обрабатывают большую часть первоначального макета в Photoshop, обычно работают одним из двух способов.Они либо вытаскивают изображения из макета и обрезают / сохраняют их по отдельности, либо используют встроенные в Photoshop инструменты нарезки, чтобы выбирать и сохранять различные части изображения.
Если вы дизайнер, часто использующий срезы, в диалоговом окне «Сохранить для Интернета» есть множество параметров, позволяющих ускорить рабочий процесс. Используя инструмент Slice Select Tool (C), расположенный в верхнем левом углу, вы можете выбрать отдельные фрагменты для работы (удерживайте Shift, чтобы выбрать несколько фрагментов). Используя этот метод, вы можете изменить настройки каждого среза.Это означает, что если вы хотите, чтобы изображение заголовка было в формате GIF, а нижний колонтитул — в формате JPG, это так же просто, как выбрать каждый фрагмент и назначить тип файла. После того, как вы закончите, нажмите кнопку «Сохранить», чтобы открыть диалоговое окно сохранения. Здесь вы можете решить, хотите ли вы сохранить все фрагменты изображения как отдельные файлы или только те, которые вы выбрали. Экспорт всех фрагментов за один раз позволяет вам собрать все необходимые изображения из макета PSD за один шаг. Это может сэкономить вам массу времени, если вы работаете со сложным дизайном сайта.
Вывод HTML
Последняя функция, которую мы обсудим, — это использование диалогового окна «Сохранить для Интернета» в сочетании с фрагментами для вывода реального файла HTML. Для начала нарежьте ваш PSD на части и откройте диалоговое окно «Сохранить для Интернета». После того, как вы получите нужные настройки для каждого фрагмента, вернитесь к раскрывающемуся списку в правом верхнем углу окна и нажмите «Изменить параметры вывода».
При этом должно появиться окно, в котором вы сможете настроить параметры HTML, фрагментов, фона и сохранения файлов.Используя эти параметры, вы можете настроить, хотите ли вы выводить XHMTL, какой цвет вы хотите, чтобы ваш фон был, какое соглашение об именах вы хотите использовать и т. Д. Большинство этих параметров довольно просты и не требуют дополнительных объяснений, но я рекомендую хотя вы выбираете «Создать CSS» вместо «Создать таблицу» в меню «Срезы». Если вы на самом деле не пытаетесь создать таблицу, современные веб-стандарты не рекомендуют использовать таблицы для создания макета веб-страницы.
Наконец, чтобы экспортировать нарезанный PSD документ в формате HTML, нажмите «Сохранить» и выберите вариант экспорта «HTML и изображения.«Не рассчитывайте использовать этот метод для создания целого веб-сайта в Photoshop. Он просто предназначен для облегчения процесса экспорта изображений и их разметки в HTML. Если вы все равно делаете большую часть макета в Photoshop, использование опции экспорта HTML может сэкономить вам много времени при настройке исходного файла HTML. Обратной стороной является то, что нужно будет многое сделать, чтобы организовать код в соответствии с вашими предпочтениями. Следовательно, большинство опытных программистов предпочтут полностью пропустить этот метод и написать код с нуля, но я рекомендую вам поэкспериментировать с ним, чтобы увидеть, можете ли вы каким-либо образом улучшить свой рабочий процесс.
Заключение
Приведенной выше информации более чем достаточно, чтобы начать ваш путь к тому, чтобы стать гуру сохранения для Интернета. Надеюсь, вы кое-что узнали о диалоговом окне Photoshop «Сохранить для Интернета и устройств», которого не знали. Используйте раздел комментариев ниже, чтобы сообщить нам, что вы думаете об этой статье. Кроме того, на самом деле в диалоговом окне есть еще много чего, что мы не рассмотрели, поэтому не стесняйтесь указывать на любые функции, которые вы регулярно используете, но не упомянутые выше. Дизайнерам полезно знать эти навыки, потому что их можно использовать на веб-сайтах в любой отрасли, от риэлторов до местных ресторанов!
Связанное содержимое
AUR (ru) — gimp-plugin-saveforweb
Компиляция с помощью gimp работает без проблем, возможно, проблема в gimp-git.
С другой стороны, попробуйте установить https://aur.archlinux.org/packages/gimp-plugin-registry, это не создает проблем, и у вас есть пакет плагинов, включая тот, который также служит для сохранения в Интернете.
Может ли кто-нибудь скомпилировать это против gimp-git / 2.99.
Я получаю следующую ошибку при попытке makepkg -s
проверка pkg-config версии не ниже 0.9.0 ... да
проверка GIMP... №
configure: ошибка: требования пакета (gimp-2.0> = 2.3.0 gimpui-2.0> = 2.3.0) не выполнены:
Пакет 'gimp-2.0', необходимый для 'virtual: world', не найден
Пакет 'gimpui-2.0', необходимый для 'virtual: world', не найден
Рассмотрите возможность настройки переменной среды PKG_CONFIG_PATH, если вы
установленный софт в нестандартной приставке.
В качестве альтернативы вы можете установить переменные среды GIMP_CFLAGS
и GIMP_LIBS, чтобы избежать необходимости вызывать pkg-config.
Дополнительные сведения см. На странице руководства pkg-config.
Я спас копию, которая у меня была для диска, файла gimp-save-for-web-0.29.3.tar.bz2, и я просмотрел PKGBUILD. Проверьте, работает ли он, в противном случае, если у вас возникнут проблемы с текущей версией gimp, я откажусь от его обслуживания.
Тогда вы можете установить его из браузера плагина GIMP. К сожалению, версия, указанная в браузере, — 0,25, тогда как это было 0.29. На странице плагина gimp указана совместимость до gimp 2.7, но теперь мы находимся на версии 2.10 … так это может быть несовместимо? В любом случае, вы все еще можете получить 0.29 с github
Поскольку в gimp есть встроенный браузер плагинов, а registry.gimp.org больше не работает, я думаю, что этот пакет сейчас не имеет смысла.
ошибка установки этого пакета с сообщением:
Предупреждение: временная проблема: ошибка HTTP. Повторите попытку через 3 секунды. 3 попытки
Не удается загрузить gimp-save-for-web-0.29.3.tar.bz2
Кажется, работает правильно с 01.02.2015 на GIMP 2.8.14
Пакет работает так, как должен. Даже с GIMP 2.8.6. Спасибо ребята.
Я принял этот пакет, надеюсь, долгое время.
Обновлено и исправлено.
Спасибо за ваш вклад.
Я принял этот пакет, надеюсь, долгое время.
Обновлено и исправлено.
Marcel_K, и я исправил PKGBUILD прямо сейчас, благодаря вашему вкладу.
Более того, $ srcdir и $ pkgdir должны быть заключены в кавычки, чтобы разрешить пробелы в именах каталогов и || return 1 больше не нужен.
6 способов сохранения изображений WebP как JPG и PNG
Проприетарный формат изображений Google WEBP на лучше, чем стандартный формат JPG или PNG. Он создает гораздо меньший размер файла, чем JPG, и все же поддерживает функцию прозрачности PNG без большой потери качества.Сегодня он используется многими веб-сайтами, включая YouTube, Google Play Store и приложение Facebook для Android.
Каким бы идеальным он ни был, он все еще не поддерживается многими редакторами изображений и онлайн-формами . Мне лично приходится часто иметь дело с изображениями WEBP в своей работе, и поэтому я нашел много способов сохранить изображения WEBP в JPG или PNG , каждый из которых имеет свои преимущества. В этом посте я поделюсь с вами своими выводами.
Читайте также: Полное руководство по использованию формата изображений WebP
№1.Изменить URL изображения
Это, вероятно, лучший ручной способ сохранить изображения WEBP в формате PNG или JPG. изображений WEBP, сохраненных в Интернете. доступны в форматах WEBP и JPG / PNG, поскольку некоторые браузеры, такие как Firefox и Safari, не поддерживают WEBP . Поэтому в этих браузерах вместо этого загружается изображение JPG или PNG. С помощью простой настройки URL-адреса вы можете загружать формат JPG или PNG вместо WEBP. Вот как:
- Щелкните правой кнопкой мыши изображение WEBP и выберите Копировать адрес изображения в меню
- Теперь вставьте этот адрес в новую вкладку и удалите последние 3 символа из URL.Поэтому удалите
-rwв конце URL-адреса. Когда вы нажмете «Ввод», изображение загрузится в формате JPG / PNG. - Затем щелкните изображение правой кнопкой мыши и выберите Сохранить изображение как , чтобы сохранить изображение.
№ 2. Используйте расширение Chrome
для сохранения изображения в формате PNG.В Google Chrome вы можете использовать удобное расширение под названием «Сохранить изображение как PNG», которое добавляет параметр в контекстное меню для загрузки изображений WEBP как PNG .
Примечание. Пользователи Opera также могут использовать это расширение, установив Download Chrome Extension.Это расширение позволит вам установить большинства расширений Chrome в Opera , включая «Сохранить изображение как PNG».
- Установите расширение «Сохранить изображение как PNG» из Google Play Store.
- Щелкните правой кнопкой мыши изображение WEBP и выберите новую опцию Сохранить изображение как PNG. Вот и все, теперь вы можете сохранять изображение в формате PNG.
К сожалению, это расширение позволяет сохранять только изображения в формате PNG . Если вы хотите сохранить в формате JPG, вам нужно преобразовать формат PNG в формат JPG с помощью конвертера изображений или использовать другой метод из этого списка.
№ 3. Используйте неподдерживаемый браузер
В настоящее время формат WEBP поддерживается только Google Chrome и Opera . И, как я уже сказал, на веб-сайтах для изображения загружаются форматы WEBP и JPG / PNG, чтобы все браузеры могли его открыть. Вы можете просто использовать неподдерживаемый браузер для загрузки изображения , и оно будет загружено в формате JPG или PNG.
Вы можете использовать любой браузер, который вам нравится, включая Firefox, Safari, Internet Explorer и Microsoft Edge.Сохраните изображение, как обычно, и вы увидите, что оно будет в формате JPG или PNG.
№ 4. Пользовательский агент Spoof
Следуя описанному выше методу, не обязательно переключать браузеры для загрузки изображений WEBP в формате JPG / PNG. Вы можете просто подделать пользовательского агента вашего браузера Chrome или Opera , чтобы веб-сайт подумал, что вы просматриваете из неподдерживаемого браузера, и загрузил изображение JPG или PNG вместо WEBP.
Для этой цели я рекомендую вам использовать расширение User-Agent Switcher для Chrome, так как это быстро и просто.
- Установите расширение и щелкните его значок в адресной строке.
- Вы увидите список поддерживаемых пользовательских агентов. Выберите любой неподдерживаемый браузер, например Safari или Firefox.
- Теперь обновит страницу с изображением WEBP , и оно загрузится в формате JPG / PNG. Затем вы можете загрузить его, используя стандартную опцию Сохранить изображение как .
№ 5. Используйте онлайн-конвертер изображений
Если у вас уже есть изображения WEBP на вашем компьютере, вы также можете конвертировать их в формат JPG или PNG.Это также будет полезно, если вы, , не хотите выполнять дополнительные шаги в описанных выше методах , а вместо этого загружаете все изображения WEBP и затем массово конвертируете.
Для быстрого преобразования без какого-либо дополнительного программного обеспечения хорошим вариантом будет онлайн-конвертер . Для этого Zamzar — это надежный конвертер изображений, который поддерживает преобразование WEBP и является бесплатным. Однако вы можете конвертировать только 10 изображений одновременно.
- На веб-сайте Zamzar нажмите Выбрать файлы в Шаг 1 и выберите до 10 изображений WEBP.
- Выберите JPG или PNG из раскрывающегося меню.
- Теперь укажите свой адрес электронной почты и нажмите Преобразовать , чтобы завершить процесс.
Изображения будут загружены, и преобразованные изображения будут отправлены вам по электронной почте . Вы можете повторить процесс, чтобы преобразовать столько изображений, сколько захотите. Если Замзар вас не интересует, то вы также можете использовать cloudconvert. Это предлагает быструю конверсию на сайте , но она ограничена только 25 конверсиями в день бесплатно (для зарегистрированных пользователей).
№ 6. Используйте конвертер изображений рабочего стола
Если онлайн-конвертация не для вас, тогда приложение-конвертер изображений для настольных ПК будет отличным решением. . Хотя их много, но мне лично нравится XnConverter, так как он полностью бесплатен и имеет множество функций.
XnConverter доступен для Windows, Mac OS X и Linux и позволяет конвертировать неограниченное количество изображений массово . Давайте посмотрим, как вы можете использовать его для преобразования изображений WEBP в JPG или PNG:
- Загрузите и установите XnConverter и запустите его.
- На вкладке Вход щелкните Добавить файлы и выберите столько изображений, сколько хотите.
- Перейдите на вкладку Output , и вы увидите множество вариантов для настройки. Хотя вы можете настроить его по своему усмотрению, но простого выбора желаемого формата вывода (JPG / PNG) также должно быть достаточно. Вы также можете нажать на Настройки под форматом, чтобы дополнительно настроить качество вывода.
- Теперь нажмите Конвертировать , и все изображения будут преобразованы и сохранены в указанном месте.
Резюме
Все вышеперечисленные методы помогут без проблем сохранять изображения WEBP в формате JPG или PNG. Для быстрой загрузки я предпочитаю использовать расширение Save Image As PNG Chrome в моем браузере Opera . Хотя много раз я получаю файлы WEBP в виде вложений по электронной почте, и XnConverter отлично справляется, быстро конвертирует их в JPG.
Что нового в AutoCAD 2019? Сохранить в Интернете и на мобильных устройствах | Блог AutoCAD
Добро пожаловать в нашу серию «Что нового в AutoCAD 2019».В этой статье мы исследуем новую функцию «Сохранить в Интернете и на мобильных устройствах», которая поможет вам работать на всех платформах AutoCAD, включая наши настольные, веб-и мобильные приложения.
AutoCAD Anywhere
Во-первых, давайте поговорим о наших платформах. Подписавшись на AutoCAD 2019, вы получите доступ к новым веб-приложениям и мобильным приложениям AutoCAD. Эти приложения обеспечивают быстрый и беспрепятственный доступ к файлам DWG, где бы вы ни находились, практически с любого устройства, и вы можете создавать, редактировать, измерять и комментировать с помощью основных инструментов и технологий оригинального AutoCAD.
Сохранить в Интернете и на мобильном устройстве
Чтобы максимально использовать возможности AutoCAD в Интернете и на мобильных устройствах, AutoCAD 2019 включает новые возможности «Сохранить в Интернете и на мобильных устройствах» и «Открыть из Интернета и мобильных устройств». Вместе эти команды позволяют перемещать файлы между настольными, веб-и мобильными приложениями, так что вы действительно можете работать где угодно. Например, вы можете взять чертеж, над которым вы работали в своем офисе, просмотреть и отредактировать его в поле в веб-приложениях AutoCAD и мобильных приложениях и сохранить его обратно на локальный сетевой диск, чтобы продолжить работу в своем офисе.
Чтобы сохранить чертеж с настольного компьютера в веб-приложениях AutoCAD и мобильных приложениях, вы можете выбрать «Сохранить в Интернете и на мобильных устройствах» из команды «Сохранить как» в меню приложения.
И наоборот, выбор «Открыть из Интернета и мобильного устройства» в пункте «Открыть» в меню приложения позволяет получить доступ к последним чертежам, созданным или отредактированным в веб-приложении или мобильном приложении AutoCAD. Когда вы открываете файл с этой опцией, этот рисунок сохраняется в облаке, а , а не на вашем локальном компьютере. Но не волнуйтесь! Чтобы перенести рисунок в локальное хранилище, все, что вам нужно сделать, это выбрать «Сохранить как» и создать новую версию (или просто заменить старую версию в локальной сети).