Оптимизация изображений

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

Сама по себе оптимизация изображения делится на следующие этапы:
- Подбор или создание исходной картинки
- Коррекция параметров изображения
- Настройка формата и сжатия
- Оформление картинки на сайте

Разберем каждый пункт подробно.

Подбор или создание картинки:

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

Важный момент – своя «фишка». Оформление картинок помогает формировать индивидуальный стиль сайта или блога. Например, Глобатор на своем блоге все картинки оформляет в стиле демотиваторов.

Полезная подсказка: если вы открыли в фотошопе скачанную картинку, но сделать с ней ничего нельзя, откройте меню «Image» и в пункте «Mode» измените режим с Indexed Color на RGB color.

Коррекция параметров изображения:
Важный пункт обработки изображения – подгон размера и пропорция к требуемым величинам. Публиковать полноразмерное изображение можно только в том случае, если оно уже небольшое, либо если это принципиально важно (важны мелкие детали).Не сжимайте и не растягивайте изображение. Если пропорции не устраивают, лучше обрезать картинку. В фотошопе это делается инструментом Crop.

Для изменения размера изображения нужно открыть вкладку «Image» и выбрать пункт «Image Size».

Я рекомендую на всех картинках размещать водяной знак или логотип сайта. Также не будет лишним сделать рамку, если объекты на картинке обрезаны и это бросается в глаза. Неплохой вариант – градиентная рамка с переходом в цвет фона сайта.

Настройка формата и сжатия:
Это важный шаг в оптимизации картинки, от того насколько хорошо он выполнен зависит скорость загрузки сайта. Нужно думать о пользователях – не у всех пока интернет работает быстро. Даже Dial-Up еще где-то используется. Гугл, кстати, объявил, что после ввода нового алгоритма Caffeine скорость загрузки страницы будет влиять на ее позицию сайта в поисковой выдаче.

Два основных формата, использующиеся при публикации изображений в интернете – GIF и JPEG. Не буду углубляться в технические подробности, скажу просто что фотографии лучше сохранять в jpeg-е. Если палитра картинки небогата цветами, можно использовать gif. Ну и анимация, естественно, сохраняется в gif-е.

Степень сжатия – параметр, который позволяет серьезно «облегчить» картинку. В фотошопе для сохранения изображения используйте команду “Save for Web”. Там можно выбрать формат и степень сжатия, и сразу посмотреть, как будет выглядеть картинка, и сколько она будет весить.

Оформление картинки на сайте:
Важную роль в оптимизации изображения играют два параметра, прописываемых в теге . Это alt – альтернативный текст, и title – заголовок картинки. То есть, если вы, к примеру, вставляете изображение заднего бампера мерседеса C-200, то картинка должа быть оформлена таким образом: . Важно, чтобы ключевое слово, по которому вы хотите чтобы вашу страницу находили люди, было включено в alt и title. Текст в alt дает поисковику возможность связать картинку с ключевым словом, чтобы он знал, что на ней изображено. Текст в title картинки будет отображаться при наведении курсора на нее.

Чтобы картинка не стояла вплотную к тексту, не забудьте включить в тег такие параметры, как hspace=”*” и vspace=”*” – горизонтальный и вертикальный отступы, вместо * указывайте число пикселей.

Блогосфера Destroy 391
Похожие материалы
Поиск графического контента для сайта Графика – это один из основных типов контента на сайте. На многих современных сайтах есть картинки, фотографии...
Уникализируем изображения - привлекаем больше трафика Привет всем я думаю многие знают, а может и нет что на ваш сайт так же приходят и через картинки выставленные ...
Продвижение сайта по трафику Представьте себе ситуацию: у вас имеется интересный и перспективный интернет-проект, но вам нужное его раскрут...
О структуре сайта Какой должна быть структура сайта, чтобы поисковая система заприметила его? Есть такое правило – чем больше, т...
Категории раздела
Новое на форуме
Популярные материалы
Популярные теги