Как сохранить картинку (изображение, фотографию) в фотошопе? Как сохранить фотошоп как картинку


Как сохранить картинку (изображение, фотографию) в фотошопе?

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

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

Итак, чтобы сохранить картинку в фотошопе используются две команды меню:

Файл — Сохранить (Ctrl+S)

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

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

Файл — Сохранить как… (Shift+Ctrl+S)

Данная команда является основной и наделена множеством «сложностей».

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

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

Но это еще не все. Фотошоп покажет еще одно окно — Параметры. Содержимое данного окна будет напрямую зависеть от выбранного вами формата файла.

Например, если вы желаете сохранить в JPG, то оно выглядит так:

Самое главное, что тут можно настроить, так это качество изображения. В поле с цифрами можно внести значение качества от 1 до 10, либо выбрать его текстовое обозначение в выпадающем списке, либо двигая ползунок. Итоговый размер файла отображается в правой половине окна.

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

Также вам предлагается три разновидности формата:

  • Базовый («стандартный») — это отображение изображений на экране построчно. То есть самый обыкновенный способ отображения содержимого JPG-файла.
  • Базовый оптимизированный — это изображение с оптимизированной кодировкой Huffman.
  • Прогрессивный — это формат, обеспечивающий показ с постепенным улучшением качества изображений по мере их загрузки. 

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

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

Третий способ сохранения в фотошопе

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

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

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter. Спасибо!

psand.ru

Как сохранить фото в фотошопе

Здравствуйте уважаемый посетитель сайта! Программа Adobe Photoshop по умолчанию сохраняет формат изображения в своем формате PSD. Существует большой выбор сохранения графического изображения с одного формата в другой формат графического изображения. Наиболее распространенный формат графического изображения – JPEG.

Для того чтобы сохранить формат изображения нужно выполнить следующие действие в строке меню Adobe Photoshop, выберете вкладку «файл». В раскрывшемся списке Adobe Photoshop, выберите вкладку «сохранить как» или нажмите комбинацию клавиш SHIFT + CTRL + S.

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

После перечисленных выше действий появится окошко фотошоп - "параметры JPEG" В разделе "параметры изображения" задается качества и сжатия графического изображения. В разделе "разновидность формата" задается формат сжатия. После настройке всех параметров нажмите кнопку OK.

На этом у меня все, всем пока, удачи! До новых встреч на сайте computerhom.ru.

Другие инструкции

Понравилось – ставим лайк, делимся с друзьями, подписываемся на сайт.

Твитнуть

Поделиться

Плюсануть

Поделиться

Отправить

Класснуть

Линкануть

Вотсапнуть

Запинить

Также, вы можете посмотреть другие инструкции, связанные с данной темой:

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

www.computerhom.ru

Как сохранить фото в Фотошопе

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

Сегодня поговорим о том, как сохранять готовые работы в Фотошопе.

Первое, с чем необходимо определиться, прежде чем начать процедуру сохранения, это формат.

Распространенных форматов всего три. Это JPEG, PNG и GIF.

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

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

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

Дальше идет формат PNG. Этот формат позволяет сохранить картинку без фона в Фотошопе. Изображение может также содержать полупрозрачный фон или объекты. Другие форматы прозрачность не поддерживают.

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

Последний на сегодня представитель форматов – GIF. В плане качества это самый худший формат, так как имеет ограничение по количеству цветов.

Вместе с тем, GIF позволяет сохранить анимацию в Фотошопе CS6 в один файл, то есть один файл будет содержать все записанные кадры анимации. Например, при сохранении анимации в PNG, каждый кадр пишется в отдельный файл.

Давайте немного попрактикуемся.

Для вызова функции сохранения необходимо перейти в меню «Файл» и найти пункт «Сохранить как», либо воспользоваться горячими клавишами CTRL+SHIFT+S.

Далее, в открывшемся окне, выбираем место для сохранения, имя и формат файла.

Это универсальная процедура для всех форматов, кроме GIF.

Сохранение в JPEG

После нажатия кнопки «Сохранить» появляется окно настроек формата.

Подложка

