Оптимизация картинок

Фев 05
5 февраля 2014

optimizaciya-kartinokДоброго времени суток! По просьбе моей постоянной читательницы Надежды, сегодняшняя наша тема будет посвящена оптимизации картинок на нашем блоге. Я расскажу как изменить размер изображения, уменьшить его вес, прописать ключевые запросы, и открою вам какими онлайн-сервисами я пользуюсь сама. Никаких сложных, много весящих фотошопов использовать не будем! Итак, давайте приступим, тк сегодняшняя тема актуальна, для блоговодов)
Зачем нам все это нужно? Во-первых статьи с картинками выглядят гораздо привлекательнее. И конечно, если вы используете плагины или коды, выводящие похожие записи внизу статей, с картинками они выглядят гораздо интереснее и возрастает вероятность того, что ваши читатели перейдут читать другие записи. В общем так произойдет, если картинка находится в нормальном состоянии (некоторые загружают фотографии огромных размеров, например с профессиональных фотоаппаратов, да еще если их несколько... В итоге страница долго грузится и читатель закрывает ее и уходит... Возможно навсегда) Вот чтобы привести наш блог в порядок мы с вами и займемся оптимизацией картинок.

Для начала выберем подходящую картинку. На примере найдем ее через поиск яндекса images.yandex.ru/yandsearch, для этого введем запрос по нужной нам тематике, у меня например "оптимизация картинок" и сохраним понравившуюся к себе на компьютер:оптимизация картинок на блогеТеперь перейдем на наш онлайн сервис редактирования fotofab.ru/photoshop и загрузим нашу картинку с компьютера:

оптимизация картинок на блоге

И сразу нам необходимо изменить ее размер для этого выбираем опцию обрезки и задаем выходной размер, я ставлю ширину 500, а высоту регулирую в зависимости от картинки, далее выделяем нужную часть нам часть и обрезаем:

оптимизация картинок на блоге

После этого уникализируем ее, добавив адрес своего блога. Выбираем раздел "текст", наводим курсором на необходимую область изображения и пишем наш текст, также измените шрифт, стиль и размер букв по своему усмотрению:

оптимизация картинок на блогеВсе. Можно сохранять. "Файл", "Сохранить" в поле имя вставляем название на латинице(!) соответствующее нашему ключевому запросу статьи. Если вы теряетесь и не знаете как написать- перейдите на сервис translit.ru впишите свой ключевой запрос, например "оптимизация картинок" и нажмите "в транслит". В итоге получится optimizacija_kartinok (в место пробела я ставлю _). Обязательно отрегулируйте вес картинки изменив формат - JPEG например весит меньше всего, и качество если нужно, до размера 50 kb- примерно 40-45 будет отлично) и сохраните на компьютере:оптимизация картинок на блоге

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

оптимизация картинок на блоге

и сразу отредактируем его отображение в статье. Изменим выравнивание (справа, слева или по центру- по вашему выбору), размер для первой картинки- средний, для остальных полный и вставим в нашу запись:

оптимизация картинок на блоге

