Полезное        21 мая 2014        1655         23

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я надеюсь все справились с задачей загрузки изображения в окно программы Adobe Photoshop и теперь самое время рассмотреть, как можно уменьшить вес картинки без потери качества. Для примера я взял одну из фотографий, вес которой составляет 1,27 Mb (Мегабайт):

как сжать изображение без потери качества-2

на этом фото я и буду показывать сжатие. Первым делом я советую вам обратить внимание на размер изображения. Если взять к примеру любой сайт, то ширина шаблона имеет определенные ограничения. Шаблон, используемый на моем  блоге, имеет ограничение по ширине 600 px (пикселей), а фото, которое я собираюсь загрузить — 7139 px:

как сжать картинку без потери качества-1

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

Я установил в поле «Ширина» максимальное значение 600 px. Теперь мне нужно сохранить изображение на своем ПК (персональном компьютере). Для этого я перехожу во вкладку «Файл/Сохранить для Web устройств». Обязательно выбирайте именно этот пункт, что позволит максимально оптимизировать изображение для загрузки в сеть:

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

Перед вами появится окно с настройками, где вы можете наблюдать, как изменился размер картинки:

как уменьшить вес изображения без потери качества-4

В моем случае ее вес сократился до 30,07 K (Килобайт), это почти в 35 раз меньше изначального размера! Причем качество изображения не изменилось, по крайней мере, для человеческого глаза оно не заметно. Но это еще не все!

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

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

Все будет зависеть от того, какого именно качества вы хотите добиться. Здесь я вникать в подробности не буду, думаю, разберетесь сами без особого труда. Поиграйте с настройками, поэкспериментируйте и таким путем можно добиться оптимальных параметров «Размер/Качество».

После того, как все настройки будут подобраны, жмем кнопку «Сохранить», указываем путь, куда будет сохранено изображение, и снова жмем «Сохранить». На этом сжатие картинки окончено. В итоге вес моей картинки получился 15,19 K (Килобайт). Такие картинки будут загружаться в считанные секунды и ваш хостер долгое время не сможет вас уличить в чрезмерном использовании виртуально пространства.

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

—>Подписаться на обновления блога<—

Как вам статья? А каким образом вы сжимаете изображения без потери качества? Поделитесь своими секретами в комментариях к данному посту!

С уважением, Николай Коротков

Обсуждение: 23 комментария
  1. да, именно по такому пути теперь и перелопачиваю все изображения на своем блоге, поскольку пэйдж спид инсайтс ругается на мои картинки. в свое время накидал их как попало. посмотрим, как повлияет на скорость загрузки страниц!:smile:

    [Ответить]

    Ответить
  2. Я пользовался RIOT, но там в 2-3-4 раза, а никак в 35. Спасибо!
    А вот всем Adobe Photoshop CC 14 Portable , без установки на комп. samoychka.ru/portable/adobe-photoshop-cc-14-portable.html ➡

    [Ответить]

    Александр Иванович

    Александр!
    Я тоже пользуюсь портабельной версией Portable_Adobe_Photoshop_CS5_Extended_Final_RUS.
    До этого Photoshop_CS4 была установлена на компьютере.
    Ох и намучился я с ней!Photoshop_CS5
    Как месяц проходит, так нужно переустанавливать — требует деньги. ❓

    [Ответить]

    Ответить
  3. Евгений:

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

    [Ответить]

    Ответить
  4. Крутила картинку и так, и этак… «Застряла» на выборе скорости загрузки. Нельзя ли как-то поподробнее по ней «пройтись»? Как тут разобраться в килобитах и секундах — что на что влияет?

    [Ответить]

    Николай Коротков

    Елена, 1 Mb = 1024 Kb. Чем меньше весит изображение (Kb), тем быстрее будет загружаться. Получается, что вес картинки влияет на скорость ее загрузки.

    [Ответить]

    Елена Картавцева

    «Разжуйте», пожалуйста на примере .
    1-й вариант — 17 сек,56,6 кбит/сек, но вот второй вариант этой же картинки — 1 сек, 1,5 мбит/сек.
    Что тут правильным будет? 😳

    [Ответить]

    Николай Коротков

    Елена, ориентируйтесь на кбит/сек. Первый вариант в вашем случае будет правильным.

    [Ответить]

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

    [Ответить]

    Александр Иванович

    Ирина!
    А может предупреждение хостинга о повышении тарифа не связано с большим «весом» картинок? 😐

    [Ответить]

    Ответить
  6. Николай!
    Обычно я сжимаю картинки и фото в штатной программе «Диспетчер рисунков Microsoft Office», которая в среднем сжимает в 25 раз. но о качестве не берусь судить. А вот в Adobe Photoshop надо попробовать сжать и сравнить результаты.

    [Ответить]

    Максим

    Я тоже сжимаю картинки в штатной программе «Диспетчер рисунков Microsoft Office», но буду пробовать в Ф/Шопе, так как вы меня переубедили!

    [Ответить]

    Ответить
  7. Николай!
    Сегодня сравнил одну и ту же картинку сжатую в программе «Диспетчер рисунков Microsoft Office» и в Adobe Photoshop.
    В Adobe Photoshop фото получилось более сжатое и качественное.

    [Ответить]

    Ответить
  8. Павел:

    Спасибо за статью Николай. Я на свой ресурс загружаю фотографии со скругленными углами и вес таких фото получается уменьшить до 300 kb меньше не получается, так как сохраняю в формате png-8 с поддержкой прозрачности. Если сохраняю в формате jpeg, то после загрузки на сайт картинка отображается с острыми краями.

    [Ответить]

    Ответить
  9. Максим:

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

    [Ответить]

    Николай Коротков

    Максим, всегда пожалуйста! Рад, что материал для вас оказался полезным!

    [Ответить]

    Ответить
  10. Очень полезный и актуальный материал. Беру на заметку.

    [Ответить]

    Ответить
  11. Да, пожалуй это самый эффективный способ сжать картинку. Но когда таких картинок 5-7 в статье, а в день публикуешь 3-5 статей, то такая обработка жутко тормозит рабочий процесс.
    Поэтому я чаще пользуюсь просмотрщиком от Microsoft Office 2010 или, если мне нужно сжать 20-30 картинок за раз, тогда — FastStone Reizer, что-то вроде того, в названии могу ошибиться, по памяти пишу.

    [Ответить]

    Ответить
  12. Всегда делаю именно так, хотя есть ещё много специальных программ для уменьшения веса. 🙂

    [Ответить]

    Павел

    Я изменил вес картинки с 45 кб до 24 кб. Но я считаю, что 24 кб — это тоже много для страницы сайта. А если на странице будет 10 таких изображений, вдруг страница длинная? То это уже 240 кб, не считая текста и прочего.
    Есть еще какие-то способы сожмать картинку? 😮

    [Ответить]

    Ответить
  13. Побежал сжимать изображение. Спасибо большое автору.

    [Ответить]

    Ответить
  14. У меня все прекрасно получилось,просто и доступно, Вам огромное спасибо за полезную информацию!

    [Ответить]

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

    [Ответить]

    Ответить

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

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

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.