Ка мы уже знаем, формат JPEG не поддерживает прозрачность, поэтому при сохранении объектов на прозрачном фоне, Фотошоп предлагает заменить прозрачность на какой-нибудь цвет. По умолчанию это белый.

Параметры изображения

Здесь выставляется качество картинки.

Разновидность формата

Базовый (стандартный) выводит изображение на экран построчно, то есть обычным способом.

Базовый оптимизированный использует для сжатия алгоритм Хаффмана (Huffman). Что это такое, объяснять не буду, поищите сами в сети, это к уроку не относится. Скажу только, что в нашем случае это позволит немного уменьшить размер файла, что на сегодняшний день не сосем актуально.

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

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

Сохранение в PNG

При сохранении в этот формат также выводится окно с настройками.

Сжатие

Эта настройка позволяет значительно сжать итоговый PNG файл без потери качества. На скриншоте настроено сжатие.

На картинках ниже Вы можете увидеть степень компрессии. Первый скрин со сжатым изображением, второй – с несжатым.

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

Чересстрочно

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

Я пользуюсь настройками, как на первом скриншоте.

Сохранение в GIF

Для сохранения файла (анимации) в формате GIF необходимо в меню «Файл» выбрать пункт «Сохранить для Web».

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

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

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

Помогла ли вам эта статья?

Да Нет

lumpics.ru

Как сохранить в "Фотошопе" файл: советы и рекомендации

Adobe Photoshop - популярный многофункциональный графический редактор. С ним сталкиваются многие пользователи, особенно при обработке фотографий и картинок. Как сохранить в "Фотошопе" документ? Это одна из основных функций графического редактора. Далее будут рассмотрены все возможные методы сохранения картинок. Предложенные вниманию советы значительно облегчат процесс работы с "Фотошопом". Они легко осваиваются и применяются на практике.

Обычное сохранение

Как сохранить фото в "Фотошопе"? Первая опция, имеющаяся в графическом редакторе, - это команда "Сохранить". Обычно она используется при обработке открытого заранее документа. В ходе выполнения команды ранее имеющийся объект будет заменен отредактированным изображением.

Как сохранить в "Фотошопе" картинку с заменой первично открытого файла? Нужно:

  1. Открыть фото и отредактировать его на свое усмотрение.
  2. Нажать на кнопку "Файл". Она располагается на панели инструментов в верхней части экрана.
  3. Щелкнуть по кнопке "Сохранить...".

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

Как сохранить картинку в "Фотошопе" посредством опции "Сохранить"? Можно нажать на клавиатуре Ctrl + S. Сочетание горячих клавиш поможет воспользоваться командой.

Опция "Сохранить как..."

Второй способ сохранения графических файлов - это использование команды "Сохранить как...". Данный прием схож с ранее изученным алгоритмом действий. Он отличается разнообразием параметров сохранения. Метод прекрасно подходит для дублирования картинок.

Как сохранить в "Фотошопе" документ при помощи настройки "Сохранить как..."? Потребуется:

  1. Нажать на "Файл" после редактирования документа.
  2. Выбрать в появившемся меню команду "Сохранить как...".
  3. Указать имя сохраняемого документа.
  4. Выбрать формат сохранения. Он находится в строке "Тип файла".
  5. Осуществить указание места сохранения графического документа.
  6. Кликнуть по "Сохранить".
  7. Указать параметры фотографии. Обычно здесь выбирают качество изображения и разновидность формата. Можно указать стандартную или улучшенную оптимизацию или же с постепенным улучшением качества картинки по мере ее загрузки.
  8. Щелкнуть по кнопке "Ок".

Дело сделано. Мы изучили еще один способ сохранения документов через "Фотошоп". Для быстрой активации опции можно нажать Ctrl + Shift + S.

С закрытием файла

Как сохранить в "Фотошопе", а затем закрыть соответствующее изображение? Для этого ранее предложенные советы не подойдут. Они оставляют записанную на жесткий диск фотографию открытой.

Интересно, как сохранить фото в "Фотошопе", одновременно закрыв то или иное изображение? Для этого необходимо:

  1. Перейти во вкладку с выбранной картинкой.
  2. Навести курсор на правый верхний угол вкладки с соответствующим документом.
  3. Кликнуть по крестику левой кнопкой мыши.
  4. Согласиться с сохранением документа, нажав на "Да".

