Как подготовить картинки к оформлению сайта

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

В связи с тем, что за последние несколько лет произошло стремительное развитие компьютерных технологий, сегодня очень часто мы имеем дело с сильно возросшими размерами различных рисунков. К примеру, если посмотреть, сколько весит стандартная фотография, которая была снята посредством обычного фотоаппарата, то её размер может очень сильно вас удивить. Ведь если загрузить такой 1,5 МГб файл на собственную web-страницу, то гостю вашего сайта придётся набраться огромного терпения, прежде чем он до конца откроет желаемую вкладку.

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

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

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

Существует множество различных программ, с помощью которых можно оптимизировать практически любое изображение. Самой популярной и востребованной из них является Adobe Photoshop. Именно на ней работает огромное количество современных молодых людей.

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

Итак, для того чтобы оптимизировать какое-либо изображение, вам необходимо открыть эту программу, а затем перейти по следующим параметрам: Меню – Файл – Открыть. После этого следует выбрать картинку, с которой вы планируете в дальнейшем работать.

Рисунок 1.

Таким образом, вы увидите исходные данные вашей фотографии, например: 2594 * 1944 px, размер 1,74 МГб. Разумеется, подобные цифры достаточно велики для того, чтобы они беспрепятственно могли размещаться на вашей web-странице. Поэтому, такие данные размеров и объёма следует значительно уменьшать, но только без потери качества самой картинки. Кстати, часто бывает необходимо обрезать края изображения, вырезать какой-то фрагмент, какого-то человека и т. д.

Рисунок 2.

Для того чтобы это сделать, нужно на панели инструментов выбрать: «Рамка». Затем, выделить нужный фрагмент и нажать на Enter.

Рисунок 3.

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

Рисунок 4.

Теперь у нас имеется графический файл с несколько изменёнными параметрами, а именно: 1576 * 1944 px, размером 934 Кб. Это намного меньше предыдущих данных, но всё равно недостаточно для его размещения. К примеру, мы знаем, что ширина этой картинки должна быть строго 300 px. Для достижения этой цели необходимо открыть вкладку «Изображение – Размер».


Рисунок 5.

В самой верхней графе «Ширина» следует выставить цифру 300 px. Во избежание видимых искажений необходимо обязательно поставить галочку напротив «Обязательные пропорции». Только после этого можно нажимать Oк.

Далее необходимо обратиться к вкладке «Файл – Сохранить для Web». Вы увидите, что открылось окно мастера сохранения рисунков.

Рисунок 6.

Здесь следует выбрать предпочитаемый формат изображения (JPEG, PNG или GIF). Таким образом, можно посмотреть на свою фотографию и визуально оценить её качество, а также увидеть размер будущей картинки.

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

Рисунок 7.

После выбора следует нажать на кнопку «Сохранить» (Save на рисунке 6) и указать дальнейший путь. В итоге, мы получаем оптимизированный графический файл, с необходимыми параметрами для его простой и лёгкой вставки на свою web-страницу.

Вам может оказаться полезной наша рекомендация: Я Блогер. Бесплатная онлайн школа Евгения Вергуса.

Таким образом, получившийся вариант в размере 300 * 370 px, 11 Кб, спокойно откроется абсолютно в любом браузере и при любом скоростном канале.

Стоит также отметить, что мы уменьшили картинку посредством программы Adobe Photoshop практически в 150 раз.

С помощью данного способа оптимизации графических файлов вы можете подготовить любые виды картинок для оформления своего сайта.

Андрей Краснокутский

Ещё статьи по теме:
Создаём сайт на Joomle.
Как создать сайт для скачивания (файлообменник).

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Оставьте комментарий к этой записи ↓

Ваше имя *

Ваш email *

Сообщение*

* Обязательные для заполнения поля
Внимание: все отзывы проходят модерацию.