Здравствуйте, меня зовут Андрей Игинов и сегодня я научу вас правильно оптимизировать изображения для сайта без потери качества. Благодаря чему ваш сайт будет загружаться быстрее. Что в свою очередь уменьшит процент отказов на сайте.
Предисловие
Думаю вы не раз попадали в такую ситуацию, когда заходишь на какой-нибудь сайт, а он грузится целую “вечность”. Наверняка это не меня одного сильно раздражает. Зачастую я просто ухожу с таких сайтов не дожидаясь их окончательной загрузки.
В курсе ли вы почему так происходит? Наверняка вы думали что это так сказать ваш интернет “тупит”. Да, иногда проблема может быть действительно в скорости вашего интернета. Но зачастую это не так.
Дело в том что многие владельцы сайтов, просто не придают значения оптимизации скорости загрузки сайта, а некоторые даже и не знают что этим нужно заниматься. Хотя это один из самых главных пунктов в поисковой оптимизации, который не слабо так влияет на процент отказов на сайте. Что в свою очередь влияет на вашу позицию в поисковой выдаче.
Полностью рассказывать о том как правильно оптимизировать скорость загрузки сайта, я не буду. Ибо это рассказ не на одну статью. Поэтому лучше напишу об этом в следующих статьях. На мой взгляд нужно начинать с малого и более понятного, а именно с картинок. К тому же это одна из самых главных причин медленной загрузки сайта. Все ведь знают что такое картинки и что у них есть “вес”. Никому не нужно объяснять что вес может быть как большим так и малым.
Так вот, чем больше вес изображения тем дольше оно будет загружаться. Из этого следует что для того что бы картинка загружалась быстро, она должна весить как можно меньше.
От чего зависит вес изображения? От количества пикселей. Пиксели это такие точки залитые определённым цветом. Чем их больше, тем изображение детализированнее. Изображения с повышенной детализацией имеют больший вес, чем изображения с пониженной детализацией.
Так как же уменьшить вес картинки? Ну исходя из того что я написал выше, ответ напрашивается сам собой. Чтобы сделать вес картинки меньше, необходимо понизить детализацию изображения. Как именно это сделать я сейчас покажу в виде инструкции.
Заранее могу сказать что будет довольно просто. По сути я просто возьму любое попавшиеся изображение из интернета и правильно его пересохраню. Делать я буду это в программе Adobe Photoshop 2020.
Погнали!
Находим случайное изображение. К примеру я буду работать с фотографией вот этой девчушки.
Обратите внимание на размер этого изображения – 3830 x 2558 пикселей. Он просто огромный. Нам ни к чему такой размер и я буду его уменьшать. Касательно того насколько уменьшать, то тут всё по ситуации и сильно зависит от структуры сайта, а также от места на сайте где вы будете использовать это изображение. Главное запомнить, что должен быть баланс между весом и качеством. Конечно если у вас блог о фотографии, то это отдельная ситуация и там другие правила.
Посмотрите кстати на вес – 1,27 МБ. Это тоже многовато, но за счёт того что мы уменьшим размер, вес довольно сильно измениться.
Открываем фотошоп.
Закидываем в него наше изображение. Можно простым перетаскиванием или через Файл -> Открыть.
Жмём следующее сочетание клавиш Alt + Shift + Ctrl + S или заходим в Файл -> Экспортировать -> Сохранить для Web. На фразу – (Старая версия) не обращаем внимание.
Открылось окно с настройками сохранения для web.
Для начала давайте уменьшим масштаб, что бы нам было удобно наблюдать за изменениями.
Заставляем картинку “похудеть” 🙂
И так, что нас тут интересует. Как мы поняли выше, проблема данного изображения в избыточном размере. Тогда давайте его уменьшим. Мы можем сделать это двумя способами. Первый способ это задать точное значение ширины или высоты.
Второй способ это задать значение в процентах. Я выберу второй способ.
Я заранее выяснил что конкретно для этого изображения чтобы получить оптимальный вес и качество. Необходимо в поле проценты написать 30%. Это я собственно и сделал.
Подбираем пресет
Выбираем так называемый набор, он же пресет, под названием “высокое качество jpeg”. Обратите внимание на поле качество. Этот набор понижает качество на 40%. В моём случае этого достаточно.
Выбираем интерполяцию
Далее я выберу “бикубическая, глаже”. Если у вас на изображении есть текст и вам важна его читабельность, то лучше выбирайте “бикубическая, чётче”.
Финалочка
Почти финальные аккорды, обратите внимание на вес и окончательный вариант настроек. После нажмите сохранить.
Открылось окно где нужно вписать желаемое название для изображения и жмякнуть по кнопке сохранить. Полученный результат можно загружать на сайт.
Поздравляю! Вы теперь знаете как правильно и без потери качества сохранять изображения для web. Благодаря чему ваш сайт будет загружаться быстрее и процент отказов на сайте уменьшится. Более подробно об оптимизации загрузки сайта, я расскажу вам в будущих статьях, а пока можете почитать о правилах продвижения сайта. Спасибо вам за то, что прочитали всё внимательно и до конца. Увидимся в следующих статьях. До скорых встреч.