Важно: если щелкнуть по "Нет", Photoshop будет закрыт без сохранения изменений в документе. "Отмена" вернет юзера в редактор без каких-либо изменений.

Для Web-ресурсов

Часто "Фотошоп" используется при создании графики для Web-сайтов. Останется только правильно осуществить сохранение документа. Что для этого нужно?

Как сохранить в "Фотошопе" файл для Web? Чтобы это сделать, потребуется:

  1. Выбрать "Файл" - "Сохранить для Web...".
  2. Указать графический набор и формат сохранения.
  3. Выставить параметры фона.
  4. Указать качество снимка и его размер.
  5. Щелкнуть по кнопке "Готово".

Быстрый доступ к опции осуществляется при помощи сочетания клавиш Alt + Shift + Ctrl + S.

Сохранение фона и картинки без него

А как сохранить фон в "Фотошопе"? Это довольно простая задача. Дело все в том, что пользователь может в качестве фона использовать любое изображение. Останется только выставить его в качестве упомянутого элемента картинки.

Создание фона в "Фотошопе" осуществляется так:

  1. Открыть или создать графический документ.
  2. Нажать на кнопку "Добавить новый слой".
  3. Скопировать изображение, используемое в качестве фона.
  4. Вставить картинку на созданный новый слой.

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

Как сохранить в "Фотошопе" картинку без заднего фона? Для этого потребуется создать документ в формате .gif или .tiff. Предпочтительнее работать с первым вариантом. Для этого придется активировать опцию "Сохранить для Web...", а затем в параметрах сохранения поставить отметку около "Прозрачно".

fb.ru

без фона и потери качества

Здравствуйте, уважаемые читатели блога Start-Luck! На связи Андрей Зенков и мои практические советы по веб-дизайну. Сегодня мы поговорим о тех самых ключиках, без которых ваш сайт никогда не откроет дверь в мир браузерных закладок (а ведь для пользователя так важно помечать «звёздочкой» полюбившиеся страницы).

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

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

С воодушевлением вы подгоняете все изображения под нужный размер, сохраняете и… видите, что усилия напрасны. Пиксели напрочь убивают кропотливо созданные «лапки», а на картинки в движении нельзя взглянуть без слёз. Фотошоп автоматически перемещается в список программ на удаление, а вы даёте себе обещание найти настоящего умельца. Зачем? Всё можно сделать самостоятельно, узнав главный секрет, которым я всегда пользуюсь.

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

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

Основные группы изображений в веб-дизайне

Графический контент сайтов условно делится на три категории.

Коллажи и фотографии

Для них характерен формат JPG — к слову, самый встречающийся на веб-просторах. Эти изображения отличаются небольшим размером, что позволяет использовать их в оформлении сайта, не опасаясь медленной загрузки страниц. К примеру, один и тот же пейзаж, сохранённый в JPG и PNG, значительно отличается по весу:

Иконки, кнопки и баннеры

Для этих элементов дизайна предпочтителен PNG. Он позволяет вырезать объект и сохранить изображение без фона, используя вместо него в дальнейшем «подложку» сайта. Я бы порекомендовал этот формат и для изображений, которые не могут похвастать огромной палитрой. К примеру, создаём документ в фотошопе и добавляем текст — название сайта:

Сохраняем изображение в двух форматах и сравниваем результат:

Анимация

GIF предназначен для создания анимированных изображений, состоящих из двух и более слоёв. Это можно сделать не только при помощи фотошопа, но и других полезных ресурсов. Я бы назвал этот формат самым капризным, поскольку при сохранении в нём сложно добиться хорошего качества. К счастью, у меня есть лайфхак, благодаря которому вы обзаведетесь анимациями с минимальной пикселизацией. Заинтригованы? Читайте дальше!

Пошаговая инструкция по сохранению изображений

Начнём с JPG: с ним получить фотографию без потери качества очень просто. Для этого нажимаем «Файл» — «Сохранить как». При желании можно воспользоваться комбинацией клавиш Shift+Ctrl+S:

В появившемся окне ищем выпадающий список «Тип файлов» и выбираем строчку JPEG. Обычно она стоит по умолчанию:

