Разработка сайтов

Персональные и бизнес сайты


Spartak Klein
лого

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

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

И так перед тем как разместить картинку на странице сайта, надо ее подготовить. Для начала ответьте себе на пару вопросов:

  1. Нужно здесь это изображение или нет.
  2. Какого размера и ориентации будет изображение. Для этого зрительно сопоставьте размеры изображения с размерами посадочного места.

 

Движок сайта сам масштабирует картинку. Возможно на сайте установлен эффект лайтбокса (маленькая картинка увеличивается по клику). Если изображение в два раза больше блока, это никуда не годиться, затрачиваемые ресурсы на загрузку картинки, останутся прежними. В некоторых случаях изображение будет смотреться плохо.
Следовательно, изначально задайте нужные размеры в фотошопе или другом редакторе.


Сжатие изображений без потерь

Важно сжать изображений без потери качества. При таком методе сжатия изображение уменьшается по весу, а по размеру и качеству не изменится. Для сжатия изображения без потерь воспользуйтесь онлайн сервисами.

Вот парочка, которыми пользуюсь сам.

  1. http://compressjpeg.com/ru/ здесь отдельно вкладки для .jpg и отдельно для .png
  2. https://kraken.io/web-interface здесь все форматы в одном окне.

Интерфейс интуитивно понятный, думаю разберетесь.


Названия файлов изображений

Нашли в сети картинку с длинным сгенерированным бессмысленным названием типа 154eyu78waqr9e4fr8.jpg и в таком же виде влепили на страницу. Так не пойдет.

Лучше дать короткое, название картинки на латинице, соответствующее тематике статьи. Если название из 2х слов, разделяйте дефисом. Пример названия primer-kartinki.jpg


Атрибут alt и title для изображения

Это касается СЕО. Обязательно пропишите атрибут alt. Не знаете, что это, и как вставить, не важно – все движки сайтов делают это автоматически, нужно будет только заполнить предложное поле при вставке изображения на сайт. Не поленитесь пропишите там слово (фразу) описывающую изображение, ключевой запрос или другую тематическую информация.

Атрибут Title не обязательный, но сео спец-ы рекомендуют заполнить. Title-описание показывается пользователю при наведении курсора на изображение, поэтому заполнение этого атрибута будет полезным для посетителей сайта.


Подготовка изображения, шаг за шагом на примере

Теперь разберем на примере.
Задача — сайт, (пусть будет каталог или магазин или другой, не важно). Вставить изображение в карточку товара. На странице изображение будет в миниатюре и доступно в увеличенном просмотре в галерее или лайтбоксе.

Решение.

  1. Отснять товар на фотоаппарат (если товар индивидуальный) или найти в интернете если это типовой товар. При поиске в интернете, берите изначально большие изображения в хорошем качестве.
  2. Открыть изображение в Фотошопе, уменьшить до нужного размера, и сохранить. Важно – для сохранения картинки выбираем кнопку «сохранить для веб». Там же можно еще и выбрать качество (наилучшее, высокое, среднее…)
  3. Жмем сохранить – сразу даем человеко-понятное имя типа – product-img.jpg. Если такое уже есть, добавьте цифру product-img-2.jpg.
  4. После обработки картинки (картинок) в фотошопе, оптимизируем без потери качества через упомянутые выше онлайн сервисы ( http://compressjpeg.com/ru/  https://kraken.io/web-interface )
  5. Скачиваем себе на компьютер. Только после таких манипуляций, изображение подготовлено для публикации на сайте.

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


90% клиентов довольны результатом


Без предоплаты


Всегда на связи


Решения на любой бюджет