Правила размещения фотографий на сайте
«Ваш МАСТЕР» уже не раз замечал, что после разработки сайта с системой управления и бесплатного обучения, клиенты спешат приступить к его наполнению. Но не всё так просто. Если в процессе размещения текстов таится меньше «подводных камней», то с фотографиями дело обстоит совсем иначе. Не умея правильно подготавливать фотографии «под веб», можно натворить на сайте много бед.
Неправильная вставка фотографий может привести к результату, при котором:
- Сайт будет очень долго грузиться;
- Вёрстка страниц будет «разваливаться»;
- Фотографии могут не отображаться или показываться неправильно и т. п.
Приятно ли посещать сайты, обладающие такими «артефактами»? А что подумают о Вашей компании посетители, если увидят подобное на её сайте? Неужели Вы продолжаете думать, что многие обращаются за наполнением сайтов к профессионалам «от нечего делать»?
Если у Вас нет возможности платить за поддержку сайта, то рекомендуем усвоить несколько бесплатных, но важных советов (см. ниже). Придерживаясь наших правил подготовки фотографий «под веб», Вы сможете самостоятельно наполнить свой сайт. Избежите ошибок, совершаемых новичками. Сайт будет быстрым, красивым и удобным для посетителей.
1. Подготовка фотографий «под веб»
Перед тем, как приступать к размещению любых материалов на сайте, их необходимо правильно подготовить. Фотографии — не исключение:
- Выберите страницу, на которой планируете поместить фотографию. Подберите для неё лучшее место;
- Оцените примерные размеры (в пикселях) по ширине и высоте, в которые потребуется уместить фотографию.
Когда будете знать точное место размещения и размеры будущей фотографии, вот тогда следует приступить к её обработке. Поможет нам в этом редактор картинок.
На заметку! Для работы с фотографиями необязательно использовать профессиональные редакторы типа «Photoshop». Можно воспользоваться привычным просмотрщиком картинок, например, «ACDSee». Почти все современный просмотрщики картинок позволяют выполнять над фотографиями самые простые операции редактирования: изменять размер, угол поворота, цветность и формат изображения. А большего нам и ненужно.
Этапы подготовки фотографии:
- Откройте фотографию в редакторе;
- Измените размеры фотографии до нужной величины. При необходимости, можете обрезать фотографию по одной из сторон. Главное, чтобы конечный размер не превышал размеры выбранной ранее на сайте области. Постарайтесь подать посетителю всё с лучшей стороны;
- Сохраните фотографию в формате «jpg». При сохранении данных контролируйте степень сжатия и подберите оптимальное соотношение качества изображения и веса файла. Например, файл картинки размером 200x200 px должен весить не более 20-25 Кб.
- Дайте файлу осмысленное название. Название желательно составлять из символов латиницы и цифр. Лучше не использовать в названии файлов символов национального алфавита.
Всё, этих действий вполне достаточно для решения поставленной задачи. В результате картинка будет иметь необходимые размеры, а сам файл оптимальный вес.
Зачем столько сложностей?
Современные фотоаппараты имеют высокое разрешение, при котором получаются фотографии большого размера и веса.
На заметку! На фотоаппарате с матрицей 5 Mpx фотографии получаются размером 2592x1944 px, а сами файлы весом примерно 2 Мб. По меркам Интернета — это очень много! Попробуйте открыть фотографию подобных размеров на сайте.
К сожалению, не все заботятся о посетителях своего сайта и размещают фотографии без предварительной подготовки. В результате сайт начинает долго загружаться и это одна из самых безобидных проблем. Ещё хуже, если у фотографии забывают указать ограничение по ширине или высоте, тогда сайт может вообще «рассыпаться» и им будет невозможно пользоваться.
Правильно подготавливая фотографию, Вы:
- Уменьшаете размеры картинки, что не позволит ей испортить структуру и внешний вид сайта;
- Уменьшаете вес файла, что позволяет ускорить конечное время загрузки страницы сайта. Навигация по сайту будет более комфортной.
Соблюдайте элементарные правила работы с изображениями, и Ваш сайт будет выглядеть как минимум корректно и не испортит впечатление посетителей. В прочем, после обработки фотографии, её нужно суметь красиво разместить.
2. Размещение картинок на сайте
Современные системы управления сайтом позволяют работать с текстами и фотографиями без глубоких знаний программирования. Поэтому не будем углубляться в дебри html, а дадим лишь несколько полезных советов, которых настоятельно рекомендуем придерживаться:
- Фотографии и любые другие картинки должны размещаться на страницах сайта в едином стиле, который был задан дизайнером сайта;
- При размещении фотографии с обтекаемым её текстом, не забывайте указывать отступ, например, 7 px. С отступом текст с картинкой смотрится гораздо лучше;
- Если необходимо разместить очень большую фотографию, то предварительно сделайте для неё превью. А уже по клику пользователя по превью пусть открывается картинка в полном размере;
- После размещения информации на сайте обязательно проверяйте, что в итоге получилось. Лучше вовремя заметить ошибку самому, чем ждать указание от посетителя сайта.
На заметку! Хорошим примером удачного размещения картинок может служить наше портфолио. Мы стараемся делать его удобным и наглядным, заранее подготавливая картинки дизайнов нужных размеров. «Ваш МАСТЕР» делает всё, чтобы Вам было удобно пользоваться нашим сайтом. Надеемся, Вы это оцените.
Вот, пожалуй, и всё. «Ваш МАСТЕР» описал основы процесса подготовки и размещения фотоматериалов на страницах сайта. Но, несмотря на то, что ничего сложного в нём нет, времени он может отнимать достаточно много. Возможно, однажды Вы поймёте, почему даже наполнение сайта стоит денег.
Пусть Ваш сайт будет опрятным и красивым!
Ещё рекомендуем прочитать:
Зачем нужен сайт? Всё о пользе создания своего сайта
Разработчиков сайта Министерства обороны России подозревают в крупных хищениях
Создание простых сайтов
За создание сайта о культурном наследии России обещают 76 млн рублей
За апгрейд сайта госзакупок обещают 26 млн долларов
| К списку статей |
