Материалы для наполнения сайта. Изображения.

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

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

Изображения и их размеры.

Кто виноват

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

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

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

Как определяются размеры фото на сайте.

Очень частый вопрос от клиента: «Я же предоставил большие фото, почему вот тут одно больше другого».

Ответ очень прост: «Потому что размещение фото и его обработка — это разные услуги и стоят разных денег». Оказывая услуги наполнения сайта разработчик, ни в коем случае, не берется обрабатывать фото клиента.

Теперь немного о том как вставляется в html изображения. Частый прием на сайтах с большим количеством статей и описаний — обтекание фотографии текстом слева или справа. Делается обычно через CSS, с помощью кода:

	 float: left; float: right;

Очень частая проблема такого приема — «висячие» строчки после фоток. Решить эту проблему на «резиновом» макете не реально — на каждом разрешении будет по-своему, так как блок с текстом тянется и становится меньше или больше по высоте. На фиксированном макете, можно поиграть с высотой фото, чтобы выровнять его по абзацу.

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

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

У горизонтальных ширина больше высоты, у вертикальных, соответственно, наоборот. Высота и ширина измеряется в вебе в пикселях. Они же определяют и разрешение изображения, например фото 1024×768 пикселей. Чем больше разрешение, тем, как правило, больше его размер(вес) в мегабайтах.

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

В html при вставке изображения можно:

Задать фото ширину или высоту.

В этом случае второй параметр высчитает автоматически, учитывая разрешение оригинального фото.

Например, фото разрешением 1024×768 можно вставить на страницу с ограничением по ширине блока:

	 img{ width: 100%; }

И оно автоматически высчитает высоту и будет в ширину = ширине блока ,без потери качества, если сам блок не превысит 1024. Высота в этом случае высчитывается автоматически браузером.

изображения для наполнения сайта

Можно сделать 400 пикселей опять фото встанет корректно, но будет уже фиксированной ширины:

изображения для наполнения сайта 400 пикселей

Но если тоже самое проделать с фото низкого качества, например, разрешением 300×200 пикселей, то получится примерно следующее:

изображения для наполнения сайта

При исходных размерах с фото ничего не произойдет:

изображения для наполнения сайта

Жестко задать размеры фото

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

В противном случае произойдет искажение

	 img{ width: 400px; height: 400px; }
изображения для наполнения сайта 400 пикселей

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

  1. Наймите фотографа, которые сфотографирует и обработает ваши помещения, товары и т. д .
  2. Если возможности сфотографировать нет, то потратьтесь на дизайнера, которые обработает и подберет из уже имеющихся у вас фото.
  3. Копируя фото из открытого доступа в интернете, помните о размерах и разрешении
26 Января 2015
Последние новости
29 Сентября 2016
Создан интернет-магазин для компании «Надеко»
29 Июля 2016
Создан сайт для компании «ACS Termal»
Сделать заказ
Нужен интернет-магазин?