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

Оптимизацию изображений можно рассматривать в 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, и платных, и бесплатных, они используют разные алгоритмы сжатия и выдают разные результаты. Главное, подобрать подходящий для вашего ресурса.

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

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

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

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

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

Я не совсем понимаю стремление некоторых рассказчиков, которые навязывают вам, для решения такой элементарной задачи устанавливать монструозный Photoshop с обилием различных плагинов и фильтров. Сделать простую обрезку изображения и попробовать ужать его в размере можно стандартными средствами Windows — Paint например. Конечно с ним мы потеряем в качестве, но что мешает рассмотреть другие способы? — Вам будет из чего выбрать.

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

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

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

Изменяем размер файлы JPG используя Paint

Чтобы подправить разрешение файла JPG нам совсем необязательно устанавливать различные программы (камень в огород тем, кто рекомендует установить фотошоп для сжатия картинок) — все уже есть в стандартных приложениях от Windows, думаю все знакомы с Paint.

Нам нужно открыть в нем изображение и пройтись по всем пунктам по порядку, как указано на картинке ниже. В появившемся окне вы можете смело экспериментировать (менять в процентном соотношении или задать фиксированные размеры в пикселях) , только позаботьтесь чтобы стояла галочка напротив «Сохранить пропорции» — иначе можете получить слишком растянутое или сплюснутое изображение. Для отправки по электронной почте, чтобы даже на самом большом мониторе все смотрелось хорошо, будет достаточно 1080 пикселей по горизонтали (картинка ниже кстати имеет примерно 730 пикселей по ширине)

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

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

FileOptimizer — Убираем лишнее на фото

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

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

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

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

Закинул всю папку в программу, нажал «Optimize all files» и оставил программу работать. К сожалению, я не засек сколько длился сей процесс, да и у вас оно будет зависеть от производительности установленного в вашей системе процессора.

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

Так как программа бесплатная, то и качать я вам ее рекомендую только с официального сайта, кстати там присутствует версия не требующая установки — именно такой вариант я и использовал в текущем обзоре.

Как уменьшить размер файла JPG онлайн — мой выбор

На моем месте было бы преступлением проигнорировать самый лучший онлайн сервис для изменения размера JPG файлов (есть поддержка сжатия PNG) . Все картинки на этом сайте сжаты именно через этот сервис. Для начала работы просто перейдите по ссылке:

Тут присутствуют некоторые ограничения, например за раз можно обработать не более 20 файлов и их размер не должен превышать 5 мегабайт. Можете просто перетянуть изображения в окно браузера и дождаться окончания обработки. Тестовый файл с изображением моего рабочего стола, сохраненный через Paint, смог уменьшиться в 2 раза без видимой потери в качестве — я считаю что это очень достойный результат.

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

Существует и плагин для Фотошопа от TinyJPG для сжатия картинок на компьютере. Однако, он как и все хорошее — стоит денег, как кстати и сам PhotoShop.

Выводы о сжатии JPG файлов

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

P.S. Теперь вы знаете как уменьшить размер файла JPG — это целых 3 эффективных и простых способа. До недавнего времени я не доверял сторонним ресурсм и всегда искал программы на компьютер для решениях конкретных задач, но попробовав tinyjpg я пересмотрел своим взгляды и подход. Надеюсь вам тоже доставит удовольствие использовать онлайн инструменты в вашей и работе, и вы разрешите им сохранить заветные килобайты пространства.

Уменьшить размер и вес фото проще простого, и для этого не понадобятся никакие специальные онлайн сервисы. Если вам нужно уменьшить размер одной фотографии, то можно обойтись программой предустановленной в Windows. С уменьшением размера большого количества фото справиться бесплатная программа FastStone или можно воспользоваться Adobe Photoshop и Lightroom.

В каких случая может понадобиться уменьшить размер фото:

• фото предназначены для загрузки на сайт (например, для блога, статьи, фото-отчёта с поездки) и файлы нужно уменьшить до оптимального размера;
• необходимо отправить фото по почте (высокое качество фото не требуется);
• есть желание отправить фото на конкурс, где требуется предоставить файлы определённого размера.
• нужно загрузить фото на сайт, на котором ограничения по размеру фото (в пикселях - px) или весу файла (в мегабайтах - МБ);

