Каждое цифровое изображение имеет свой размер и вес. Но многие фотографии, представленные в таких распространенных источниках, как Яндекс.Картинки или Google.Images имеют размеры более 2000 px по ширине и высоте. Но стандартное разрешение мониторов не превышает этого значения, по этой причине, даже если фотография будет растянута на максималках, пользователю будет неудобно на нее смотреть. Не стоить говорить о том, что фотографии большого расширения имеют большой вес, что отрицательно сказывается на скорости загрузки страницы, а значит и на продвижение сайта.
Форматы изображений для загрузки на сайт
Существует достаточное количество графических форматов для векторных и растровых изображений. Самыми распространенными графическими форматами для картинок на сайте являются:
- JPEG/JPG. Самый распространенный формат для растровых изображений. Сохраняет качество изображений, а также рисунков с градиентыми заливками.
- GIF. Для простых рисунков или черно – белых изображений используется данный формат. Такой формат, также как и PNG поддерживают прозрачность. Такой формат часто используется для логотипов.
- PNG. Усредненное по качеству между форматом JPEG и форматом GIF. Такой формат часто еще называют универсальным, так как он обрабатывает сложные изображении и поддерживает прозрачность. Единственный недостаток изображений такого формата это то, что они имеют большой вес, и изображения приходится сильно ужимать в качестве.
Размеры изображений на сайте
Если вы хотите, чтобы изображение на сайте было растянуто по ширине экрана, например, как баннер, то необходимо отталкиваться от размера экранов мониторов. Итак, на картинке изображены размеры стандартных мониторов. То есть размер изображения по ширине должно быть не меньшем 2300 px, чтобы сохранить качество изображения. Примеры широкоформатных баннеров для сайта:
Что касается оптимальных размеров изображений на сайте:
600 * 400 px – самый лучший вариант для изображений, так как они не теряют в качестве, а также имеют небольшой вес, что нам и требуется для сайта. Настроить размер изображения можно в графическом редакторе, например, в Photoshop. Возьмем широкоформатное изображение размером 2880 на 2188px и попробуем изменить его размеры.
Открываем изображение в программе Photoshop, и во вкладке Image находим вкладку Image Size и настраиваем размеры.
Помимо того, что мы получаем изображение меньшего размера, автоматически меняется и вес изображения, что очень актуально для сайта.
Оптимизация изображений для сайта
Оптимизации изображений и фотографии применяется во многих случаях, самым распространенным – это оптимизации изображений на сайте для уменьшения скорости загрузки страницы. С помощью изменения размера фотографии, мы можем получить изображение с меньшим весом. Но чтобы получить изображение весом до 40 КБ нужно воспользоваться дополнительными сервисами по сжатию картинок. Одним из самых популярных сервисов является сервис TinyPNG (https://tinypng.com/). Попробуем дополнительно сжать получившееся изображение.
Итак, мы получили сжатое изображение весом в 36 КБ. Изображение готово к загрузке на сайт.
Также можно уменьшить качество изображения при пересохранение его в Photoshop, перемещая ползунок влево. Главное в таком методе – не переусердствовать.
Оптимальный вес изображения для сайта
При сохранении файла для web мы должны достигнуть разумного компромисса между качеством картинки и ее весом. Это делается «на глаз», т.к. сжатие по — разному влияет на различные изображения.
Например, для фотографии шириной 400пкс, оптимальный вес для сайта будет 35 – 70 Кб. Разумеется, чем больше вес картинок, тем дольше будет грузиться страница сайта. Поисковые системы также, при прочих равных, дадут более низкую оценку тяжелым страницам.
Страницы (и любые документы) общим весом более 10Мб, вообще, не индексируются поисковыми системами. Самое оптимальное количество изображений для статьи — 2-3 штуки. Большое количество изображений только нагружают страницу, изменяя скорость загрузки страницы не в лучшую сторону.
