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

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

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

размер изображения
Итак, откроем наш снимок в программе фотошоп. Я для примера выбрал вот этот кадр. В меню «изображение» выберем «размер изображения».Появится вот такое диалоговое окно. В нем мы видим что при разрешении 300 пикселей на дюйм размеры нашего снимка составляют 4608 на 3072 пикселя.Уменьшим размер, прописав вместо 4608 новую величину, ту, которая нужна вам. Например, у себя на сайте я часто использую снимки в 1000 пикселей по длинной стороне. Уменьшить размер снимкаПоэтому я ее и пропишу. Если вы используете снимки на сайте меньшего размера, например 800 пикселей или 600, то задавайте этот размер. Вписали? Жмем «ОК». Все, наша картинка стала меньше. Но и четкость нашего снимка при этом несколько ухудшилась. Теперь нам нужно ее немного повысить, главное сделать это достаточно мягко, иначе картинка станет плоской.Для этого создаем копию слоя, нажимая сочетание клавиш Ctrl + Jкопия слоя Следующий шаг – обесцветим копию слоя, сочетание клавиш Shift+Ctrl+UФильтр цветовой контрастК обесцвеченному слою применяем фильтр « Цветовой контраст» , указав значения радиуса в пределах 0,7- 0,9.Если у вас англоязычная версия фотошопа, то расположение этого фильтра «Filter — Other — High Pass».Режим наложения слоев перекрытие
Выберем режим наложения слоев «Перекрытие» , после чего объединим слои Сtrl+EПараметры изображения
Выберем в меню « Файл – Сохранить как- Сохранить как копию», и у нас появится такое диалоговое окно, с очень важной настройкой.Обратите внимание на «Параметры изображения» По умолчанию программа нам предлагает сохранить изображения, с качеством -12, наилучшим, вес конечной картинки при этом составит около 893 килобайт, что очень и очень для нас много.уменьшить качество до значения 5
Сдвинем полозок регулировки качества до 5, при этом вес картинки станет 214 Кб. Вот с этим пожалуй, можно и согласиться. Сохраним копию.Предлагаю сделать еще одну копию нашей картинки,сдвигая полозок качества влево, пока вес изображения не уменьшится до 100- 130 Кб. Потом вы откроете эти две копии в просмотровщике, и сравните их качество. Если разницы не заметите никакой,то смело используйте картинку с меньшим весом. Например, я часто использую на сайте изображения с весом от 50 до 200 Кб, иногда меньше, если размер снимка это позволяет. Лучше всего качество сохраняемой копии всякий раз подбирать индивидуально.Возможно этот способ покажется вам сложным. Но это не так. Попробуйте проделать это все один раз, и вы убедитесь, что все делается очень быстро.

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

Cтатьи на похожие темы

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *