Размер изображений на сайте влияет сразу на несколько факторов: скорость загрузки страниц, качество отображения, удобство пользователей и позиции сайта в поисковой выдаче. Слишком маленькая картинка будет выглядеть размытой, а слишком большая - замедлит загрузку сайта. Какого размера картинка на сайт подойдет лучше всего, подскажут специалисты студии интернет-решений GuruLabs, где создание веб-ресурсов под ключ и их продвижение выступают одними из основных направлений деятельности.
Выбираем размер и формат
Под размером картинки обычно понимают вес файла (объем изображения) и разрешение (широта и высота в пикселях). Оба параметра важны. Картинка может иметь подходящее разрешение, но занимать слишком много места из-за отсутствия сжатия. Точные значения зависят от типа картинки, но можно ориентироваться на следующие показатели, которые должны быть при загрузке на сайт:
- Иконка до 20 КБ
- Логотип до 100 КБ
- Превью статьи 50–100 КБ
- Фотография товара 100–300 КБ
- Большой баннер 200–500 КБ
- Фоновое изображение желательно до 1 МБ.
Чем меньше вес изображения без заметной потери качества, тем лучше. Особенно это важно для мобильных пользователей, которые заходят на сайт через более медленное интернет-соединение.
Что касается формата, то оптимальным решением чаще всего выступает изображение в формате JPG (или JPEG). Если вы размещаете баннеры, изображения продукции, фотографии сотрудников – то однозначно jpg. Если речь идет об анимированных изображениях, то это формат GIF. Для логотипов, где нужен прозрачный фон, используется PNG. Для иконок – SVG.
Как подготовить изображение к загрузке на сайт?
Выше мы разобрались, какой формат картинки на сайте будет оптимальным. Теперь поговорим о том, как правильно подготовить изображение для того, чтобы его легко можно было загружать, и оно легко открывалась на любых устройствах. Специалисты рекомендуют:
- обрезать изображение под нужное соотношение сторон;
- уменьшить разрешение до фактического размера отображения;
- сохранить изображение в подходящем формате;
- сжать файл специальным сервисом или графическим редактором;
- удалить лишние метаданные, если они не нужны;
- проверить качество изображения на компьютере и смартфоне.
Большие изображения создают целый ряд проблем, от медленной загрузки страниц и увеличения расхода мобильного трафика до увеличения нагрузки на сервер и снижения эффективности SEO. В большинстве случаев для мобильных версий нужны отдельные изображения для сохранения читаемости и правильной композиции. Кроме размера важны и технические параметры, например — понятные имена файлов, заполненный атрибут ALT. Важный текст должен быть не только внутри картинки.
