Материал принадлежит автору сайта https://blogiseo.ru/
Разместил
Николай Коротков
Дата: 21 мая 2014 в 11:17
Всем доброго времени суток!
Сегодня я продолжу тему работы с изображениями, и из этой статьи вы узнаете о том, как уменьшить вес картинки (изображения, фото) без потери качества.
Существует огромное множество способов сжать изображение и сделать его вес максимально подходящим для своих нужд, что облегчает задачу активным пользователям этого направления.
Как уменьшить вес картинки без потери качества
Для сжатия картинок в основном используются специальные программы и различные онлайн-сервисы. В этой статье речь пойдет об одном из таких способов, а именно об уменьшении веса картинки при помощи программы Adobe Photoshop. Для продвинутых пользователей ничего нового я не расскажу, а вот для новичков статья будет очень даже полезной.
Для чего уменьшать вес изображения
В первую очередь тема будет актуальна для большинства сайтов и блогов, авторы которых вставляют в свои посты изображения. Особенно это касается картинок, сделанных при помощи фотоаппарата. Современные фотокамеры способны делать качественные и яркие снимки, вес которых очень велик.
А если вы ведете фото блог или блог на кулинарную тему, где помимо рецептов делитесь со своими посетителями подробными фото отчетами по приготовлению различных вкусняшек, то под одни только картинки необходимо очень много виртуального места. Ребята, которые ведут свои блоги, должны понимать, что чем больше весит изображение, тем дольше оно будет загружаться (открываться) и занимать место, выделенное хостером.
Дело в том, что каждый хостинг имеет ряд тарифов, где оговаривается виртуальное пространство, предоставляемое в аренду пользователю. И если лимит по пространству будет исчерпан, вам придется докупать дополнительные гигабайты или переходить на более дорогой тариф, что и в первом и во втором случае влечет за собой никому не нужные затраты.
Следующим аргументом, выступающим в пользу уменьшения веса картинок, является ранжирование сайта поисковыми системами. Делая обход по сайту и анализируя его, поисковые роботы учитывают скорость загрузки страниц. И в случае медленной их загрузки существует вероятность понижения сайта в поисковой выдаче. Я даже писал ряд статей на тему снижения нагрузки на хостинг и ускорения сайта, рекомендую вам с ними ознакомиться.
Это основные доводы, призывающие отнестись к теме поста серьезно. И даже если у вас нет своего собственного ресурса, статья в любое время может оказаться для вас полезной. Наверняка вы сталкивались с такой проблемой, когда какой-либо сервис, форум или портал требуют загрузить изображение определенного веса и размера? Как быть в этом случае? Давайте разбираться!
Итак, что касается этого способа сжатия картинки, вам понадобится приобрести и установить на свой компьютер редактор Adobe Photoshop. Программа платная, но если хорошенько поискать... В общем, не мне вам объяснять, я думаю, разберетесь.
Открываем программу фотошоп на своем компьютере и загружаем в окно программы изображение, требующее уменьшить вес. Как создаются и обрабатываются картинки в фотошопе, я уже рассказывал в посте «Как сделать изображение для статьи блога». Там же записал для всех подробный видео урок, где оговариваются такие моменты, как открытие, перемещение и сохранение изображений, поэтому такие мелочи опущу, кто с ними не знаком, посмотрите видео.
Я надеюсь все справились с задачей загрузки изображения в окно программы Adobe Photoshop и теперь самое время рассмотреть, как можно уменьшить вес картинки без потери качества. Для примера я взял одну из фотографий, вес которой составляет 1,27 Mb (Мегабайт):
на этом фото я и буду показывать сжатие. Первым делом я советую вам обратить внимание на размер изображения. Если взять к примеру любой сайт, то ширина шаблона имеет определенные ограничения. Шаблон, используемый на моем блоге, имеет ограничение по ширине 600 px (пикселей), а фото, которое я собираюсь загрузить — 7139 px:
Для уменьшения размера изображения перейдите во вкладку программы Adobe Photoshop «Изображение/Размер изображения» и задайте необходимые параметры ширины и высоты картинки. Если в поле «Сохранить пропорции» установлена галочка, то достаточно задать один из параметров, второй автоматически подстроится, соблюдая пропорции.
Я установил в поле «Ширина» максимальное значение 600 px. Теперь мне нужно сохранить изображение на своем ПК (персональном компьютере). Для этого я перехожу во вкладку «Файл/Сохранить для Web устройств». Обязательно выбирайте именно этот пункт, что позволит максимально оптимизировать изображение для загрузки в сеть:
Перед вами появится окно с настройками, где вы можете наблюдать, как изменился размер картинки:
В моем случае ее вес сократился до 30,07 K (Килобайт), это почти в 35 раз меньше изначального размера! Причем качество изображения не изменилось, по крайней мере, для человеческого глаза оно не заметно. Но это еще не все!
В этом окне с настройками вы можете еще уменьшить вес, выбрав необходимый формат изображения и качество его отображения:
Все будет зависеть от того, какого именно качества вы хотите добиться. Здесь я вникать в подробности не буду, думаю, разберетесь сами без особого труда. Поиграйте с настройками, поэкспериментируйте и таким путем можно добиться оптимальных параметров «Размер/Качество».
После того, как все настройки будут подобраны, жмем кнопку «Сохранить», указываем путь, куда будет сохранено изображение, и снова жмем «Сохранить». На этом сжатие картинки окончено. В итоге вес моей картинки получился 15,19 K (Килобайт). Такие картинки будут загружаться в считанные секунды и ваш хостер долгое время не сможет вас уличить в чрезмерном использовании виртуально пространства.
Вот такими вот несложными действиями можно уменьшить вес картинки (изображения, фото) без потери качества. На этом у меня на сегодня все. Надеюсь, моя статья для многих окажется полезной. Желаю всем отличного настроения! Пока и до новых встреч!
да, именно по такому пути теперь и перелопачиваю все изображения на своем блоге, поскольку пэйдж спид инсайтс ругается на мои картинки. в свое время накидал их как попало. посмотрим, как повлияет на скорость загрузки страниц!:smile:
Спасибо Николай, очень полезный пост. Я никогда не задумывался о времени загрузки картинок. Вроде бы и интернет быстрый, а картинки грузятся как будто книгу листаешь. Теперь обязательно перелопачу картинки, благо их не так много.
Крутила картинку и так, и этак... «Застряла» на выборе скорости загрузки. Нельзя ли как-то поподробнее по ней «пройтись»? Как тут разобраться в килобитах и секундах — что на что влияет?
С первых же слов статьи поняла, что эта статья как раз для меня , потому что я никогда не учитывала вес картинок, вообще не знала и не думала об этом, что вес на что-то влияет. А вот теперь уже увидела предложения хостинга о повышении тарифа — явно картинки занимают много пространства. Нужно срочно исправлять положение.
Обычно я сжимаю картинки и фото в штатной программе «Диспетчер рисунков Microsoft Office», которая в среднем сжимает в 25 раз. но о качестве не берусь судить. А вот в Adobe Photoshop надо попробовать сжать и сравнить результаты.
Спасибо за статью Николай. Я на свой ресурс загружаю фотографии со скругленными углами и вес таких фото получается уменьшить до 300 kb меньше не получается, так как сохраняю в формате png-8 с поддержкой прозрачности. Если сохраняю в формате jpeg, то после загрузки на сайт картинка отображается с острыми краями.
Да, пожалуй это самый эффективный способ сжать картинку. Но когда таких картинок 5-7 в статье, а в день публикуешь 3-5 статей, то такая обработка жутко тормозит рабочий процесс.
Поэтому я чаще пользуюсь просмотрщиком от Microsoft Office 2010 или, если мне нужно сжать 20-30 картинок за раз, тогда — FastStone Reizer, что-то вроде того, в названии могу ошибиться, по памяти пишу.
Я изменил вес картинки с 45 кб до 24 кб. Но я считаю, что 24 кб — это тоже много для страницы сайта. А если на странице будет 10 таких изображений, вдруг страница длинная? То это уже 240 кб, не считая текста и прочего.
да, именно по такому пути теперь и перелопачиваю все изображения на своем блоге, поскольку пэйдж спид инсайтс ругается на мои картинки. в свое время накидал их как попало. посмотрим, как повлияет на скорость загрузки страниц!:smile:
[Ответить]
Я пользовался RIOT, но там в 2-3-4 раза, а никак в 35. Спасибо!
А вот всем Adobe Photoshop CC 14 Portable , без установки на комп. samoychka.ru/portable/adobe-photoshop-cc-14-portable.html
[Ответить]
24 мая 2014 00:25
Александр!
Я тоже пользуюсь портабельной версией Portable_Adobe_Photoshop_CS5_Extended_Final_RUS.
До этого Photoshop_CS4 была установлена на компьютере.
Ох и намучился я с ней!Photoshop_CS5
Как месяц проходит, так нужно переустанавливать — требует деньги.
[Ответить]
Спасибо Николай, очень полезный пост. Я никогда не задумывался о времени загрузки картинок. Вроде бы и интернет быстрый, а картинки грузятся как будто книгу листаешь. Теперь обязательно перелопачу картинки, благо их не так много.
[Ответить]
Крутила картинку и так, и этак... «Застряла» на выборе скорости загрузки. Нельзя ли как-то поподробнее по ней «пройтись»? Как тут разобраться в килобитах и секундах — что на что влияет?
[Ответить]
Николай Коротков
21 мая 2014 18:09
Елена, 1 Mb = 1024 Kb. Чем меньше весит изображение (Kb), тем быстрее будет загружаться. Получается, что вес картинки влияет на скорость ее загрузки.
[Ответить]
23 мая 2014 18:04
«Разжуйте», пожалуйста на примере .
1-й вариант — 17 сек,56,6 кбит/сек, но вот второй вариант этой же картинки — 1 сек, 1,5 мбит/сек.
Что тут правильным будет?
[Ответить]
Николай Коротков
25 мая 2014 20:19
Елена, ориентируйтесь на кбит/сек. Первый вариант в вашем случае будет правильным.
[Ответить]
С первых же слов статьи поняла, что эта статья как раз для меня , потому что я никогда не учитывала вес картинок, вообще не знала и не думала об этом, что вес на что-то влияет. А вот теперь уже увидела предложения хостинга о повышении тарифа — явно картинки занимают много пространства. Нужно срочно исправлять положение.
[Ответить]
24 мая 2014 00:15
Ирина!
А может предупреждение хостинга о повышении тарифа не связано с большим «весом» картинок?
[Ответить]
Николай!
Обычно я сжимаю картинки и фото в штатной программе «Диспетчер рисунков Microsoft Office», которая в среднем сжимает в 25 раз. но о качестве не берусь судить. А вот в Adobe Photoshop надо попробовать сжать и сравнить результаты.
[Ответить]
Максим
28 мая 2014 13:43
Я тоже сжимаю картинки в штатной программе «Диспетчер рисунков Microsoft Office», но буду пробовать в Ф/Шопе, так как вы меня переубедили!
[Ответить]
Николай!
Сегодня сравнил одну и ту же картинку сжатую в программе «Диспетчер рисунков Microsoft Office» и в Adobe Photoshop.
В Adobe Photoshop фото получилось более сжатое и качественное.
[Ответить]
Спасибо за статью Николай. Я на свой ресурс загружаю фотографии со скругленными углами и вес таких фото получается уменьшить до 300 kb меньше не получается, так как сохраняю в формате png-8 с поддержкой прозрачности. Если сохраняю в формате jpeg, то после загрузки на сайт картинка отображается с острыми краями.
[Ответить]
Николай
Сейчас попробовал сжать в фотошопе.
Действительно, фотошопе фото получилось более сжатое и качественное.
Большущее спасибо за полезную для меня статью
[Ответить]
Николай Коротков
28 мая 2014 14:18
Максим, всегда пожалуйста! Рад, что материал для вас оказался полезным!
[Ответить]
Очень полезный и актуальный материал. Беру на заметку.
[Ответить]
Да, пожалуй это самый эффективный способ сжать картинку. Но когда таких картинок 5-7 в статье, а в день публикуешь 3-5 статей, то такая обработка жутко тормозит рабочий процесс.
Поэтому я чаще пользуюсь просмотрщиком от Microsoft Office 2010 или, если мне нужно сжать 20-30 картинок за раз, тогда — FastStone Reizer, что-то вроде того, в названии могу ошибиться, по памяти пишу.
[Ответить]
Всегда делаю именно так, хотя есть ещё много специальных программ для уменьшения веса.
[Ответить]
31 января 2015 18:59
Я изменил вес картинки с 45 кб до 24 кб. Но я считаю, что 24 кб — это тоже много для страницы сайта. А если на странице будет 10 таких изображений, вдруг страница длинная? То это уже 240 кб, не считая текста и прочего.
Есть еще какие-то способы сожмать картинку?
[Ответить]
Побежал сжимать изображение. Спасибо большое автору.
[Ответить]
У меня все прекрасно получилось,просто и доступно, Вам огромное спасибо за полезную информацию!
[Ответить]
Спасибо, Николай, попробую воспользоваться этим способом сжатия картинок, а их мне приходится размещать много, поскольку сайт кулинарной тематики.
[Ответить]