Оптимизация изображений - один из важных моментов в общей оптимизации сайта, на который многие не обращают внимания. А между тем, этот момент оказывает существенное влияние как на поведение пользователей на ресурсе, так и на ранжирование сайта.

Оптимизацию изображений можно рассматривать в 2 аспектах:

• уменьшение веса изображений для увеличения скорости загрузки страницы;
• как составляющая SEO - о птимизации — в этом случае кроме уменьшения веса изображениям присваиваются подходящие названия и прописываются альт теги.

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

Введение: Для чего уменьшать вес изображений на сайте

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

Статистические исследования показывают, что посетители ждут загрузки сайта порядка 3 секунд на стационарных компьютерах и 5 — на телефоне!

Если время ожидания превышает эти числа, то посетители уходят, и тогда уже не важно, на сколько красивы ваши изображения, никто их все равно не увидит.

Каким должен быть вес изображений?

Для различных ресурсов выбор веса изображения — индивидуальный параметр, для интернет-магазин с большим ассортиментом товаров допустимый вес не более 50-70 Кб. Для сайтов — портфолио, в которых ставка делается именно на красивые, качественные изображения - больше. Старайтесь придерживаться максимально возможного уменьшения веса картинок, а если большие изображения необходимы вашему ресурсу, лучше дайте посетителям просмотреть их в полном размере в новой вкладке.

Оптимизация изображений позволяет уменьшить их вес в разы без ощутимой потери качества.

Вес изображения измеряется в килобайтах (Кб) или мегабайтах (Мб), зависит от размеров в пикселях (высоты и ширины), количества деталей и от формата изображения.

Самый распространенный графический формат изображений формат JPG . Он используется повсеместно, его «понимают» все компьютеры, просмотрщики и графические редакторы. В этом формате публикуются графические материалы на сайте. Он не поддерживает прозрачности и анимацию, но для этого используются другие форматы. И говорить я сегодня буду именно об изображениях в формате JPG .

Для уменьшения веса изображения:

1. Определите размер изображения, которое будет отображаться на сайте.
   Не загружайте исходные картинки сразу. Если на сайте выводится изображение с размерами 500*600 пикселей, а загружается картинка в 3 раза большего размера, время загрузки будет такое же, как для исходной.
2. Уменьшите размеры.

к содержанию

1. Как уменьшить размер изображения в Paint

Начну с Paint , потому что это программа входит в стандартный набор ОС Windows и не требует установки дополнительных графических редакторов.

1. Открываем картинку в Paint и на верхней панели кликаем «Изменить размер» .

2. В открывшемся окне вводим необходимые размеры (можно изменять в процентах, можно в пикселях. По умолчанию в Paint стоит галочка «Сохранять пропорции» , это позволит уменьшить изображение без искажений), жмем «ОК» .

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

Теперь сравним исходное изображение и итоговое:

исходное изображение с размерами 2184*1456 пк и весом 735 Кб после уменьшения до 750*500 пк стало весить 142 Кб — вес уменьшился в 5 раз!

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

2. Как уменьшить размер изображения в P hotoshop

1. Открываем файл в редакторе, в верхней панели выбираем вкладку Image (Изображение) - Image Size (Размер изображения) .

2. В открывшемся окне можно менять параметр ы ширины (Width ) , высоты ( Height ) и разрешения ( Resolution ) . Причем, для сохранения пропорций должен быть отмечен флажок Сохранять пропорции ( Constrain Proportions ) , в этом случае при изменении одного из параметров, другие меняются автоматически.
Для публикаций графики в вебе разрешени е составляет 72пк/дюйм .

Вводим необходимые параметры и жмем «ОК ».

3. Сохраняем изображение.

Для сохранения изображения есть три варианта:

• Сохранить (Save (Ctrl+S ) );
• Сохранить как (Save As (Shift+Crtl+S ) );
• Сохранить для веб (Save for Web (Shift+Ctrl+Alt+S ) ).

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

