Вы когда-нибудь задумывались, почему на некоторых сайтах фотографии и изображения грузятся быстрее, а на других очень долго или вообще не грузятся?
- Конечно, в первую очередь на это влияет скорость вашего интернета.
- Второй фактор непосредственно относится к созданию сайта — вес изображения, размещённого на сайте.
Даже простой сайт визитка предполагает тщательную проработку графики не только в эстетическом плане, но и в технологическом. Нужно определиться с форматами, качеством и весом изображений.
При разработке сайта вы наверняка заранее подыскиваете подходящие изображения или делаете их сами с помощью какого-либо графического редактора. В дальнейшем при размещении фото или изображения на вашем ресурсе важно учитывать два основополагающих фактора:
- вес картинки в килобайтах;
- размер в пикселях.
К примеру, вы нашли подходящую картинку в интернете, например на «Яндекс. Картинки», скачали данную картинку и получили изображение со следующими параметрами:
- вес 2000 Кб,
- размер 1200х800 px.
Сразу понятно, что данное изображение будет отображаться, не очень правильно, за исключением тех случаев, если вы не собираетесь поместить его как фон сайта или на всю страницу вашего ресурса.
Во всех остальных случаях картинку придётся уменьшить. Как это сделать?
- Здесь нам на помощь придёт графический редактор — такой, например, как Фотошоп. С помощью стандартной функции мы можем уменьшить размер до того значения, которое будет указано в коде страницы, к примеру, 120х80 px. Вместе с этим уменьшится вес изображения. Трудно сказать на сколько, но примерно до 100 Кб. Такое изображение уже будет выглядеть более правильно, на нем не будет присутствовать эффект зерна и не будет видно пикселей. Так как реальный размер в пикселях будет соответствовать указанному в коде. То же самое нужно учитывать, когда вы создаёте изображение в графическом редакторе с нуля. Нужно заранее указывать необходимый размер в пикселях.
- Так же рекомендуется при создании изображения оставлять прозрачность фона, это очень удобно. Представьте если изображение круглое, фон изображения белый, а вот сайта — синий. В итоге у вас получится круг в квадрате на синем фоне, вместо необходимого круга на синем фоне. Оставив прозрачный фон, вы избежите этой проблемы.
- Всегда старайтесь сохранять изображения для сайта в формате «png». Этот формат наиболее подходит для интернета, так как имеет маленький вес и поддерживает прозрачность фона.
При оформлении фона старайтесь пользоваться неразрывными фонами. Т.е. фонами, которые состоят из одной повторяющейся картинки. Такие фоны будут грузиться намного быстрее чем одна большая картинка на заднем плане. К тому же одна большая картинка вряд ли будет одинаково выглядеть на разных разрешениях экрана.
