Как уменьшить вес картинки и произвести их оптимизацию
Насколько быстро грузится ваш сайт или блог? Медленно? А не задавались ли вы вопросом, почему это происходит? На самом деле ответ очень прост. Большая часть времени уходит именно на загрузку картинок.
Начинающие блоггеры просто находят картинку в интернете и вставляют ее к себе на сайт, даже не задумываясь о ее оптимизации и о весе. Давайте же будем избавляться от ошибок и научимся оптимизировать картинки и уменьшать вес картинок.
Как уменьшить вес картинки? Оптимизация картинок при помощи программ и сервисов
В этом посте хочу поделиться с вами тремя способами, которые позволят уменьшить вес картинки для вставки в статьи, а также оптимизировать картинки своего шаблона. Вот, что будет задействовано:
- Программа Snagit;
- Программа Abode Photoshop;
- Онлайн сервисы оптимизации графики.
Конечно, многие уже давно используют один из способов, и для них не будут открыты тайные острова, но для некоторых данная информация будет очень кстати.
Работаем с первым способом. Допустим, у вас на ПК лежит фото, сделанное на профессиональную камеру, надеюсь, вы знаете, сколько весят такие фотографии, а если нет, то цифры колеблются от 3мб до 15-20мб и выше.
Только представьте, вы закинули на хостинг 10 картинок, а десять картинок – это одна хорошая статья, возьмем наименьшее значение, 3 мегабайта, итого получилось, что на хостинге занялось 30 мегабайт пространства. Еще 20-30 статей и места нет! Жуть…
Итак, возвращаемся к теме поста. Что делать? Открываем интересующую картинку стандартной программой для просмотра изображений. Запускаем программу Snagit и делаем скриншот этой фотографии. Как работать с программой, я писал в этом посте.
И сразу, картинка получает меньший вес. Для примера, я возьму свое фото, и проделаю вышесказанное. Исходный размер 5,24 мб.
После того, как я сделал скриншот, размер стал 65,4 кб. Классно, да?! Представьте сколько места можно экономить, проделывая такие манипуляции перед вставкой картинок к себе на сайт. А ведь это еще не все!
Можно уменьшить размер картинки. Многие любят это делать через админ панель WordPressa, но правильнее будет подготовить ее на ПК и только потом загружать.
Итак, открываем картинку при помощи программы Microsoft Office Picture Manager.
В верхней части меню выбираем изменить рисунки -> изменение размера.
Затем в окне настроек задавайте необходимые параметры. Можно воспользоваться ручным методом, то есть вручную ввести циферки, а можно поставить точечку напротив «процент от исходных ширины и высоты» и подогнать желаемый размер.
В чем разница между ручным и автоматическим методом?
Если задавать вручную, нужно знать пропорции, иначе картинка будет вытянута или растянута, автоматический метод сам подгоняет пропорции, именно им я и воспользовался. Жмем «ок».
Размеры получились 614 х 407. Теперь по старинке, нужно сохранить данное изображение. Выбирайте файл – сохранить как… и указывайте место, куда нужно произвести сохранение. После сохранения, мое фото весит всего 36,6 кб (прям как температура тела :ЪЪ). А визуально выглядит так.
На самом деле, программой Picture Manager очень редко пользуюсь, предпочтение отдаю фотошопу. Но о нем немного ниже.
Сейчас давайте рассмотрим онлайн сервис, попасть на него можно по этой ссылке. Жмем на большую желтую кнопочку «выберите файл с диска» и указываете нужное изображение.
Сервис сам выполнит сжатие и выдаст готовый результат, нажав на кнопку Download this file, вы скачаете его к себе на ПК.
После загрузки, файл весит 35 кб. Как видите, сервис не сильно сжал, поэтому, программы Snagit будет достаточно, кстати, в ней также можно задавать и размеры изображения, для этого нужно перейти в редакторе на вкладку «изображение» и выбрать «размер» — «размер изображения». В появившемся окне, подогнать нужные размеры, результаты можно просматривать внизу.
Идем дальше, следующую программу, которую рассмотрим – это мною любимый фотошоп, хоть я и использую его на 10 %, он мне до жути нравится, уверен, что вскоре найду время, чтобы изучить его глубже 🙂
Оптимизация картинок при помощи Adobe Photoshop за 5 минут + уменьшение веса картинки
Надеюсь, он у вас установлен. Далее ищем картинку или фото, которую нужно оптимизировать, рекомендую проверить картинки вашего шаблона, они тоже зачастую имеют приличный вес, их необходимо оптимизировать и снова закинуть, дабы увеличить скорость загрузки блога или сайта.
Чтобы проверить, сколько весит вся графика вашего шаблона, пройдите по адресу wp-content/themes/название темы/, и папку «images» скопируйте к себе на ПК. Узнав вес, вы уже будете ориентироваться, нужно ли оптимизировать данные изображения или нет.
Я покажу пример на обычной фотографии, а уже аналогично можете проделывать с остальными жирненькими фотками или картинками.
Здесь идем тем же путем, пкм на картинке – открыть с помощью – adobe photoshop. Я использую Adobe Photoshop CS5.
Мое фото выглядит следующим образом и имеет вес 313 кб.
После открытия сразу жмем файл – сохранить для web и устройств.
Нам открывается окошечко следующего плана:
Задаем такие настройки:
- Указываем формат картинки. Для сайтов это зачастую форматы: jpeg и png (png имеет прозрачный фон)
- Можно выбрать предлагаемое качество.
- В третьем пункте ставим «прогрессивный».
- Ползуночком можно уменьшить или увеличить качество изображения, предпросмотр имеется, поэтому поиграйтесь ползунком и подберите оптимальное соотношение веса и качества.
- Подгоните размеры, допустим, если у вас фото 1000×500, то есть смысл уменьшить его! Мне в текст отлично вписываются размеры 620 и меньше по ширине, и по высоте неограниченно.
- Окно для отслеживания веса картинки.
- После всех настроек нажимайте «сохранить» и указывайте, куда сохранять картинку.
Из вышеперечисленного, я использую только фотошоп и программу снэгит. Этого мне вполне хватает.
Вот и все, теперь вы знаете, как уменьшить вес картинки и оптимизировать ее. Не следует упускать это из виду, ведь поисковые машины любят, когда сайты загружаются быстро и это ваше преимущество перед конкурентами. Ну, конкуренты это выражение не правильное, скажу иначе, перед другими блоггерами.
Как вам статья? Можете подписаться на обновления блога и быть в курсе его новостей.
Вообще, я рекомендую вам начать изучать программу Adobe Photoshop, зная её, вы не пропадёте, она будет вас кормить и работать можно будет удалённо, не выходя из дома. Если не знаете с чего начать, начните с видеокурсов, у меня девушка училась по курсу Зинаиды Лукьяновой "Фотошоп с нуля в видеоформате" ей очень понравилось и сейчас она усовершенствует свои знания.
Приобретая курс по моей партнерской ссылке, я верну вам 50% своих комиссионных, а это — 240 рублей. Для возврата, пишите в тех. поддержку через обратную связь.
А как вы оптимизируете картинки? Может поделитесь еще вкусными методами? С удовольствием почитаю в комментариях.
Это нечто!
С уважением, Михед Александр.
Я тоже пользуюсь вышеперечисленными программами для этого, но почему-то, если есть текст на картинке, то после уменьшения он как-бы расплывается...
Привет Илья, в меру же нужно уменьшать :Ъ)) А вообще да, есть такое дело, поэтому я всегда текст отдельно пишу, а не готовый юзаю.
Это правильно, но ведь бывает когда нужно скриншот уменьшить. В этом случае всёравно расплывчато будет, даже если уменьшать немножко.
Кстати, про видео, там что реальные жирафы были!? Если да, то я в шоке просто! =-O
Даже не знаю, может быть и реальные :ЪЪ Жирафы рулят :ЪЪ
Александр, я уменьшаю в FastStone Captur — в капчуре. И заметила, что например картинка 600-800 пикселей, в капчуре перехожу на размер и уменьшаю на размер 300 или побольше или меньше. Качество не пропадает абсолютно. Картинка не расплывается — всё ровно идёт. Может потому, что привыкла к этой программе, мне с ней удобно, уже назубок знаю все опции.
Стоит ли изобретать велосипед, если он уже изобретён? Бывает конечно, что я и по Вашим предложенным способам изменяю картинки. Прочитала в одном месте, что если загрузить картинку на фотошоп и сохранить (не помню, по моему web), то картинка легче становится в смысле Kb. Поробовала — да, вес меньше. Но привычка хуже неволи 😉
Согласен с Вами Надежда, когда привык, не хочется менять на что-то. Сам такой 🙂 Раньше пользовался ФастСтоном, не очень понравилось, ну, здесь на вкус и цвет)
Хорошая статья, подумываю о программе Snagit, пока устраивает Фотошоп и FastStone Capture
Приветствую Рашида,мне больше снэгит нравится + фотошоп :).
А не проще ли хранить все картинки на хостинге, занимающемся именно хранением ваших картинок? Любого размера кстати. Вам остаётся только вставить в ваш блог, html текст картинки, что согласитесь значительно меньше, чем сама картинка и всё. Всё гораздо проще! 🙂 8)
Приветствую Олег. На самом деле не проще, каждый раз, когда вы вставляете html текст, обращение идет на посторонний ресурс, что в свою очередь замедляет работу блога, т.к. подгружаются картинки.
Я тоже работаю в программе FastStone Captur.Очень довольна программой.
Здравствуйте Елена. Все так хвалят ее, может тоже попробовать?! 🙂 Раньше ею пользовался, только в роли обычной программы для просмотра изображений.
Для картинок формато jpeg пользуюсь сервисом jpegmini.com. Размер уменьшается раза в 2, а качество сохраняется
Привет Евгения. Отличный сервис, понравился. Только думаю на ПК удобней обрабатывать, чем каждый раз загружать картинки, а потом качать, а потом опять загружать только уже к себе на хостинг. Для единичного использования, самое то! 🙂
Кстати, спасибо за подсказку проверить размер картинок темы, надо будет этим заняться. На днях закончила оптимизацию картинок на блоге, сразу появилось несколько десятков свободных мегабайт. И видимо это еще не предел.
Самому нежно оптимизировать некоторые картинки... А случайностью не подскажите хороший сервис, который оптимизирует png картинки?
Евгения, если не секрет, как проводили оптимизацию картинок? Плагином или вручную всю папку с хостинга перебирали? Спасибо за ответ. С уважением Надежда
Привет Александр! Значит рассказываю. Всё в первую очередь, конечно, зависит от того ресурса, куда Вы загружаете свои фотографии(надо выбирать подходящий). Во вторых, никаких задержек при какой-то мнимой подгрузке не существует, как таковой. Проверенно, уже не раз. В сравнении с загрузкой реальной со своего блога, «загрузка» с хостинга происходит мгновенно. Возьмём, к примеру, видео, которое вставляем с YouTube, тоже кстати в html коде, если заметили?! Представьте, если бы Вы все видео вставляли себе на блог? Оно не подгружается, а играет сразу, с самого сервера. В этом то и есть красота html кода. Не хочу навязывать своего мнения, просто говорю о том, что не раз проверено уже и не только мной, но и большими торрент-архивами, где изображений, ну очень много. По поводу хорошего сжатия PNG в том числе, без потери качества, почти идеально, могу подсказать вот такой адресок: http://compressjpg.com/ Сжимает до супер-максимума, почти без потери качества. 8)
Начитался, спасибо Олег. Действительно, html код увеличивает скорость загрузки блога.
Вот здесь Вы правильно подметили, этот метод отлично подходит для сайтов, где ооочень много изображений.
В примере Вы привели загрузку видео к себе на хостинг,я думаю, что не нужно сравнивать видео с изображением, на их обработку уходят разные ресурсы, поэтому видео хостинги намного мощнее и обработка происходит быстрее.
Я так понял, если загружать картинки на другой ресурс, при вставке в пост, нужно вручную копировать каждый код + прописывать Тайтл и Альт. Потом опять лезть на сервис, искать нужное изображение и снова проделывать такие манипуляции.
Из всего вышесказанного, у меня такие выводы: вставка изображений через html код — лишняя трата времени, в скорости выигрыш идет очень малый.
Если не ошибаюсь, картинки Вы вставляете через ресурс? Ради интереса проверил скорости загрузки Вашего и своего блога на нескольких сервисах, мой грузится быстрее. Да, на скорость влияет множество факторов, но все же... Интерес 🙂
За сервис сжатия — спасибо, уже пробую.
Сжимает отлично Олег — не вопрос, НО такую маленькую картинку никак не поставишь на сайт — посетители глаза сломают, читая буквы. Этот сервис сжимает до оптимального, а размеры он никак не дает. Это не выход. Единственное, что если нужна очень маленькая картинка и сжать нужно с большого веса на малый, как я сжала с 428 Кб на 14,3 Кб, но картинка малюсенькая получается.
Для того, чтобы её увеличить, опять нужна капчура и размер увеличиваем той сжатой картинки, например если увеличим в три раза — изображение поплыло. Для картинок сайта этот сервис не годится — моё субъективное мнение.
У Вас Олег, не сочтите за указку с моей стороны, много лишнего и ненужного на сайте: календарь, облако меток, свежее на сайте. Свежее на сайте посетитель видит сразу на главной, облако меток тянет загрузку прилично, календарь — он не нужен.
Понимаю, у каждого свой выбор, когда — то и у меня всё ЭТО СТОЯЛО НА БЛОГЕ, потом я проверила скорость блога, убрала архивы, календарь, глобус, облако меток и много чего другого, проверила снова скорость загрузки. Результат приятно порадовал. Попробуйте, что выйдет, сами удивитесь. С уважением Надежда
Спасибо за ответы всем сразу! 🙂 Вы меня конечно и порадовали и рассмешили немного. Касаемо моего сайта, я пока на нём просто экспериментирую, всего лишь. Естественно, многое уберу...если не всё!!! 🙂 Про облако меток, я тоже считаю, что это баловство, не более того. Календарь и всякую мишуру уберу тоже однозначно, я работаю сейчас в этом направлении, хочу сделать что-нибудь эдакое! Всё ОК! Я всё понял. 🙂 Хватит обо мне, теперь по теме. Надежде адресую сначала: значит сжимать изображение до «умопомрачения» совсем не обязательно. Там есть ползунок для выбора коэффициента сжатия, если Вы обратили внимание?! Выбирайте, согласно Вашим требованиям и всё. Хотя я этим сервисом не пользуюсь вообще. Если надо что-либо уменьшить применяю ту же прогу, что Вы и описывали в Ваших дисрутах выше — Fast Stone. В ней это делается очень просто, хоть я и знаю photoshop на 5. В Fast Stone усть функция «Быстро изменить размер», по моему так, не вспомню дословно сейчас. Два клика и всё готово. Опять таки зависит от того что для Вас главное — размер, качество или и то и другое. Тут уже надо поработать над выбором. 😀 Много я пишу, аж дух захватывает! =-O Теперь Александру: — работу видео-хостингов и изображений, я слава Богу знаю! Не об этом сейчас речь. Короче, все те манипуляции при вставке картинки, которые Вы описали, просто ЛИШНЕЕ! Делается всё просто значительно: грузите на хостинг картинку, прямо с хостинга копируете код html к себе на блог, в самой картинке у себя делаете ссылку на изображение(это делается в редакторе одним нажатием соответствующей кнопки, я думаю Вы знаете) и всё. Никуда больше заходить и что-либо прописывать нигде не надо. Картинки у меня на сайте, как Вам показалось, у меня грузятся медленнее из-за плагина Responsive Lightbox, который отображает картинки, в якобы интересном виде. Без него, открываются мгновенно.
Знаете Олег, у меня почему — то ползунок не работает, пробовала в Осле, Хром, Мазилла, Опера — не двигается. Я увидела перевод, но ползунок почему — то не тянется. Куки почистила, ладушки — завтра попробую. Спасибо вам огромное за отзывчивость *IN LOVE*
Олег, Вы сказали, что знаете ФШ на 5. Дайте мне пожалуйста подсказку, если не затруднит. Шапку монео блога видели? Подскажите пожалуйста, что мне нужно сделать в ФШопе, чтобы описание блога не было видно (Описание блога под картинкой) Как замазать эту ерунду. Убрать описание не могу, потому что это нужно ПСкам. Заранее благодарна.
Так описание блога убирать надо не в фотошопе, а у себя на сайте. Позже расскажу, как и что, когда Вы будете в эфире. У меня была такая же «лабуда» 😉
ВСё Олег — убрала лабуду. Гром не грянет — никто не перекрестится. Мне на на одном сайте также написали про описание. А Вам СПАСИБО: только сегодня сообразила, что набрав Ctrl+U — всё описание на месте. Я считала, что если уберу описание блога — его вообще не будет. Век живи — век учись, всё равно всего не постигнеешь. Спасибо, что Вы есть! :-*
А я при взгляде на Ваш сайт подумал, как такое может быть, у такой умной женщины?! 🙁
Знаете, кто умным считается? Кто создаёт умный вид. Может я просто умный вид создаю. 😀
У Вас тема установлена «EARN», если не ошибаюсь?
Да, сгенерированная тема EARN. Но я уже так супер разбираюсь в файлах — всё родное, как Отче наш.
Ой, я извиняюсь, не глянул, что название Вам убрать нельзя. Ну в фотошопе убрать эту ерунду просто, но надрись то у Вас же не на самой картинке находится?! Или я чего-то не понял?
Убрала Олег название, описание: в общие настройки зашла и убрала, хотя знаю, что там вроде должно быть описание, о чём сайт т ключи. Ладно — посмотрю, какие мои годы. Яша снял десятку, мне сейчас просто нужно подналечь на статьи и дело в шляпе. Статей море, дел помимо блога хватает. Ну ничего, я всё успеваю.Я ж талантливая. Кстати...
Вспоминаю коммент подруги на свой юбилей? «„Оставайся такой и понимай своих деток и внуков.Только сейчас немного другое время…За ними нужно присматривать.“» Я ей ответила: «„Спасибо ЗАЯ за поздравление!!! Это они за мной присматривают, чтобы я чего-нибудь не отчебучила. Ненароком… Я же талантливая.“» *DRINK* 😀 *JOKINGLY*
Видите Надежда, сразу послушал Ваш совет и убрал, для начала, календарь. Мне он тоже казался лишним. Они б ещё туда «Жалобную книгу» придумали. 😀 Больше пользы было бы и веселей! 😀
Согласна Олег! я ведь тоже была новичком, ой мама дорогая, чего у меня только не было. Один товарищ зашёл и говорит: Т... мать , у тебя сайт или ёлка новогодняя с песнями 😀 😀 😀 Вот по его совету и убрала всю ... так самим можно придумать жалобную. Только как будут в этой жалобной на меня жаловаться 😉 Олег, вы меня рассмешили, у нас 4-30 утра, а меня смех разбирает 😉 😉 😉
Кстати, ещё раз спасибо Надежде, за объективное мнение о сайте. У меня, что называется «глаз замылился», а может и не до этого было. Точно, убрал я и «Свежее на сайте» 😀 Название такое двоякое. «Свежее». Мясо продаём что ли? Очень хорошо. Вот так и надо. Нужна оценка сторонних пользователей. Им всегда видней. Спасибо! Буду рад «Контрольным проверкам» от Вас лично, Надежда. =)
Олег, я обязательно зайду к Вам по поводу свежего мяса 😀 Я согласна : свежий глаз всегда видит лучше, а я поумнела после курса Саши Борисова. Он сказал в курсе: зачем всё это? Архивы по месяцам, Свежие статьи на блоге, и всё остальное. Вот — век живи — век учись. По поводу жалобной меня ржач берёт, 😀 😀 😀 А если и правда замутить? Что получится интересно? В мире инета жалобная заменилась опросом, главное составить его. Да не все отвечают на него, замануха есть такая — после опроса полУчите подарок. 😉
Вот и ладненько! 😉 Думаю нам с Вами будет о чём пообщаться. С умным человеком приятно набираться ума, а с умной женщиной, в десять раз приятней! *IN LOVE* %) 😉
Ссылочку на меня, как автора «Жалобной книги на сайте» не забудьте "пришпандорить!!! 😀 😀 😀
Само собой — рацухи не присваиваю. Всё по братски да по человечьи. Виртуальной водкой обмоем это дело 😀
Что-то новенькое: виртуальная водка :Ъ
Александр, пьянку открываем у Вас на блоге. *DRINK* Организатор — я. Надеюсь, мою маму не будете вызывать а школу? 😉 И двойку за поведение в четверти не поставите? А то я такая разбишака была: в шестом классе организовала пьянку 😀 Встреча Нового года перед новым годом: лимонад с печеньем и с ручейком (игра такая была).
За всё это мне за поведение во второй четверти поставили 2ку. В табель. Лидер по поведению — в школе такого отродясь не было. Конечно все, кто участвлвал в сабантуе — поимели двойки в табель. За поведение. Жаль, что табеля в то время не оставляли на руках, было бы чем похвалиться перед внуками. *MACHO*
Трафик увеличится сразу в десятки раз, если не в сотни. Все ломанутся поглядеть на «Чудо» прогресса. А что, вполне заманчивая идея. Давайте вместе её и замутим!!! 😀 😀 😀
Кстати, я уже подумала об этом сегодня, намётки кое — какие есть. Надо осмыслить путём. *CRAZY* 😉 8)
Надо будет счётчик новый открывать — «Трафик на жалобы» !!! 😀 😀 😀
Совершенно верно — Трафик на жалобы. Я как — то шарахалась по сайтам, проверяла, кто как укреплён — ради интереса. И вот у Александра я оставила этот коммент. Вот она статья life-crazy.ru/vedenie-blo...wordpress.html и мой комментарий:
ЦИТИРУЮ: И проверяя один блог таким способом — налетела на картинку: открывается белый чистый лист, у некоторых написано: А Вы по адресу попали? И... что забыли на моей территории??? А вот одна картинка — вау Но здесь уже наверное умные люди, которые хорошо владеют знаниями — поработали.
5я голая точка и написано: Изучайте — изучайте — изучайте. А своя не такая???
Вот они таланты %)
Во прогремим в инете: организаторы жалобной книги. Хотя мне жалобная — не книга, слово — не нравилось. Жалобное такое слово, на ходу скисать начинаешь. 😉 Только не думаю, что кто — то пойдёт жаловаться на кого — то. Просто интересно посмотреть на реакцию, как пойдёт статья. Вообще в сети надо чудить, сильнее всего работают поведенческие факторы — в этом убедилась уже.
Опрос это для нашего человека «Нудиловка». А вот пожаловаться — это всегда пожалуйста! Кстати, это будет своего рода рейтинг сайту. 😉 8)
Опрос... Одно время я принимала активное участие в них — гналась за подарками, но выйдя к финишу, увидела надпись: Перейдите по ссылке, введите имя емел — Вы получите обещанный подарок. Сразу в черный список и ни шагу + отписываюсь от рассылки. Я понимаю, что всем баща нужна. Но зачем же так назойливо заставлять человека???
Вот и хорошо раз разобрались.
Ладненько, не буду мешать. Будет время пообщаемся ещё. Рад знакомству, одним словом! =)
Кстати Надежда, касаемо уменьшения фоток, могу предложить ещё один сайт, он специально заточен под оптимизацию картинок на сайты. Все нужные форматы присутствуют. Вот адресок: http://tools.dynamicdrive.com/imageoptimizer/ Там всё достаточно понятно. Я думаю с английским у Вас проблем тоже нет?! 🙁 =)
Александр, сорри за оффтоп, но хотел спросить, вы пойдёте на тренинг А. Бобрина?
Привет Илья. Неее, к А. Бобрину не иду 🙂
Добрый день. Я из новичков, учусь. Статья очень полезная. Первым способом сжатия фото пользуюсь давно. Сжимаю до Веб страниц, нажимаю авто улучшение и затем сохраняю. Качество фото становится даже лучше. Часть фото на сайте отредактированы, а вот остальное нужно проверить. Спасибо за подсказку.
Приветствую Александр, фото не только отредактировать стоит но еще и уникальными сделать рекомендуется. Сейчас тоже занимаюсь проверкой всех фото, только не уменьшением веса,а уникализацией.
Я работаю в программе FastStone Capture и фотошоп)), незнаю как но вроде уменюшается размер))
А я остаюсь при мнении, что фотошоп рулит.
Однозначно, по функционалу и качеству фотошоп рулит.
Но по легкости он, конечно, иногда проигрывает конкурентам.
Лень иногда бывает в фотошопе разбираться, но это необходимо, если качество нужно. 😀
Здесь однозначно на любителя и на уровень подготовки)))
В основном использую Фотошоп. Но не на всю катушку. Чаще для уменьшения размера фото.