Не забываем ввести имя файла и сохранить картинку в выбранную папку.

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

Нажимаем «Файл» — «Сохранить для Web и устройств» или комбинацию горячих клавиш Alt+Shift+Ctrl+S:

Изучите открывшееся окно. Ваша задача — убедиться в том, что в выпадающем списке выбран пункт PNG-24, а напротив строк «Прозрачность» и «Чересстрочно» стоят галочки:

Обратите внимание: последняя галочка сокращает время загрузки изображения на сайте, но вместе с тем увеличивает его вес. Если вас это не беспокоит, жмите «Сохранить». В выпавшем окне выбирайте путь файла и вновь нажимайте заветную кнопку, чтобы получить изображение PNG и как можно скорее выложить его на сайт!

Анимация сохраняется через тот же пункт меню, но только теперь в выпадающем списке нужно выбрать вариант GIF. Огромное количество параметров и непонятных слов может вызвать недоумение или даже испуг. Не стоит! Просто установите параметры, которыми пользуюсь я:

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

Подводим итоги

Работа с графикой требует постоянного совершенствования навыков, не зацикливаясь при этом на одном-двух направлениях. Как быть? В своё время настоящей находкой для меня стал набор из пяти мини-курсов от проекта «Фотошоп-мастер». Из них я почерпнул не один байт полезной информации.

Материал подаётся в доступной форме и бесплатно. Это отличная альтернатива обучению в компьютерных академиях и многочасовому поиску нужных уроков в интернете.

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

С вами был Андрей Зенков. До новых встреч!

start-luck.ru

Как сохранить фотографию, изображение или картинку в Фотошопе?

Здравствуйте, один из самых часто задаваемых вопросов это «Как сохранить картинку в фотошопе?» Этому у нас будет посвящено несколько уроков, поскольку тема достаточно большая и вариантов сохранения очень много! Как сказал кот Матроскин «Для того чтобы продать что-то ненужное, надо купить что-то ненужное», так и у нас для того чтобы что-то сохранить, надо что-то сделать. Сделайте или откройте любое изображение, для того чтобы можно было его сохранить.

Первый способ очень прост. В открытом вами изображении вам стоит нажать на красный крестик в правом верхнем углу окошка, и Фотошоп у вас спросит «Сохранить изменения в документе Adobe Photoshop … перед закрытием?»

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

Итак, вернёмся непосредственно к сохранению, когда вы в окне с вопросом о сохранении ответили «Да» у вас появляется окошко «Сохранит как». В этом окне мы с вами видим, уже известную нам из прошлых уроков, левую панель быстрого запуска, кнопочку «Отмена» и так нами любимый красный крестик. В верхней строке с перевёрнутым треугольником мы с вами можем ввести адрес сохранения, а нажав на крестик выбрать место сохранения визуально. Так же в широком окне по центру мы можем заходить в папки, которые нас интересуют. После того как мы выбрали куда будем сохранять, мы должны выбрать тип файла, который мы сохраняем. Это мы можем сделать в строке «Тип файлов» с перевёрнутым треугольничком, под широким окном. Тут предоставлены такие типы файлов как: «PSD; PDF; PNG» и т.д. При данном типе сохранения мы можем сохранять только файлами Фотошопа, то есть если мы откроем сохранённый нами файл, то у нас откроется Фотошоп со всеми действиями, которые мы совершили над нашим изображением. В окошечке с названием «Имя файла» мы можем вписать интересующие нас слова, как впоследствии будет называться наш файл. Так же справа сверху мы можем, нажав на рисунок, на котором нарисована папочка с красным круглишечком, создать новую папку, там где у нас открыто центральное окошко. Тут у нас ещё есть две кнопочки «Переход к последней просмотренной папке», это такая зёлёная стрелочка назад, и «На один уровень вверх», это попочка с зелёной стрелочкой. Про первое понятно по названию, а вот второе мы сейчас разберём. Если мы нажмём эту кнопку, то мы выйдем из той папки, которая у нас открыта в центральном окошке, и окажемся в той папке, в которой находится нами открытая попка. Ну вот, мы разобрали это окошко, и теперь смело можно нажимать кнопочку, находящуюся слева снизу над кнопочкой отмена.

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

