Оптимизация картинок для сайта — как?

Оптимизация картинок для сайта — как?

11 511 в Полезные советы 38

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

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

Прежде чем приступить к действиям давайте я сначала объясню что такое оптимизация картинки и зачем их нужно оптимизировать.

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

Теперь давайте разберемся зачем оптимизировать картинки для сайта. Представьте у вас на странице, скажем, в каком-либо обзоре имеется 10 картинок. В не оптимизированном варианте каждая картинка весит ~1 Мб. Т.е. представим, что эти картинки сняты на хорошей камере (хотя в реальности такие картинки весят еще больше). Я здесь беру по минимуму. Все 10 картинок мы загружаем на сайт. В итоге страница с обзором у нас будет весить как минимум 10 Мб. Как минимум потому что на сайте может быть и другая графика, относящаяся к дизайну. Вы представляете грузить страницу в 10 Мб. Я понимаю, что сегодня у каждого в доме имеется проводной интернет и Wi-Fi. А вы подумали о пользователях мобильного интернета? Мне кажется многие пользователи просто не дождутся загрузки страницы вообще.

Читайте также:  Заглушка для старых браузеров

Теперь давайте представим, что эти же самые картинки после оптимизации будут весить не 1 Мб, а 100 кб. Это в десять раз меньше. В итоге все картинки суммарно будут весить 1 Мб. 1 Мб куда быстрее загрузится на мобильном устройстве, чем 10 Мб.

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

Для примера я возьму любую картинку. Посмотрим на ее размер в оригинале.

Вес графического файла. Как оптимизировать картинку для сайта

Как видим из скриншота картинка весит 1,47 Мб. Это много. Нельзя ее на сайт такую грузить. Также сразу хочу обратить ваше внимание на разрешение картинки, т.е. ее размер. Он указывается в пикселях.

Разрешение графического файла. Как оптимизировать картинку для сайта.

Видим разрешение — 2560 x 1600 пикс. Это тоже очень много. Зачем загружать такую картинку, если она все равно будет уменьшена до ширины главного контейнера сайта. Обычно это не больше 1200 пикс. Если картинка должна открываться в лайтбокс, т.е. всплывать по клику, то разрешение должно быть не более 1200 пикс. Поэтому уменьшаем картинку в 2 этапа — сначала уменьшаем ее разрешение, а потом сохраняем для Web-устройств.

Откроем желаемую картинку в фотошоп: Файл -> Открыть. Далее уменьшаем размер картинки: Изображение -> Размер изображения.

Уменьшаем размер картинки в фотошоп

Далее, сохраним уже уменьшенный файл в формате JPG: Файл -> Сохранить для Web или жмем комбинацию клавиш Ctrl + Shift + Alt + S. В открывшемся окне выбираем формат — JPG и выставляем качество — Высокое — 60. Качество — 60 — это как раз то оптимальное соотношение качество/вес файла.

save-for-web-photoshop

Обратите внимание на вес файла после сохранения — 250,9 Кб. А было ведь 1,47 Мб, вес сократился чуть более в 5 раз.

Почему мы выбрали формат JPG, а не PNG или GIF? Формат JPG этот как раз тот формат при котором оптимизация графического файла будет максимальным. Но следует иметь в виду, что этот формат не поддерживает прозрачность. Для поддержки прозрачности следует использовать формат PNG, но вес файла в таком формате увеличивается в разы. GIF формат используют для небольших файлов (иконки) или для анимированных картинок.

Читайте также:  Как перейти с http на https?

Как оптимизировать несколько картинок за один раз?

Способ, что мы рассмотрели выше позволяет оптимизировать картинки по одному. Есть, конечно, в фотошоп функционал для массовой обработки, но я в нем так и не разобрался. Для массового изменения размеров картинок я использую небольшую программку — XnView MP. Я записал небольшой видеообзор по работе с этой программой, можете посмотреть. Особенно порадовала меня программа тем, что на выходе получались уже оптимизированные файлы для Web, причем еще оказалось, что XnView MP лучше оптимизирует картинки, чем фотошоп.

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

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

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

Всем пока. До новых встреч!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (6 оценок, среднее: 4,33 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории