Интернет, компьютеры, софт и прочий Hi-Tech

Подписаться через RSS2Email.ru

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

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

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

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

К примеру, вы нашли подходящую картинку в интернете, например на «Яндекс.Картинках», скачали данную картинку и получили изображение со следующими параметрами: вес 2000 Кб, размер 1200х800 px. Сразу понятно, что данное изображение будет отображаться, не очень правильно, за исключением тех случаев, если вы не собираетесь поместить её как фон сайта или на всю страницу вашего ресурса.

Во всех остальных случаях картинку придется уменьшить. Как это сделать? Тут нам на помощь придет графический редактор такой, например, как Фотошоп. С помощью стандартной функции мы можем уменьшить размер до того, который будет указан в коде страницы, к примеру, 120х80 px. Вместе с этим уменьшится вес изображения. Трудно сказать на сколько, но примерно до 100 Кб.

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

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

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

Всегда старайтесь сохранять изображения для сайта в формате «png». Этот формат наиболее подходит для интернета, так как имеет маленький вес и поддерживает прозрачность фона.

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

Автор: kalakamalaka, специально для xBB.uz, 01.05.2014


Предыдущие публикации:

Биржа долевых инвестиций SIMEX.

Последнее редактирование: 2014-05-01 06:56:35

Метки материала: сайт, изображения, дизайн сайтов, интернет, создание сайта, графика, разработка сайта, дизайн, оформление сайта, вебдизайн

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как     Антибот:
   

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.


© 2007-2017, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.