При нажатии на них у нас открывается окошко, точно такое же как мы разбирали выше, но в них уже мы можем выбирать другие типы файлов, как например : «JPG; GIF; PBM и т.д.».

Третий способ проще, чем все вместе взятые, вышеперечисленные. Нам надо нажать следующие комбинации клавиш: «Strl», это самая нижняя из левых и самая левая из нижних клавиша на вашей клавиатуре, и вместе с ней нажимаем клавишу «S» или на русской раскладке «Ы». При нажатии этой комбинации у нас открывается окошко «Сохранить», это можно проверить, если посмотреть, что подписано справа от одиннадцатого пункта в окне «Файл». Есть ещё одна комбинация «Shift» + «Ctrl» + «S», после нажатия данной комбинации у нас открывается окошко «Сохранить как», это так же можно проверить, посмотрев двенадцатый пункт справа в окне «Файл».

Ну вот, мы с вами научились сохранять изображение в Фотошопе! Сегодня мы с вами молодцы и можем себя похвалить!

Обратите также внимание

borpost.ru

Как правильно сохранять изображения в Photoshop?

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

Кому это нужно знать и зачем?

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

О каком времени речь?

Для начала проясним одну вещь:

Используя интернет, вы теряете время — много времени

Загрузка страниц в интернете не моментальная и требует времени, но за долгие годы пребывания в интернете вы привыкли не замечать этого. Допустим, средняя скорость загрузки страницы 3 секунд, где 2 из них приходятся на загрузку изображений. Иллюстрации, элементы интерфейса, фотографии, рекламные баннеры, PDF-презентация или даже картинка с милым котом, в зависимости от размера файла, потребуется время, что бы браузер вывел изображение на экран.

Не обманывайте себя «мегабайтами в секунду»

Скорее всего, ваш интернет-провайдер обещает вам 100 Мбит/с — это гениальный рекламный ход (читайте как: обман) породивший множество заблуждений, в том числе и в теме скорости загрузки сайта. Я замерил скорость соединения с сервером расположенным в Москве, результат:

Скорость соединения с Московским сервером ~53 Мбит/сек — seogadget.ru/internet

А вот скорость загрузки страницы с сайта upages.io значительно ниже:

Скорость загрузки страницы сайта upages. io ~300 Мбит/сек — seogadget.ru/sitespeed

Сколько изображений в день вы просматриваете?

Десятки? Сотни? Я как активный пользователь интернета просматриваю несколько сотен изображен в день, причем большинство из них высокого разрешения. Если уменьшить вес этих изображений и соответственно увеличить скорость загрузки, хотя бы на 1 секунду, умножив на 500 изображений в день, то получим около 8 минут в день и 4 часа в месяц.

4 часа в месяц я ожидаю, когда загрузится картинка

Все, что нужно знать о сохранении изображений

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

Вредной привычкой является установка качества в значение 100, но в сравнении с 80 разнится видимого качества практически равна нулю, а вот разница в весе ощутима.

Неправильный способ сохранения изображения ~360 Кбайт

Для размещения изображения на сайте, передаче по почте, сохранения в облаке, отправке в мессенджере и т. п. — необходимо использовать Save for Web.

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

Правильный способ сохранения изображения ~160 Кбайт

JPEG или PNG?

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

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

Какое качество (Quality) выбрать?

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

Оптимизация (Optimized)

Функция включает дополнительный алгоритм по преобразованию цветов, рекомендуется включать всегда, кроме случаев, когда важны самые мельчайшие детали (например Pixel Art).

Преобразовать в sRGB (Convert to sRGB)

Преобразование цветов изображения к соответствующей таблице sRGB.

sRGB является стандартом для интернета

Разрешение (Image Size)

Самым распространенным разрешением экрана является: 1366×768 — для компьютера и 720×1280 — для смартфона. Имейте это ввиду и не сохраняйте изображения больше, чем 1920 по ширине.

Метаданные (Metadata)

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

Когда вы последний раз смотрели подробную информацию скачанного изображения?

Используя данный метод, мне удалось уменьшить вес изображения в два раза.

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

Спасибо, Владислав.

upages.io