При выборе Сохранения для Веб в открывшемся окне можно задать параметры:

• Формат (как говорили выше, jpeg );
• Качество (Quality ) - этот параметр изменяется от 0 до 100, соответственно при этом итоговое изображение будет лучшего или худшего качества.
  В окне слева от параметров на вкладках вы можете выбрать варианты отображения: Оригинал, Оптимизированное, 2 вари анта (одновременно отображается сохраняемое и итоговое изображение), 4 Варианта (отображаются оригинальное изображение, изображение с параметрами, которое вы задали, и 2 промежуточных).

  Я обычно выбираю 2 Варианта (

  2-Up ) — меняя качество можно одновременно видеть изменения в изображении и подобрать оптимальное для конкретного случая. Для статьи меня устроило качество 50, но это не постоянная величина, чаще я сохраняю изображения в пределах 60-75.

  Снизу под отображаемыми вариантами выводятся данные итогового изображения в зависимости от заданных настроек

  ;
• Отмечаем галочку Прогрессивный (Progressive ).
  И тоговое изображение будет загружаться не построчно, а за несколько подходов.
  Вам наверняка приходилось сталкиваться с такими случаями, когда вы видите не половину загруженной картинки, а сначала — полностью — плохого качества, потом — все лучше и лучше . Но с самого начала загрузки пользователь имеет представление о том, что на изображении. Вес прогрессивного может быть на несколько килобайт больше оптимизированного, но эта разница незначительна. Практика показывает, что прогрессивный джипег позитивнее воспринимается пользователями.
• Размеры.
  Если вы хотите изменить размеры изображения, они задаются в этом же окне снизу .

После выбора необходимых настроек жмем «Сохранить» (Save ) и получаем оптимизированную для сайта картинку.

Анализируем результаты оптимизации изображения в Фотошопе:

исходное изображение все то же 2184*1456 пк , 735 Кб , после уменьшения до 750*500 пк : при обычном сохранении 1 59 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) - 63,7 Кб . Сжатое изображение в есит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.

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

Если исходное изображение очень большое, не рекомендую уменьшать его сразу до нужного вам, лучше сделать это в несколько шагов, чтобы увеличить резкость оптимизированного .

3. Онлайн-сервисы по оптимизации изображений

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

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

2 . Kraken

Форматы.jpg, .png, .gif. Предоставляет 3 варианта оптимизации:

1. Сжатие с потерями Lossy - выбрано по умолчанию ;
2. Сжатие без потерь - Lossless ;
3. Expert - с выбором параметров оптимизации .

Загружаем файлы, которые надо оптимизировать.

По завершению оптимизации сервис выдает отчет о результатах. Для нагрузки файла жмем на кнопку «Do w nload File » - уменьшенная картинка открывается в соседней вкладке.

Если результат устраивает, сохраняем изображение (клик на фото правой кнопкой мыши — Сохранить как )

Простой интерфейс, результат оптимизации можно посмотреть сразу же. Работает только с форматом jpeg.

Сервис сжатия изображений в JPG, PNG и GIF- форматах. Имеет ограничени е по весу в 500 Кб и количеству 20 одновременно.

4. Уменьшение размера с помощью плагинов сжатия изображений

Все вышеперечисленные методы актуальны, когда изображений на сайте не много. Если же ресурс содержит огромную базу изображений, то не обойтись без плагинов сжатия изображений. Существует множество хороших плагинов для различных CMS, и платных, и бесплатных, они используют разные алгоритмы сжатия и выдают разные результаты. Главное, подобрать подходящий для вашего ресурса.

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

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

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

А еще — задавайте вопросы, пишите в комментариях, оказалась ли статья полезной. Если да, ставьте лайки и делитесь с друзьями.
Удачи и хорошего настроения.

1. Установите Фоторедактор Movavi

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

2. Загрузите картинку в программу

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