теперь зададим важные параметры ALT (задает описание картинки для браузеров, которые не могут отобразить картинки (например, если пользователь отключил показ изображений) и Title (при наведении мышкой на картинку показывает ее описание). Нажмите на редактирование:

оптимизация картинок на блогеи измените заголовок Title и атрибут Alt по своим запросам:

оптимизация картинок на блоге

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

В следующий раз я расскажу об увеличении картинок, о сервисе для постинга в группы в контакте, которые в разы экономит ваше время. Чтобы не пропустить рекомендую подписаться на обновление блога. Хорошего настроения! Не забудьте понажимать на кнопочки соц.сетей!

С вами была, Наталья Акулова


СПАСИБО ЗА РЕПОСТ, ДРУЗЬЯ:  

46 комментариев к “Оптимизация картинок”

  1. Супер! Наталья, информация бомба! Кстати, поздравьте меня: сегодня особенный день, с моего сайта снят фильтр АГС!!!!!!!! УРА!!!!!!!!!!!!
    Теперь могу спокойно заниматься работой, читать такие хорошие блоги, как Ваш. Внимательное отношение к мелочам добавляет авторитетности сайту. Спасибо за статью, возьму на заметку :)

    [Ответить]

    Наталья Акулова Reply:

    Надежда, поздравляю!!! Очень за вас рада!

    [Ответить]

    Наталья Ж. Reply:

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

    [Ответить]

  2. Полезная информация. Как не странно, она не менее полезна и тем кто умеет пользоваться фотошопом. Я была в ситуации когда мне нужно было привести картинки в нужный вид, а фотошопа на компьютере за которым я работала не было. Промолчу о том какими извращениями я занималась, а вот даже в голову не пришло поискать в интернете подобный сервис. :grin:

    [Ответить]

    Наталья Акулова Reply:

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

    [Ответить]

    Наталия Reply:

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

    [Ответить]

  3. Наталья Ж.:

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

    [Ответить]

  4. kiborg:

    Как то это очень долго делать, я например использую программу RIOT — Radical Image Optimization Tool. Возьмите себе на заметку эту программку, очень проста и легка, делает даже массовый ресайз и сжатие, позволит вам визуально настроить параметры сжатия, сохраняя минимальный размер файла. Формат изображения (JPG, GIF или PNG)

    [Ответить]

    Наталья Акулова Reply:

    Спасибо за подсказку, кому-то это может пригодиться!

    [Ответить]

    Panzer voran Reply:

    kiborg, речь не программах вообще, а о сервисе fotofab.ru, который поможет в отсутствии редактора. Понятно, что у каждого на компе тот или иной редактор имеется. А если в другом месте нужно отредактировать?

    [Ответить]

  5. Станислав:

    А я наоборот, решил создать портал о путешествиях, где будет очень большое количество фотографий большого размера (фотоблог, вроде сайта «Бигпикча»). Визуально такие статьи смотрятся просто потрясающе! Вы подняли очень интересную тему, о которой думаю давно. КАК сделать на блоге большие фото, и в тоже время, чтобы размер фотографий по минимуму загружал скорость загрузки страниц?

    [Ответить]

    Наталья Акулова Reply:

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

    [Ответить]

  6. Есть такое мнение если картинка скачена, то хоть как ее изменяй код остается и роботы считают, что это не оригинальная картинка?

    [Ответить]

    Наталья Акулова Reply:

    Олег, честно говоря, первый раз такое слышу. Может кто-то из читателей подскажет?

    [Ответить]

    Лина Reply:

    Кстати, я тоже хотела поднять этот вопрос. Если просто обрезать картинку и добавить свою надпись, то она от этого уникальной не станет.

    [Ответить]

    Наталья Акулова Reply:

    не станет, сейчас дописываю статью по этому поводу

    Василий Цубера Reply:

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

    [Ответить]

  7. Станислав:

    Нет, способ сделать картинку уникальной есть. Надо «отзеркалить» её в Фотошопе. Делается это так: Добавить файл — > Изображение — > Вращение изображения -> Отразить холст по горизонтали. Это делает фото уникальным. Я так на своем сайте делаю, фотки махом индексируются.

    [Ответить]

    Наталья Акулова Reply:

    Станислав, спасибо за подсказку

    [Ответить]

    Марина Reply:

    Станислав, не факт, что кто-то до вас уже не «отзеркалил» туже самую фотку. Лучшая фотография — своя собственная!!

    [Ответить]

    Наталья Акулова Reply:

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

    [Ответить]

    Лина Reply:

    Есть специальный сервис TinEye, на котором можно проверить уникальность картинок.

  8. ZeroXor:

    А что, очень даже удобно. И внешне очень похоже на стандартный графический редактор — все очень интуитивно. Если под рукой нет GIMP’а — буду теперь знать, куда идти.

    [Ответить]

  9. Надо разобраться с этим. Моя дочь хорошо в фотошопе разбирается.

    [Ответить]

    Наталья Акулова Reply:

    там понятно все))) Станислав все пошагово объяснил

    [Ответить]

  10. Статья действительно нужная и полезная. Ведь постоянно на блог надо картинки добавлять.

    [Ответить]

  11. Вот ведь лень разбираться в новом, делаешь по накатанной, а здесь оказывается было то что ищешь. Только читал невнимательно! :oops: Начну пользоваться, надо менять привычки :)

    [Ответить]

  12. Андрей:

    Спасибо очень полезная информация. Я раньше картинки не оптимизировал, а просто вставлял в текст. Правда подгоняя размер, иногда прописывал титл и на этом все. Еще раз спасибо за полезную информацию. И примите мои поздравления с наступающим 8 марта. И так, как поздравления уже опубликованны, то приглашаю Вас в гости С уважением Андрей.

    [Ответить]

    Наталья Акулова Reply:

    Андрей, спасибо за поздравления!!! Через статью будем говорить еще о том как картинки уникализировать)))) А в гости- обязательно!

    [Ответить]

    Panzer voran Reply:

    Наталья, оптимизация картинок — это не только изменение их размеров, но и количества пикселей на дюйм. Для Инета хватит и 72 dpi.

    [Ответить]

  13. Panzer voran:

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

    [Ответить]

  14. Я раньше писала статьи, просто вставляла фотографии или картинки и совсем их не подписывала и не оптимизировала. Теперь понемногу исправляю все. Ведь картинку тоже надо подписывать под название статьи. Сколько мне теперь надо всего исправлять!

    [Ответить]

    Василий Цубера Reply:

    Да придется. Дело в том что много людей попадают на блог или сайт, по картинкам. Примерно в общем такая статистика. 3000 посетителей из них 300 приходят по картинкам. Если в каждой статьи есть картинки

    [Ответить]

  15. Без картинок статьи выглядят сухо. Они нужны на блоге обязательно.
    Наташа, а в редактировании картинок заглавие надо писать как в статье? И alt прописывать как. тоже название статьи писать?
    И еще- на латинице подписывать надо непосредственно, когда картинку только редактируешь, или уже когда загрузил в админку?

    [Ответить]

    Наталья Акулова Reply:

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

    [Ответить]

  16. Наташа, сегодня сидела в фотошопе, оптимизировала картинки для будущей статьи. все, оказывается, очень просто. А я раньше вставляла , особенно свои фото, они большие и сильно грузят блог. Теперь надо потихоньку все оптимизировать, что еще не удалила с компьютера. Но картинки, которые скачиваю с интернета, легкие.
    Очень все понятно ты расписала в статье. Просто я не придавала значение этому.
    Спасибо тебе большое. :|

    [Ответить]

    Наталья Акулова Reply:

    Ольга, не все картинки в интернете «легкие», так что советую проверять, чтобы лишний раз блог не нагружать

    [Ответить]

  17. Наташа, блог твой понравился, ты молодец. У меня вопрос совсем неопытного новичка. Так ли я поняла, заголовок картинки должен быть таким же, как и заголовок статьи? А если к статье даешь от 3 до 8 картинок и что же на всех один и тот же должен быть заголовок? Наверное, все же я что-то не так поняла. И вот вы все восторгаетесь Sibscribe, а я никак не могу в нем разобраться. Хотела зарегистрироваться, так он меня замучил. Все время выдает, что я неправильно ввела пароль или логин. Откуда он знает, если я еще не регистрировалась. Не выдержала,ушла. Но я-то понимаю важность этого сервиса. Моему блогу уже пошел третий месяц, а посетителей мало. Я не знаю и не люблю соцсети. Не придавала им значения. А сейчас понимаю, что надо. Но ни у кого не найду, чтобы было написано подробно: что, как, делать, куда нажимать, ну как полагается для новичков.

    [Ответить]

    Наталья Акулова Reply:

    Валентина, спасибо за вопросы. Я делаю одинаковым только заголовок первой картинки, остальные уже называю другими, подходящими по смыслу, словами. А насчет сервиса- в левом верхнем углу есть форма для ввода логина и пароля. Так как вы еще не зарегистрированы, она вам не нужна. Слева от нее есть надпись- регистрация, нажимаете на нее и переходите к регистрации. Попробуйте

    [Ответить]

  18. Наталья, Ваш блог потенциально опасен для меня :oops: Сажусь почитать одну статью и пропадаю :roll:

    [Ответить]

    Наталья Акулова Reply:

    Галина, наоборот хорошо, когда много полезного в одном месте :)

    [Ответить]

  19. О необходимости называть картинки латиницей знала, но не делала. буду исправляться, картинок у меня много!

    [Ответить]

  20. Наталья, я еще и еще возвращаюсь к этой статье. Хорошая статья и вопросы и рассуждения комментаторов также помогают мне понемногу набираться знаний. У одного блогера прочла, что картинки также делают копии страниц, или дубли, что мешает успешной оптимизации сайта. Я попробовала избавиться способом, который он предложил, но у меня получился сбой в похожих картинках. Я еле исправила то, что сама натворила. Но хочу спросить, Наталья, а ты что-нибудь скажешь по этому поводу? Блогер серьезный писал, наверное что-то напутала я. И я просто хотела бы знать, действительно ли картинки тоже добавляют дублей страниц?

    [Ответить]

    Наталья Акулова Reply:

    С картинками не разбиралась и на дубли не проверяла, не буду лукавить

    [Ответить]

  21. Здравствуйте!
    Рано или поздно каждый блогер приходит к оптимизации изображений. Хорошо, когда количество картинок не перевалило за… потому что ручная работа самая трудная.
    Наталья, спасибо, что всё так чётко объяснили. :smile: Чтобы мы не занимались извращениями :grin:

    [Ответить]

  22. Наталья, отличный вариант редактировать картинки в онлайн фотошоп, но я всё же привык делать картинки в обычном фотошопе. Как делаю я. Обычно беру картинку которую хочу загрузить себе на блог, обрезаю её в программе Faststone. С помощью этой программы я просматриваю картинки на компьютере. Так же этой программой могу уменьшить размер картинки и добавить нужные мне элементы. А потом открываю картинку в фотошопе, добавляю текст (название блога). Могу ещё что то там изменить, а после этого сохраняю на компьютер. Только сохраняю не просто так, а с помощью специальной функции, называется она «Сохранить как для Web — устройств». Там ещё можно поэкспериментировать с качеством самой картинки, для того чтобы ещё уменьшить вес картинки. Вот такие мероприятия провожу я. Казалось бы, что это долго и в двух программах всё делать нужно. Но если отточить этот процесс, то он проходит очень быстро. :shock:

    [Ответить]

Оставьте комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

(Правила комментирования)

Каждому комментатору книга в подарок!

Книга расскажет как повысить свою эффективность в деловой сфере и в отношениях с другими людьми