С ужесточением требований к скорости загрузки вебдокумента и космическим ростом мобильного трафика оптимизация картинок стала вещью архиважной. Каждый файл на сайте должен открываться максимально быстро, чтобы посетитель не ждал минутами, пока загрузится текст статьи со всеми наглядностями.
Для тех, кто хочет сократить время загрузки и для тех, кто еще не знает, как нужно оптимизировать картинки - шпаргалка с пояснениями и алгоритмом действий. Используем программы и сервисы - уменьшаем размер и вес.
Где брать фото для сайта
Иллюстрировать статьи приходится поневоле, так как простынки голого текста нынче мало кто читает. Народ сканирует глазами страницу и задерживается там, где есть фото, таблицы или выделенные фрагменты.
Идеально, если у вас собственные фотографии или рисунки. Но такими талантами обладают единицы, а картинки на сайт нужны всем. Потому мы, чаще всего, идем искать тематические иллюстрации для статьи в интернете.
Кто-то берет их на бесплатных фотостоках, кто-то с Яндекса, кто-то пользуется релевантным поиском от Гугла, кто-то тащит их с буржа. Тут каждый будет решать сам, но общие рекомендации все же есть.
Не стоит брать изображения с чужими водяными знаками и размещать свой ватермарк на тех, что вы позаимствовали. Это чревато неприятностями от правообладателей. Особенно, если это крутой ресурс, который может и в суд подать, и этот суд выиграть. Примеры уже имеются.
Повторимся, что идеальный вариант - собственные фото. В особенности, если это касается мастер-классов или сопроводительных фото какого-либо процесса. Благо, в каждом телефоне имеется камера, которой можно делать снимки очень неплохого качества.
Вопрос, где брать картинки для сайта, на этом закрываем. Каждый вебмастер решит для себя сам, что ему подходит: покупать фото, брать на бесплатных фотостоках, фотографировать самостоятельно или заимствовать.
Какой размер лучше
Размер изображений на сайте зависит от шаблона (темы), который в данный момент установлен. В любом случае ваша картинка не должна быть шире области контента. Это сломает дизайн страницы.
[dfn title="Область контента"]место на странице, которое предусмотрено версткой шаблона для тела статьи.[/dfn]
Как определить ширину контента на своем сайте? Определить максимальный размер изображения можно, воспользовавшись расширением Линейка в браузере Хром https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn/related?hl=ru
Достаточно инструментом «Захват прямоугольной области» выделить часть страницы, где располагается текст, и вы увидите, сколько пикселей по ширине составляет в вашем шаблоне область контента.
Это максимальная ширина картинок. Меньше ширину нужно делать по нескольким причинам:
- Большое изображение трудно оптимизировать без потери качества.
- На мобильных экранах четче всего отображаются картинки размером 500-600 пикселей по ширине.
Если вам не требуется обращать внимание посетителя на мелкие детали, то этого размера вполне достаточно для наглядности.
Если же нужно выложить изображение большого разрешения (схемы, например), то лучше всего воспользоваться плагинами, которые раскроют его в полный размер из миниатюры.
Второй предпочтительнее, так как не требует настроек и отлично адаптируется к мобильным экранам.
Как сделать картинку нужного размера
Существует великое множество онлайн сервисов и графических программ, в которых можно изменить размер исходного изображения.
Я предлагаю пользоваться Фотошопом, который вы можете забрать по моей ссылке и установить себе на комп, если у вас его еще нет. Дело в том, что после него фото сохраняются в наилучшем качестве при разумном уменьшении веса.
Алгоритм уменьшение размера картинки в Фотошоп:
Сохранять желательно в выбранную папку (чтобы не искать по всему компу уменьшенную картинку) и под другим названием (лучше всего использовать цифры или латиницу).
Так вы не потеряете исходник и получите то же изображение, но в нужном размере для размещения на сайте. Но и это еще не все.
Оптимизация картинки онлайн сервисом
На этапе уменьшения фото с помощью фотошоп оптимизация картинки не заканчивается. Мы можем еще облегчить ее вес. Существуют множество сервисов, но я пользуюсь https://tinypng.com/ и он меня вполне устраивает.
- Отлично обрабатывает форматы JPEG и PNG, сохраняя хорошее качество.
- Убирает все сторонние коды, очищает оптимизированную картинку от мусора.
- Сохраняет те же названия, под которыми я загружала их в сервис (не нужно переименовывать, убирая лишние знаки, присвоенные сервисом).
Алгоритм действий:
- После обработки сервисом ваши картинки (или только одна) скачаются архивом в указанную вами папку на комп под названием tinified.
- Архив нужно распаковать и забирать для загрузки на сайт картинки из полученной папки. Именно в ней лежат оптимизированные изображения, подготовленные для публикации.
Не забывайте после окончания работы чистить ненужные уже файлы, иначе у вас скопится невероятное количество архивов и папок tinified с цифрами.
Заключение
Первоначально мы имели фотографию соснового леса с фотоаппарата большого размера и веса. После уменьшения размера по ширине в Фотошоп, мы получили изображение весом в 134 кб. Это тоже много для публикации и займет лишние секунды загрузки страницы.
После оптимизации в онлайн сервисе мы уменьшили фото больше чем на 40 кб и получили в итоге картинку 99 кб. Это уже приемлемо, но все же многовато.
Я показала пример обработки и оптимизации фотографии, которая изначально было отличного качества и потому весила много. Но у меня не сайт фотографа, мне не нужны фото сверхвысокого разрешения. Поэтому исходники я беру легче и меньше. После всех манипуляций обычно добиваюсь веса 40-50 кб, если они служат токмо для наглядности.
Со схемами и пояснительными сканами приходится пользоваться крупными картинками, которые вкладываю в статью миниатюрой. При клике посетитель увидит изображение таким, каким я загрузила его на сервер через редактор админки.
Заостряю внимание. Если ваши оптимизированные картинки будут опубликованы с весом, не превышающим 40 кб, сайт от этого только выиграет. Страница быстро загрузится, пользователь не уйдет с нее, утомившись ждать. Меньше будут процент отказов, а значит и позиции сайта в целом будут выше. Поисковики охотнее будут предлагать по запросам именно ваш сайт и вы получите больше посетителей.[/info]
Оптимизация картинок на сайт - момент ровно такой же важности, как и оформление статьи и сама статья, которая должна полностью раскрыть тему.