Оптимизация изображений для блога! Как уменьшить вес картинки?

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

Думаю эта статья будет полезна многим ребятам. Недавно написала мне одна женщина и говорит, — «Александр помогите, у меня на хостинге заканчивается место, что делать. Я вроде блог то веду всего пол года, а уже места не хватает на хостинге, а изначально у меня там 10Гб». =)

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

Иногда в одном посте было по 10-15 картинок каждая весом по 4-5 мб. =) Естественно так ни какого места не хватит это раз и два — поисковые системы однозначно понизят этот блог в поиске за то, что он долго грузится.

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

1) При помощи программы Snagit. 2) При помощи Adobe Photoshop. 3) При помощи сервисов оптимизации графики.

Думаю, что многие ребята все это уже и так знают и для них я ни чего нового не скажу (еще и меня научат чему-то), но думаю, кому-то инфа будет как раз кстати. Вот для них и пишу. Итак способ первый. Программа snagit. Вот фотка, которую я сделал на фотик Canon 600D:

Размер: 5,75 МБ!

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

Размер: 77,4 Кб.

Но это еще не все. Мы уменьшили вес картинки. Можно уменьшить еще и размер. Обычно мы любители вес уменьшить, а на размер забиваем, мол в редакторе wordpress будем картину вставлять в пост и уменьшим. Лучше все же сразу это сделать.

У нас картинка эта лежит на рабочем столе. Правой кнопкой нажимаем на нее — > Открыть с помощью — > Microsoft Office Picture Manager.

Далее жмем — > Изменить рисунки — > Изменение размера. Выбираем «Произвольные ширину и высоту» и ставим тот размер который нам нужен.

Вот у меня в пост влезают картинки размером 631×419. Вот такой размер я и ставлю.

Жмем «ОК». Далее как обычно — > Файл — > Сохранить как -> Выбираете куда сохранить картинку. Вот что у меня получилось:

Размер: 51,8 Кб. Еще меньше.

Это тоже еще не все. Далее идем в сервис kraken.io, жмем «Выберите файлы с диска», загружаем нашу картинку и автоматически начнется ее оптимизация. Снизу можно через какое-то время нажать «Скачать этот файл».

Изображение уменьшилось еще на чуть-чуть без потери качества:

Размер: 49,3 Кб.

Итого мы уменьшили вес изображения в 100 раз. Кстати если каждая картинка для вашего поста меньше 50 Кб, то это как раз самое то. Больше уже плохо! Я раньше всегда забивал на эти действия и зря, сейчас жалею. У меня есть посты где картинки и 200 и 300 Кб весят и даже 500+.

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

Как вам такой способ? Может кто-то подскажет что-то более лучшее и простое? Буду только рад услышать советы и предложения в комментариях.

Теперь давайте поговорим об оптимизации графики для дизайна блога. Вот все знают, что я недавно поставил новый дизайн на блог. Получилось так, что Хедер (шапка блога) весила 1,23 Мб, а футер (подвал) — 988 Кб. Однозначно нужно было что-то делать, чтобы уменьшить вес картинок без потери качества, а если и с потерей, то самой минимальной.

Если бы все оставить как есть, то представьте как бы долго загружался блог. Вместе вся графика блога весила более 3 Мб. Это очень много! Сейчас 1,7 Мб. Это нормально! Я не имею в виду только шапку и футер. Я говорю про всю графику в целом.

Шапка, футер, сайдбар, кнопки, формы подписок, фон и т.д. Чтобы узнать сколько весит вся графика вашего блога, зайдите на свой сервер в папку wp-content/themes/название темы/. Всю папку images скопируйте на рабочий стол и посмотрите сколько все вместе весит. Сколько? Напишите в комментах у кого какой вес? Мне просто интересно!

В общем сейчас я расскажу вам как я уменьшал вес своего дизайна при помощи Adobe Photoshop. Уменьшал я только файлы формата jpg. Остальные не знаю как уменьшать, например png файлы. Если кто подскажет буду только благодарен.

Короче открываем фотошоп. У меня Adobe Photoshop CS6 Portable. И открываем в нем нашу не оптимизированную картинку. Вот она:

Вес: 1,23 Мб.

Далее просто жмем -> Файл — > Сохранить для web:

В открывшемся окне сверху справа поставьте все вот так:

Набор — выбираем: Высокое качество JPEG. Далее ставим галочку — прогрессивный, а качество выставляем 70%. Все. Ниже жмем сохранить. Размеры не меняем естественно!

Вообще можно качество в % и уменьшить. Я ставил 60% и оно практически не менялось. Ну если только вообще уж присматриваться конкретно! Мог бы оставить и 60 или 65%, но оставил 70%. Так вообще качество не теряется и все вы наблюдаете красивую картинку. Просто у меня цветов на блоге много, дизайн яркий и рисованный, поэтому тут оптимизировать сложно! Стандартные же темы можно оптимизировать жестко и никто ни чего не заметит.

В общем в итоге из 1,23 Мб, я получил 477 кб при оптимизации шапки и из 988 Кб получил 324 кб при оптимизации футера. Ну естественно оптимизировал и другие картинки формата jpg. Тоже конкретно уменьшил размер. Вот вам такая информация в общем по оптимизации графики для сайта. Пользуйтесь.

А вы оптимизируете графику для блога? Как вы это делаете? Может подскажите какие-то более классные способы? Спасибо! А турнир продолжается.

P.S. Начал работу над созданием нового видеокурса [urlspan]"Как стать блоггером тысячником 2.0[/urlspan]". Все подробности скоро напишу в новой статьей на блоге. Не попустите и подпишитесь на обновления.

P.P.S. Ребята хочу попросить прощения за свою рассылку. Я думаю многие поняли о чем я. На днях сделал скриптом рекламную рассылку нового курса по всем своим клиентам, кто покупал мои продукты. Кому-то пришло аж по 5 писем. Все дело в том, что скрипт отправляет письмо каждому клиенту каждого продукта.

То есть если вы покупали у меня 5 курсов, то и писем вам придет 5. =) Ну вот такой он тупезень. =) Простите его и меня. Надеюсь на понимание! Спасибо!