3. Уменьшите фото

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

4. Сохраните картинку

Большие файлы можно уменьшить, если сохранить их в формате JPEG и настроить качество изображения. Нажмите кнопку Сохранить в правом нижнем углу, затем в списке Тип файла выберите JPEG и нажмите ссылку Качество . Потяните ползунок влево, чтобы уменьшить размер фото. Сильное сжатие отразится на качестве фотографий, поэтому мы рекомендуем выставить качество не ниже 90%. Затем нажмите кнопку Сохранить .

Файлы размером менее 1 000 Кб (около 1 Мб) подойдут для отправки по почте или загрузке в соцсети.

Однако даже самые удачные кадры не проходят проверку на любимых сайтах: размер или вес изображения превышает максимальный предел. И пользователи штурмуют поисковик, пытаясь выяснить, как уменьшить размер jpg-файла.

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

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

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

Размер фотографии или изображения - это физическое проявление картинки, то есть размер в сантиметрах, миллиметрах, дюймах и т.д.

Разрешение изображения - это четко определенное количество пикселей на один дюйм. Измеряется линейно - число точек в одной прямой линии.

Данные о разрешении изображения предоставляются производителями камер и фотоаппаратуры: от 320х240 до 7680х4800. Чем выше разрешающая способность камеры, тем четче и качественней будут фотоснимки или видеоклип.

Стоит отметить, что при изменении физических данных изображения - размера - число пикселей останется постоянным, но они растянутся на большее пространство. Таким образом, четкость картинки будет потеряна. Уменьшая размер фото, но не меняя разрешение, можно сделать снимок более качественным.

Как уменьшить размер JPG-файла?

Однако как изменить файл, не прибегая к программам? Один из самых легких ответов на вопрос о том, как уменьшить размер кб файла *.jpg - привлечь на помощь ресурсы, проводящие изменение изображения онлайн. Но не стоит забывать, что на таких сайтах обычно размещается невероятное количество рекламы. Почти каждый клик ведет на сторонний ресурс.

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

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

Фотошоп: быстрый способ изменить размер изображения

Один из самых популярных графических редакторов - Фотошоп - простыми пользователями чаще всего используется для наложения фильтров и изменения размеров фотографий и изображений. У многих даже не возникает вопросов относительно того, как как уменьшить размер файла jpg в Фотошопе.

Для уменьшения физических показателей файла необходимо для начала открыть его в графическом редакторе. Далее открыть меню «Изображение» и выбрать пункт «Размер изображения». Также для вызова диалогового окна можно использовать сочетание клавиш Alt+Ctrl+I.

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

Следующий шаг - сохранение изменений. Сделать это можно, выбрав в меню «Файл» пункт «Сохранить как» или использовать горячие клавиши Ctrl+S. Далее графический редактор предложит выбрать параметры: формат и качество, или иначе, вес изображения.

Изменение размера картинки в Paint

Владельцы персональных компьютеров, на которых не установлен графический редактор, могут прибегнуть к помощи, предустановленной в операционной системе Windows, программы - Paint.

На вопрос о том, как как уменьшить размер файла jpg в Paint, ответить просто. В первую очередь необходимо открыть файл в программе. Далее выбрать в выпадающем меню пункт «Изменить размер и наклонить» или же воспользоваться сочетанием клавиш Ctrl+W.

Появившееся окно предложит изменить или наклонить изображение. Физические параметры можно менять: по горизонтали или вертикали. Для достижения лучшего качества рекомендуется отметить пункт «Сохранять пропорции».

И последний шаг - сохранение получившегося изображения.

Изменение разрешения в Фотошопе

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

Для того чтобы изменить вес или разрешение фото в Фотошопе, необходимо открыть файл в графическом редакторе и кликнуть на меню «Изображение». Далее найти пункт «Размер изображения».

