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

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

Где нужно размещать изображения?

Изображения имеют огромное влияние на восприятие. Не зря же говорят: «Лучше один раз увидеть, чем сто раз услышать». Тем не менее, очень важно не перестараться с количеством иллюстраций на страницах сайта. Постарайтесь использовать графику только там, где она действительно подходит. Очень важно, чтобы изображения иллюстрировали контекст и соотносились с тем, что написано на странице. Например, если вы пишите учебный материал или хотите объяснить что-то посетителям вашего сайта, фотографии и скриншоты могут стать отличным подспорьем в этом. 

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

Использование изображений в качестве фона для сайта — это один из самых популярных трендов в современном веб-дизайне, и он положительно влияет на впечатление посетителя от сайта . Однако если этот приём используется неправильно, он может иметь обратный эффект. Именно поэтому очень важно выбрать подходящее изображение достаточного размера. Кроме того, использование фотографии в качестве фона не обязывает к использованию иллюстраций на каждой странице. С помощью функции собственного фона на Jimdo вы можете создать как статичный фон, так и слайд-шоу.

Формат изображений

Существует три основных формата графических файлов, которые используются онлайн: .jpg, .gif и .pngЕсли ваше изображение в другом формате, то его стоит конвертировать его в один из вышеперечисленных. У каждого из них есть свои достоинства и недостатки, о которых мы поговорим ниже. 

Формат .jpg

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

Чтобы найти оптимальный для вас вариант, попробуйте несколько различных вариантов. Методом проб и ошибок вы найдёте самый подходящий. Обратите внимание, что слишком сильное сжатие файла заметно скажется на качестве фотографии. Именно поэтому формат .jpg не рекомендуется использовать для изображений с большими, плоскими цветами (например, для логотипов), так как их качество будет намного хуже, чем, если вы выберете другой формат.

Формат .gif

.gif — это старый формат файлов, используемый для плоской графики. Он всё менее популярен для сохранения и публикации стандартных изображений, но всё так же любим за его возможность сохранять несколько кадров в одном файле. Это позволяет создавать анимированные .gif, которые в последнее время очень популярны в Интернете и часто публикуются в развлекательных целях. Кроме того, с помощью этого разрешения некоторые цвета можно сделать прозрачными, что позволяет накладывать одно изображение на другое.

Когда вы будете сохранять изображение в формате .gif, возможно, вам придётся выбрать, сколько цветов вы хотите в файле — от 8 до 256. Чем меньше цветов вы выберете, чем меньше будет сам файл. Опять же, метод проб и ошибок поможет вам найти оптимальный вариант. 

Формат .png

.png — это один из самых новых форматов. Для неанимированных файлов он почти полностью вытеснил .gif. Формат .png отлично подходит для больших цветных областей, а также не только поддерживает прозрачность, но и позволяет установить для неё несколько уровней.  

формат png
Формат .png может иметь полностью или частично прозрачные области. Шахматная доска в левом изображении – традиционное отображение прозрачной области. Буквы «d» и «o» – полупрозрачные. Справа – это же изображение, наложенное на синий фон.

При сохранении .png у вас есть две опции — 8 или 24 бит. Для полупрозрачных изображений нужно выбрать второе. В целом, мы рекомендуем использовать этот размер для всех изображений с плоской графикой. Конечно же, в том случае если у вас всего несколько цветов, можно выбрать опцию в 8 бит. Тогда это не повлияет на качество цвета и самого изображения. 

Существуют также различные инструменты для уменьшения .png без ущерба качеству файла. Один из них, например, TinyPNG

Размер и разрешение файла

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

Когда вы фотографируете с помощью цифровой камеры или вашего телефона, размер изображения может быть достаточно большим. Лучше всего, если он не превышает 1МБ, а минимальный размер — 100кб или чуть меньше. Большие фотографии, размером 1МБ, подойдут для изображения фона, остальные же можно уменьшить. Как это сделать?

Один из способов — снизить разрешение файла. Это поможет уменьшить размер без особого ущерба качеству. Разрешение — это единица измерения, которая определяет плотность изображения и измеряется в DPI (от английского dot per inch — точек на дюйм). Этот термин часто используется в типографиях. Например, для печати используют изображения высокой плотности — больше 300dpi, а иногда и достигающие 1200dpi. 

Вам важно понимать, что самое высокое разрешение, которое отображают большинство мониторов компьютеров, не превышает 72dpi. Это означает, что даже если вы загрузите файл с большим разрешением, этого не будет видно, а размер файла замедлит загрузку страницы. Так, изображение с разрешением 72dpi и 300dpi будут выглядеть абсолютно одинаково, только второе будет занимать примерно в четыре раза больше места. 

Для того чтобы обработать ваши изображения, воспользуйтесь любым доступным вам графическим редактором. Сейчас всем доступна бесплатная версия Photoshop, или же вы можете использовать бесплатный онлайн-редактор Pixlr.

Кадрирование изображений

Часто на фотографиях очень много ненужного пустого пространства. Обрезка частей снимка поможет увеличит эффект, производимый изображением. Это может быть как избавление от ненужного фона, так и выравнивание фотографии в кадре. 

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

правило третей
Кадрирование с применением правила третей.

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

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

Очень важное замечание, которое очевидно не каждому: уменьшить размер изображений без потери качества можно, но вот увеличение изображений обязательно приведет к ухудшению качества. Если вы попробуете сделать это, графический редактор создаст дополнительные пиксели в изображении, а это будет сразу заметно невооружённым глазом. Если вы не уверены, какой размер изображения вам необходим, лучше сделать его немного больше. Вы всегда сможете уменьшить его с помощью модуля «Изображение».

Внимание: Всегда сохраняйте оригинальный файл изображения. Возможно, вам нужно будет отредактировать его ещё раз.



Предыдущая статья:

Оформление текста

Следующая статья:

Расположение контента