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

       

+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-страницу?

Новости

Редизайн и оптимизация сайта 5ave.spb.ru

Редизайн и оптимизация сайта 5ave.spb.ru

Редизайн и оптимизация сайта 5ave.spb.ru. Сайт создан по новому шаблону.

Проведен аудит сайта для Пионер-Тур

Проведен аудит сайта для Пионер-Тур

Проведен аудит сайта для туристической компании Пионер-Тур.

Обновление каталога на сайте багетной мастерской

Обновление каталога на сайте багетной мастерской

Проведено обновление каталога на сайте багетной мастерской в Санкт-Петербурге Ра-Свет.

Аудит сайта для психолога Ольги Хлебниковой

Аудит сайта для психолога Ольги Хлебниковой

Проведен бесплатный аудит сайта для психолога Ольги Хлебниковой.

Видеоурок по редактированию слайдера в MODx.

Видеоурок по редактированию слайдера в MODx.

На наш сайт добавлен новый видеоурок.

Разработан новый шаблон сайта-визитки!

Разработан новый шаблон сайта-визитки!

Нами разработан новый шаблон сайта-визитки с полным адаптивом и по привлекательной цене.

Выполнен бесплатный аудит сайта tochkarosta-murmansk.ru

Выполнен бесплатный аудит сайта tochkarosta-murmansk.ru

Выполнен бесплатный аудит сайта для детского центра по раннему развитию "Точка роста".

Выполнен бесплатный аудит сайта betondmr.ru

Выполнен бесплатный аудит сайта betondmr.ru

Бесплатный аудит сайта компании по производству и доставке бетона позволил выявить его основные проблемы.

Сайт-визитка для компании "Артель-забор"

Сайт-визитка для компании

Сдан сайт-визитка для компании "Артель-забор" с оригинальным дизайном.

Выполнена разовая оптимизация сайта perevod.moscow

Выполнена разовая оптимизация сайта perevod.moscow

Выполнен бесплатный аудит и разовая оптимизация сайта perevod.moscow.

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

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

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

Аудит для masters-online

Аудит для masters-online

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

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

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

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