Ниже уже известных параметров, определяющих ширину и высоту, находится строка «Разрешение». Этот параметр измеряется в пикселях на дюйм, или в пикселях на сантиметр.

Изменение веса фото в Paint

К сожалению, во встроенную в Windows программу Paint не была включена такая функция, как «уменьшить вес файла *.jpg, сохранив размер». Этот редактор позволяет лишь менять размер фотографии и ее наклон.

Однако если исходный файл имеет отличное от JPG расширение, то еще можно найти лазейку и изменить размер изображения. Дело в том, что такие форматы как BMP, RAW и другие, отличаются большим весом.

Чтобы изменить размер, достаточно открыть такое изображение в редакторе и, выбрав в меню пункт «Сохранить как», изменить формат на JPG. В большей части случаев вес фотографии сразу снизится в несколько раз.

Здравствуйте, на связи Владислав. И сегодня я Вам расскажу, как уменьшить размер файла JPG .

Для выполнения данной задачи — нам понадобится программа Paint версии 4.0.5. Вот ссылка на данную программу — .

Также ниже на этой странице есть видео, поэтому если не хотите читать, переходите сразу к просмотру видео.

Надеюсь эту программу Вы уже установили и мы переходим к следующему действию. Заранее я уже подготовил файл, его размер 305 kb. Именно с этим файлом я и буду работать:

В начале естественно открываем файл в программе Paint.

Посмотрите как это выглядит (на скриншоте ниже видно, что при качестве 75% — размер файла jpg 115.1 кб:

Хочу сказать, что при 75%, качество картинки сильно не меняется, а вот при дальнейшем движении ползунка в сторону уменьшения качества — изображение станет более «расплывчатым» хуже. Здесь уж Вы сами определите, что для поставленной задачи важнее — размер файла или качество фото.

Затем нажимаем — Ок и можно сравнивать исходный файл с полученным.

Как уменьшить файл JPG в Фотошопе

В фотошопе после открытия файла, нажимаем — Файл — Сохранить для Web и в открывшемся окошке, в правом верхнем углу, меняя значение — низкое качество или среднее, высокое качество получаем уменьшение размера файла jpg.

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

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

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

Способ 1: Adobe Photoshop

Наиболее популярным редактором для изображений является продукт компании Adobe — Photoshop. С его помощью можно производить большое количество различных манипуляций над изображениями. Но мы попробуем быстро уменьшить вес файла JPG при помощи изменения разрешения.

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

Этот вариант является не менее эффективным, чем первый, но выполняется несколько быстрее. А вообще, гораздо лучше объединить первые два способа, тогда изображение уменьшится уже не в два-три раза, а в четыре-пять, что может быть очень полезно. Главное — помнить, что при уменьшение разрешения сильно портится качество изображения, поэтому сжимать его надо с умом.

Способ 2: Light Image Resizer

Неплохой программой для быстрого сжатия файлов JPG является Image Resizer, которая не просто имеет приятный и дружелюбный интерфейс, но и сама дает подсказки по работе с программой. Правда есть и минус у приложения: бесплатно доступна только пробная версия, которая дает возможность изменять лишь 100 изображений.

Способ является довольно удобным, так как программа выполняет все, что нужно и даже немного больше.

Способ 3: Riot

Еще одна программа, которая признана многими пользователями очень удобной и простой в использовании, это Riot. Действительно, ее интерфейс очень понятен и прост.

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

Способ 4: Диспетчер изображений от Microsoft

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

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

Способ 5: Paint

Если сжать изображение надо быстро, а возможности скачивать дополнительные программы нет, то придется воспользоваться предустановленной программой на Windows — Paint. С помощью него можно уменьшить размеры картинки, из-за чего уменьшится и ее вес.

Использовать для уменьшения веса изображения программу Paint стоит только в самых крайних случаях, так как даже после такого же банального сжатия через Photoshop картинка остается более четкой и приятной на вид, чем после редактирования в Paint.

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