Оптимальные изображения для сайта

Для любого сайта немаловажным фактором будут оптимизированные картинки (как оптимизировать несколько изображений в один клик), которые вставляются в запись и присутствуют на странице. Скорость загрузки страниц сайта в большем случае зависит от тех изображений, которые имеются на сайте. Текст занимает ничтожную долю объема страницы сайта, а картинки утяжеляют сайт в десятки раз. Поэтому значимо найти оптимальные изображения для вставки их на сайт, независимо от того, загружаете ли вы картинки из интернета или создаете свои. На первом месте по оптимизации будут стоять такие характеристики как формат, размер и разрешение изображения. В основном эти три параметра и будут составлять общий вес картинки, который скажется на скорости загрузки, удобности для пользователя и, соответственно на СЕО-продвижении сайта. Сами двумерные изображения бывают растровые и векторные. Для обычных пользователей - картинки и фотографии в основном и есть растровые изображения. 

 

Размер изображения.

Картинки в цифровом мире интернета, техники для визуализации двумерных объектов, а также во всех программах для обработки изображений, то есть созданных картинок или фотографий измеряются в пикселях. Пиксель -это принятое сокращение pixel, pel от pictures elements - элемент картинки, единица измерения квадратной(прямоугольной), многоугольной или круглой формы. Пиксель задается яркостью, цветом, прозрачностью.

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

В интернете нам нужно не максимальное качество, а оптимальное, то есть приемлемое. Пользовательских эталонов множество, поэтому трудно указать какое-то определенное значение. Здесь важную роль играет сама страница сайта, и картинка идет, как элемент ее дизайна. Поэтому, экпериментируйте с несколькими вариантами, насколько органично они впишутся в материал. Желательно придерживаться двух-трех размеров. Чтобы создавался своеобразный рисунок, структура страницы сайта. Не вставляйте картинки в текст хаотично, то слева, то справа, то в центре, то большие, то маленькие, то средние, то прямоугольные, то квадратные, с рамками или без, на фоне или без него. Этим вы испортите эстетическое впечатление от восприятия вашего сайта. Представьте себя на месте пользователя перед экраном монитора. Ему очень нужно видеть несвязанную с текстом картинку в пол-экрана? Или изображение мчащегося автомобиля в статье о методах скорочтения, к примеру? Исключения могут составлять тематические сайты, где изображение нужно пользователю наиболее детальным.

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

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

Важно:

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

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

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

Разрешение изображения.

Чем выше, тем картинка лучше(для собственного просмотра на большой плазме). Чем выше, тем больше вес изображения в байтах. Измеряется в точках на единицу площади (дюйм) - dpi. Или пикселей на дюйм - ppi, и другие. Для незахламления мозгов широкая публика пользуется понятным всем определением dpi Одним из последних мировых стандартов ранее хорошего качества является разрешение в 300 dpi. Что это значит? Что в каждом дюйме(2.54 см) содержится 300 точек. Принятое разрешение в 300 dpi достаточно для рассматривания изображения с расстояния ~ 45 см. Обычная фотография в 9*12 см с этим разрешением в исходящем варианте должна быть 9/2.54 и 12/2.54 = 3.5*4.7 дюймов. Умножаем на 300. Итоговый размер исходного отпечатка должен быть не менее 1050*1410 пикселей для отображения без потери качества. При нехватки пикселей, монитор их дорисует сам автоматически или по специально заданному алгоритму. Поэтому изображение 1050*1410 при выводе в размере, например 12*15 - часть пикселей будут нарисованы. Исходя из вышеизложенного мы можем определиться с размером и разрешением картинки с минимальным или максимальным качеством. Для интернета необходимо оптимальное - то есть минимизация веса и потери качества. Чаще всего пользователям для лучшей визуализации достаточно разрешение в 300 dpi для средних и больших картинок, и 72 dpi для иконок, маленьких изображений, фавиконов в формате png. Варьировать в этих пределах вы можете как угодно, приблизительно понимая, что вы хотите от картинки  растровой графики для пользователя: привлечь внимание, показать детали или гармонично(ненавязчиво!) вставить в текст, как элемент декора.

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

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

jpg - обычная картинка, состоящая из одного слоя. Достаточно хорошее для фотографий и различных картинок.

png - при выводе, эта картинка позволяет сохранить прозрачный и полупрозрачный фон. Если png картинку сохранить в jpg, то нам выведется картинка на белом или заданном цветном фоне, но не прозрачном.

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

Пример: изображение в форматах jpg, gif, png, размеры исходного файла - 3456*4083, разрешение 300dpi - вставлено в виде миниатюры 150*150, а теперь смотрим вес файлов: jpg - 6,72 МБ, gif - 7,33 МБ, png - 17,9 МБ

  

Смена разрешения на 72 dpi, вес в jpg - таким же, на первой картинке слева. А вот если изменить размер исходного изображения раза в три на 1301*1537, то вес составит 304 КБ, на втором снимке справа.

                                

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