Сегодня мы с вами поговорим об использовании на вашем Интернет-ресурсе различных изображений.
Сейчас ни один сайт не обходится в оформлении без графических элементов, которые делают его внешний вид и оформление более привлекательным. К таким элементам относятся различные рисунки, фотографии, логотипы, графики, иллюстрации, фоновые изображения, баннеры, кнопки навигации и т.д. Без этих элементов Интернет-ресурсы были бы не так интересны и не пользовались бы такой популярностью как сейчас.
Графические форматы изображений, используемые при создании 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 показывают картинки по определенному ключевому слову или словосочетанию в поисковой выдаче в дополнении к основному поиску, кроме того в данных поисковых системах реализован поиск только по картинкам.
Этим и пользуются многие веб-мастера, используя изображения как мощный конкурентоспособный инструмент для получения дополнительного трафика с крупнейших поисковых систем на свой сайт.
Но, к сожалению далеко не все веб-мастера понимают значение этого инструмента и умеют пользоваться им, что приводит к потере определенного потенциального трафика на свой сайт.
Обеспечение трафика с помощью графики не является стандартной техникой продвижения сайтов, поэтому конкуренция в поиске по картинкам обычно намного меньше, чем в обычном поиске.
Для того чтобы ваши картинки смогли попасть на высокие позиции в поисковой выдачи с ними необходимо производить не только физическую оптимизацию, об этом мы поговорим в следующей статье.
© 2012,