создание и продвижение сайтов
реклама в Интернет
по всей России

       

+7 (812) 981-18-97
WhatsApp, Viber +7 904 519-45-93

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

1. Форматы изображений для загрузки на сайт

Загружайте изображения на сайт в распространенных графических форматах: jpeg, gif, png.

  • Сравнение jpg, gif и pngДля сохранения качества фотографий, а также рисунков с градиентными заливками, лучше использовать формат jpeg.

  • Для простых рисунков и особенно черно-белой графики, подойдет формат gif. Также форматы gif и png поддерживают прозрачность; то есть, воспользовавшись ими, Вы сможете сохранить рисунок на прозрачном фоне.

  • Формат png представляет собою нечто среднее между jpeg и gif. Он более щадяще, чем gif обрабатывает сложные изображения, и поддерживает прозрачность, в отличие от jpeg. Минусом сохранения изображений в этом формате является большой вес итоговых файлов при удовлетворительном качестве картинки и наоборот, низкое качество картинки при необходимости сохранения ее с малым «весом», т.е., - с сильным сжатием.

2. Размер изображения в пикселях и его «вес» в килобайтах

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

Однако, и сейчас, неправильным будет заставлять пользователя грузить к себе картинки весом по 500-1000 Кб, т.к. для пользователей мобильного интернета, это - потерянные секунды и рубли.

«Вес» картинки тесно (но не линейно) связан с ее размером в пикселях, а также со степенью ее сжатия.

 Автоматическая постановка водяного знака на все фото Вашего сайта. Далее

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

Окно Сохранить для веб в фотошопе. Регулирование степени сжатия изображения.Оттолкнувшись от средней ширины текстовой страницы сайта в 700-1000 пкс и предположив, что картинки будут занимать на этой странице не более 2\3 ширины, мы получим, что максимальная ширина картинки не должна превышать 400-600 пкс, ( кроме тех случаев, когда мы собираемся разместить картинку во всю ширину страницы.

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

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

2.2 Оптимальный «вес», в килобайтах, изображения для сайта

Пример правильно размещенного изображения на сайтеПредположим, мы уже уменьшили размер изображения для сайта в каком-либо графическом редакторе до 400-600 пкс по ширине. Следующим шагом будет уменьшение веса изображения. Потому что разница в весе изображений, сохраненных в 100% jpeg ( без сжатия) и в 50% jpeg, может быть «в разы».

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

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

Например, для фотографии шириной 400пкс, оптимальный вес для сайта будет 35 – 70 Кб. Разумеется, чем больше вес картинок, тем дольше будет грузиться страница сайта. Поисковые системы также, при прочих равных, дадут более низкую оценку тяжелым страницам.

Страницы (и любые документы) общим весом более 10Мб, вообще, не индексируются поисковыми системами.

Посмотреть видеоурок по обработке изображений для сайта

3. Имя файла

Для хорошей индексации графического файла, правильным именем файла, с точки зрения seo, будет осмысленное имя, написанное на английском языке или транслитом (только латиница!), не содержащее никаких других символов, кроме букв латинского алфавита, цифр, символов нижнего подчеркивания и тире. Например: prodvijenie-saitov.jpeg

4. Заполнение атрибутов изображений на сайте

Пример отображения альтернативного текстаДля web-изображений предусмотрено 2 вида атрибутов:

  • Альтернативный текст (alt) – текст, который отображается вместо изображения, если оно само, по любой причине, не подгрузилось на страницу, например: «это - изображение яблока».
  • Всплывающая подсказка (title), которая появляется при наведении курсора на картинку.

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

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

5. Рекомендуемое количество изображений на странице

Для среднестатистического текста в 3 – 3,5 тыс. знаков, оптимальное количество изображений 3-5. Подробнее об этом Вы сможете прочесть дальше, в разделе Оптимизация страницы


 

Читать далее

Подготовка материалов к постановке на сайт

Как оптимизировать web-страницу?

Наши работы

Сдан сайт компании Fortis
Создание сайта-визитки туркомплекса
Верстка  сайта-визитки студии «JP»
Редизайн Главной страницы студии звукозаписи
Создание сайта-визитки для компании по вывозу мусора
Создание сайта-визитки для филиала
показать еще

Новости

Сдан сайт компании Fortis

Сдан сайт компании Fortis

Сайт компании Fortis, кроме стандартного набора, снабжен рядом интересных опций.

Аудит для masters-online

Аудит для masters-online

Проведен бесплатный аудит сайта, посвященного ремонту бытовой техники в Краснодаре.

Создан сайт-визитка по шаблону для компании Фонодом.

Создан сайт-визитка по шаблону для компании Фонодом.

Сайт-визитка по шаблону компании Фонодом укомплектован стандартными для данного предложения модулями

Выполнена разовая оптимизация сайта stroyrus.spb.ru

Выполнена разовая оптимизация сайта stroyrus.spb.ru

Для компании Артель выполнена разовая оптимизация сайта, в ходе которой устранен ряд проблем

Сдан сайт туристического комплекса в Карелии Белые мосты

Сдан сайт туристического комплекса в Карелии Белые мосты

Сдан сайт туристического комплекса Белые мосты, адаптированный под любые устройства.

Наш новый клиент: компания "АвтоВоз"

Наш новый клиент: компания

Создан сайт для компании АвтоВоз с последующим продвижением.

Web-Садовник приглашает программиста на сдельную работу

Web-Садовник приглашает программиста на сдельную работу

Web-Садовник приглашает программиста на сдельную работу

Компания Web-Садовник открывает вакансию web-маркетолога

Компания Web-Садовник открывает вакансию web-маркетолога

Web-Садовник открывает вакансию web-маркетолога.

Приглашаем на работу рерайтера

Приглашаем на работу рерайтера

Предлагаем работу для ответственного и грамотного рерайтера.

Проведен SEO-аудит сайта samara-consult.ru

Проведен SEO-аудит сайта samara-consult.ru

Нами проведен бесплатный сео-аудит сайта samara-consult.ru

Команда нашего клиента покорила Эльбрус

Команда нашего клиента покорила Эльбрус

Команда Альпгуру совершила восхождение на гору Эльбрус на высоту 5642 метра.

Проведен очередной бесплатный SEO-аудит

Проведен очередной бесплатный SEO-аудит

Мы провели бесплатный аудит сайта adjuster group.ru.

“Web-Садовник”, агентство интернет-маркетинга, 2008 - 2017, реквизиты

Создание сайтов, продвижение сайтов, аудит сайтов, сопровождение сайтов

карта сайта
+7 (812) 981-18-97
WhatsApp, Viber+7 904 519-45-93
вверх