2

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

Есть у вас проблемы с медленной загрузкой сайта? Довольно часто блогеры не задумываются над тем как правильно сохранять фотографии в Фотошоп для Web. А, между прочим, картинки и плагины делят первое место, как первопричина заторможенности в работе сайта. Сегодня своими секретами оптимизации фото поделится Лисицына Юлия, автор сайта «Фотошоп для блогера».

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

Почему важна скорость работы сайта?

Чем плоха медленная работа блога или сайта? Прежде всего влиянием на поведенческий фактор посетителей. По статистике, лишняя секунда ожидания на 7% снижает конверсию на сайте, на 11% уменьшает просмотры страниц и на 16% снижает желание клиентов ещё раз заглянуть к вам в гости.

Большое фото может увеличить время загрузки вашего ресурса на 5%. Как же можно решить проблему не потеряв в качестве визуального контента.

Что вы должны знать об оптимизации изображений

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

Напоминаю, оптимальный размер фотографии для публикации на сайте — не более 100 Кб. Для миниатюры сайта — не более 50 Кб.

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

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

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

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

Данный протокол подойдет для всех версий Фотошоп ( от CS4 — точно).

Шаг 1 Открываем фото

На самом деле это шажочек. Открываем нашу картинку в Фотошоп. Меню «Файл» (File), подраздел «Открыть» (Open), и выбираем откуда открыть наше фото.

Оптимизация фото

Шаг 2 Уменьшаем фото

Далее, уменьшим размер фото до необходимого для корректной публикации на вашем сайте. Для сайта Блоги Мам — это 500 pix

Заходим в меню «Изображение» (Image) и выбираем подраздел «Размер изображения» (Image size). В открывшемся окошечке, вводим необходимый нам размер по ширине. По автоматическим настройкам, высота фото уменьшится пропорционально.

Как уменьшить фото в Фотошоп

Шаг 3 Возвращаем резкость

В результате уменьшения, фото станет немного размытым. Это убирается в один клик.

Меню «Фильтры» (Filtres), подменю «Усиление резкости» (Sharpen) — «Контурная резкость» (Unsharp Mask). И вводим значения как на фото, они оптимальны.

Как улучшить резкость

Вы зрительно увидите, что фотографии вернулась потерянная резкость.

Шаг 4 Сохранение фотографии в Фотошоп

Заходим в меню «Файл» (File), подраздел «Сохранить для Web» (Save for Web). В открывшемся для вас окне обращаем внимание на выделенные мною фрагменты.

Сохранить фото в фотошоп

Под цифрой 1, ещё раз акцентирую внимание на выборе формата вашего фото: GPEG или PNG.

Сохранить фото в фотошоп

Под цифрой 2, выбор качества изображения и, соответственно, его размера.

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

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

Остаётся нажать кнопку «Сохранить» и опубликовать фотографию на вашем сайте. Хочу отметить, что использованное мною фото изначально «весило» 51Мб и имело размер 5000 pix по ширине. Конечное фото — 99 Кб и 500 pix по ширине.

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

Автор текста Лисицына Юлия.

Источник фото: Unsplash.com

Получайте свежие статьи на почту, как более 5000 читателей "Блоги Мам", и будьте в курсе всего самого интересного и полезного!

Ваш e-mail:

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

2 комментария

сначала новые
по рейтингу сначала новые по хронологии

Есть способ попроще. Это инструмент, который предлагает гугл для вебмастеров -
https://developers.google.com/speed/pagespeed/insights/ На этой странице вводите адрес страницы, на которой нужно оптимизировать изображения и жмете - анализировать. Гугл выдает отчет с кучей советов по оптимизации указанной страницы а внизу будет надпись - "Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы". Жмем и скачиваем архив, в котором лежат все оптимизированные фото (и не только) с этой страницы )))

Юлия!Спасибо большое за полезную статью! Очень актуально!!!

Мы знаем всё о Блогах Мам, расскажем все секреты вам :)

Получайте самое интересное и полезное на почту, как более 5000 читателей "Блоги Мам"!

Готово!