seo

Картинки для сайта — как и где подобрать и правильно подготовить

картинки для сайта

Картинки для сайта оказывается не так просто подготовить, как кажется. Мало того, что они должны быть уникальными, то есть не повторяющимися более на пространстве интернет. Но еще должны быть легкими и правильно оформленными.

Давайте по порядку. Каждое графическое изображение имеет ряд технических требований. Самые важные - формат, объем, размер и качество изображения.

Начнем с формата изображений

Графические изображения сохранятся в различных форматах - jpg, png, gif, ai, eps, cdr, bmp, tiff, psd... Для нас с Вами, с первого взгляда, разница  не будет заметна. А вот для браузера она очень важна. Дело в том, что многие расширения просто браузерами не читаются. И если Вы их будете использовать, то ваши читатели их просто не увидят.

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

  1. Растовые  сжатые - подходят для сайта.Это форматы -  JPG/JPEG, GIF, PNG.
    JPG/JPEG - самый популярный и легкий по весу формат картинок. Он чаще всего используется. Хорошо передает цвет.PNG - более тяжелый по весу, но с более качественной цветопередачей. Кроме того возможно использование прозрачного фона. Что очень удобно для создания каких либо интересных коллажей.

    GIF - самый легкий формат с низкой цветопередачей и низким качеством. Но возможно использование простой анимации.

  2. Растовые несжатые - не подходят для сайтаФорматы - BMP, TIFF/TIF, PSD.
    Очень тяжелые, поэтому не используются в веб контенте. Они популярны для печати, сканирования и дизайна.
  3. Векторные форматы - не используются для сайтаФорматы - EPS, AI, CDR. Очень качественные расширения с использованием мелких деталей. Но браузерами не читаются. И очень тяжелые. Используются в полиграфии и анимации. Это профессиональные расширения изображений.

Размер изображения

Каждое изображение имеет высоту и ширину, измеряемую в px. Существует стандартная ширина экрана монитора - 985 px. Конечно сейчас мониторы очень разные по размеру, поэтому рекомендуется обрезать большие изображения до 600 рх. Для титульной картинки блога надо выбрать свой, определенный размер. Так как Ваш блог должен выдерживать свой стиль.

Объем изображения

Объем, или еще говорят - вес или масса картинки, измеряется в байтах. Чем больше вес, тем дольше загружается страница блога, что очень негативно сказывается на его продвижении. Поэтому изображение надо определенным образом готовить.

Как определить объем изображения и его формат и размер

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

картинки для сайта размер

Второй способ - подведите курсор к изображению и кликните правой кнопкой мыши. Во всплывающем окне выберите опцию - свойства.

картинки для сайта свойства

Как уменьшить изображение, при этом сохранив его качество

Я уже писала о ресурсе RIOT. Теперь я пользуюсь другим, более простым и мобильным ресурсом, который называется Optimizilla. Очень просто и удобный. Загружаете до 40 изображений одновременно, уменьшаете размер и скачиваете уже готовую легкую картинку.

картинки для сайта оптимизация

Обратите внимание - закачена картинка весом 64к, а получен вес менее 25к. Для того, что бы не потерялось качество предоставлены два. рядом расположенных изображения. Двигая бегунок, можно увидеть изменения на правом изображении. Подбираем то качество, которое нас устраивает, сохраняем картинку и скачиваем ее на свой компьютер.

В следующей статье продолжаем работу с картинками для сайта. Обсудим плагины и ресурсы с бесплатными изображениями, используя которые мы не нарушим чужие авторские права.

Всего доброго!
Смирнова Ирина

Добавить комментарий