Использование изображений при создании сайтов

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

Графические форматы изображений, используемые при создании web-ресурсов

Важной характеристикой изображения, о которой стоит задуматься, является расширение, которое определяет формат изображения. Изображения могут иметь различные форматы. При создании сайтов и размещении на нем контента используют в основном три из них: JPEG, PNG и GIF. Изображения в этих форматах имеют небольшой размер, а так же поддерживаются всеми браузерами. Формат JPEG - файлы имеют расширение .jpg Сохраняет изображения с высокой степенью сжатия, при этом может терятся качество. Отображает несколько миллионов цветов. Этот формат хорошо использовать для хранения фотографий, особенно там, где отсутствуют резкие границы и резкие цветовые переходы. Но когда на изображении есть текст или оно изобилует мелкими деталями, то при сохранении в формате JPEG текст может выглядеть нечётким, а мелкие детали – размытыми. Поэтому для таких изображений лучше использовать формат gif или png Формат GIF - файлы имеют расширение .gif Сохраняет изображение практически без потерь, но максимальное количество цветов – 256, в связи этим данный формат в основном используется для сохранения изображений с небольшим количеством цветов или черно-белых рисунков. В GIF-файле можно сохранить анимации, серия картинок меняющих друг друга в одном файле (делается это, например, в программе Adobe Image Ready). Чаще всего gif используется в баннерах или аватарках. Формат PNG - файлы имеют расширение .png формат PNG позволяет сохранять изображений с частичной или полной прозрачностью пикселов. Формат PNG самый «младший» среди популярных форматов web-графики. Достаточно широко распространен сейчас. Он использует прогрессивный метод сжатия без потерь, позволяет сохранять в файле палитру, текстовую информацию и обеспечивает прозрачность. Для каждого типа отображаемого изображения лучше всего использовать соответствующий формат. Так, для фотографий больше подходит jpg, а для логотипов и линейных рисунков – png, для баннеров gif.

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

Оптимальный размер одной html-страницы должен быть в районе 100-150 Kb, вместе со всеми картинками, еще лучше не больше 100 Kb. В противном случае посетитель может не дождаться полной загрузки страницы и уйти с вашего сайта. Все файлы с рисунками на Вашем сайте должны быть как можно меньшего размера, но при этом как можно более высокого качества. Т.е. размер картинки в байтах должен быть как можно меньшим, но не в ущерб качеству, а вот размер в пикселях как можно большим. Для этого, после обработки в Photoshop изображения для сайта, сохраняйте его через меню Файл – Сохранить для Web. Разрешение картинки для Web ставьте в пределах 75 пикселов на дюйм. При сохранении в формате JPG выбирайте качество изображения «medium» (среднее). Ориентируйтесь на примерные максимально допустимые размеры, в зависимости от назначения изображения: - размер кнопок и указателей – в пределах 1-2 килобайтов - размер логотипа – не более 10 килобайт - размер большого баннера – не более 15 килобайт - размер фонового рисунка – не более 3-5 килобайт.

Привлечение трафика на ваш ресурс при помощи изображений

Поместив изображения на сайте, вы привлекаете внимание посетителей к своему сайту, помогаете им лучше понять размещенный на странице материал. В настоящее время Яндекс и Google показывают картинки по определенному ключевому слову или словосочетанию в поисковой выдаче в дополнении к основному поиску, кроме того в данных поисковых системах реализован поиск только по картинкам. Этим и пользуются многие веб-мастера, используя изображения как мощный конкурентоспособный инструмент для получения дополнительного трафика с крупнейших поисковых систем на свой сайт. Но, к сожалению далеко не все веб-мастера понимают значение этого инструмента и умеют пользоваться им, что приводит к потере определенного потенциального трафика на свой сайт. Обеспечение трафика с помощью графики не является стандартной техникой продвижения сайтов, поэтому конкуренция в поиске по картинкам обычно намного меньше, чем в обычном поиске. Для того чтобы ваши картинки смогли попасть на высокие позиции в поисковой выдачи с ними необходимо производить не только физическую оптимизацию, об этом мы поговорим в следующей статье. [stextbox id="info"] Если вы нашли информацию полезной для себя и имеете своё мнение по теме или пожелания, оставляйте пожалуйста их в комментариях[/stextbox]