1 | Способ уменьшить размер фото в Paint (предустановлен в Windows).

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

Откройте фото в программе Paint (кликнув правой кнопкой мыши по фото и выбрав из списка нужную программу - Paint), в верхней панели нажмите на Resize (изменение размера). В открывшемся меню можно выбрать проценты или пиксели.

2 | Способ уменьшить размер фото в программе Adobe Photoshop.

Чтобы изменить размер фото Фотошопе, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) Image size (Размер изображения). Следите за наличием галочки в поле "сохранить пропорции". Если нужно уменьшить размер большому количеству фотографий, то стоит создать Action (Действие) и потом использовать его при помощи автоматической пакетной обработки (это тема для отдельной статьи и если вы не знаете, как это сделать, то читайте дальше - будет более простой способ уменьшить фото).

В Фотошоп есть ещё инструмент - сохранения файлов для Web (подразумевается для сайтов в интернете), где в одном окне можно сразу изменить не только размер фото, но и степень и тип сжатия jpg, удалить метаданные и оценить результат (в том числе увидеть вес конечного файла). Чтобы открыть этот инструмент Photoshop, нужно нажать комбинацию клавиш Alt+Shift+Ctrl+I или зайти в меню File (Файл) Save for Web (Сохранить для Web).

3 | Способ уменьшить размер нескольких фото в программе Adobe Lightroom.

В программе Лайтрум можно не только быстро обрабатывать большое количество фотографий. В ней есть очень много полезных инструментов и уменьшение размера фото - лишь один из них.Чтобы изменить размер фото в Lightroom, нужно выделить файлы, нажать кнопку Export и настроить параметры в полях Image Sizing.

4 | Способ уменьшить размер фото с помощью бесплатной программы.

Удобная бесплатная программа, которая умеет быстро уменьшать любое количество фото - FastStone Photo Resizer. Её можно скачать на сайте разработчика (faststone.org) и пользоваться совершенно бесплатно. Чтобы открыть меню для изменения размера фотографий, нужно поставить галочку "Use advanced options" и потом нажать на появившуюся кнопку "Advanced options".

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

Всем доброго времени суток!

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

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

Как уменьшить вес картинки без потери качества

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

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

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

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

Способ №1. Уменьшение величины картинки в программе Paint.NET

Paint – это простейшая стандартная программа для редактирования растровых и векторных изображений. Доступна для всех пользователей операционных систем «Виндовс» .

Основные инструменты, доступные в приложении:

• добавление надписей;
• заливка элементов;
• обрезка, вставка;
• копирование фрагментов и прочее.

После изменения ширины и высоты фото, меняется размер.

Следуйте инструкции, чтобы уменьшить величину изображения Paint:

• Нажмите на нужную картинку правой кнопкой мышки и выберите пункт Изменить. Фото автоматически откроется в программе Paint в режиме редактирования;

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

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

Способ №2. Изменение размера в Фотошопе

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

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

• Измените параметры размерности изображения (ширину и высоту), также убедитесь, что стоит галочка возле чекбокса Соблюдение пропорций фото;

• Попробуйте уменьшить фото на 10-15 процентов. Таким образом уменьшиться и его конечный вес.

Способ №3. Использование программ пакета MS Office

В тестовом процессоре ворд версии 2010 года и более ранних версиях присутствует функция сжатия картинок. В новейших версиях программы эту функцию убрали.

Добавьте картинку на страницу документа, затем в появившейся вкладке выберите «Открыть с помощью», и затем приложение MS Picture Manager.

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

Сохраните получившиеся изменения.

Важно! После сжатия может ухудшиться качество иллюстрации.

Способ №4. Использование онлайн сервисов

Отличным веб-сервисом для работы с фото является ресурс Irfanview или одноименная программа . Он позволяет работать с огромным количеством различных форматов картинок.

Чтобы уменьшить размер, можно открыть меню изображения и отредактировать его высоту и ширину.

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

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

Это окно появляется в процессе сохранения конечного изображения.

Способ №5. Уменьшение размера на Mac устройствах

Для пользователей Mac OS доступно бесплатное приложение для работы с картинками и фото под названием iPhoto.

Если программа не установлена на вашем устройстве, скачайте ее с официального магазина. Это совершенно бесплатно.

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