Доброго времени суток! По просьбе моей постоянной читательницы Надежды, сегодняшняя наша тема будет посвящена оптимизации картинок на нашем блоге. Я расскажу как изменить размер изображения, уменьшить его вес, прописать ключевые запросы, и открою вам какими онлайн-сервисами я пользуюсь сама. Никаких сложных, много весящих фотошопов использовать не будем! Итак, давайте приступим, тк сегодняшняя тема актуальна, для блоговодов)
Зачем нам все это нужно? Во-первых статьи с картинками выглядят гораздо привлекательнее. И конечно, если вы используете плагины или коды, выводящие похожие записи внизу статей, с картинками они выглядят гораздо интереснее и возрастает вероятность того, что ваши читатели перейдут читать другие записи. В общем так произойдет, если картинка находится в нормальном состоянии (некоторые загружают фотографии огромных размеров, например с профессиональных фотоаппаратов, да еще если их несколько… В итоге страница долго грузится и читатель закрывает ее и уходит… Возможно навсегда) Вот чтобы привести наш блог в порядок мы с вами и займемся оптимизацией картинок.
Для начала выберем подходящую картинку. На примере найдем ее через поиск яндекса images.yandex.ru/yandsearch, для этого введем запрос по нужной нам тематике, у меня например «оптимизация картинок» и сохраним понравившуюся к себе на компьютер:
Теперь перейдем на наш онлайн сервис редактирования fotofab.ru/photoshop и загрузим нашу картинку с компьютера:
И сразу нам необходимо изменить ее размер для этого выбираем опцию обрезки и задаем выходной размер, я ставлю ширину 500, а высоту регулирую в зависимости от картинки, далее выделяем нужную часть нам часть и обрезаем:
После этого уникализируем ее, добавив адрес своего блога. Выбираем раздел «текст», наводим курсором на необходимую область изображения и пишем наш текст, также измените шрифт, стиль и размер букв по своему усмотрению:
Все. Можно сохранять. «Файл», «Сохранить» в поле имя вставляем название на латинице(!) соответствующее нашему ключевому запросу статьи. Если вы теряетесь и не знаете как написать- перейдите на сервис translit.ru впишите свой ключевой запрос, например «оптимизация картинок» и нажмите «в транслит». В итоге получится optimizacija_kartinok (в место пробела я ставлю _). Обязательно отрегулируйте вес картинки изменив формат — JPEG например весит меньше всего, и качество если нужно, до размера 50 kb- примерно 40-45 будет отлично) и сохраните на компьютере:
С редактированием закончили, теперь можно вставлять нашу картинку в текст. Для этого, в нашей статье, в самом начале (для первой картинки статьи) нажимаем добавить медиафайл и загружаем отредактированное изображение с нашего компьютера:
Хотите начать зарабатывать в интернете?
Есть рабочий и "Проверенный" заработок!
и сразу отредактируем его отображение в статье. Изменим выравнивание (справа, слева или по центру- по вашему выбору), размер для первой картинки- средний, для остальных полный и вставим в нашу запись:
теперь зададим важные параметры ALT (задает описание картинки для браузеров, которые не могут отобразить картинки (например, если пользователь отключил показ изображений) и Title (при наведении мышкой на картинку показывает ее описание). Нажмите на редактирование:
и измените заголовок Title и атрибут Alt по своим запросам:
В заключении сохраните все изменения. На этом мы закончим. Как вам статья? Есть что дополнить? Пишите свои пожелания и предложения в комментариях, лучшие будут вознаграждены.
В следующий раз я расскажу об увеличении картинок, о сервисе для постинга в группы в контакте, которые в разы экономит ваше время. Чтобы не пропустить рекомендую подписаться на обновление блога. Хорошего настроения! Не забудьте понажимать на кнопочки соц.сетей!
С вами была, Наталья Акулова
Супер! Наталья, информация бомба! Кстати, поздравьте меня: сегодня особенный день, с моего сайта снят фильтр АГС!!!!!!!! УРА!!!!!!!!!!!!
Теперь могу спокойно заниматься работой, читать такие хорошие блоги, как Ваш. Внимательное отношение к мелочам добавляет авторитетности сайту. Спасибо за статью, возьму на заметку
Надежда, поздравляю!!! Очень за вас рада!
Полезная информация. Как не странно, она не менее полезна и тем кто умеет пользоваться фотошопом. Я была в ситуации когда мне нужно было привести картинки в нужный вид, а фотошопа на компьютере за которым я работала не было. Промолчу о том какими извращениями я занималась, а вот даже в голову не пришло поискать в интернете подобный сервис.
Очень хорошо вас понимаю, тк сама раньше занималась не понятно чем и случайно наткнулась на этот сервис. Пользуюсь не как профи, поэтому люблю его больше фотошопа. Решила поделиться
Я с фотошопом работаю как профи (дизайнер), но не хочу задирать нос и говорить, что фотошоп идеальная программа. Он конечно хорош и может справиться с любой задачей, но… чаще всего работать с мелкими, заточенными под определенные задачи плагинами намного быстрее и удобнее.
Поздравляю Надежда!! Я вас очень понимаю, сама была под фильтром около полугода, было очень трудно! А сообщение об ограничении в поиске Яндекс прислал прямо на мой день рождения.. Выбралась своими силами около месяца назад, не нарадуюсь!
Да действительно, статья очень хорошая, а главное нужная! Я все еще не разобралась с картинками, везде как то сложно все, а прочла вашу статью-все понятно и легко, спасибо!
Как то это очень долго делать, я например использую программу RIOT — Radical Image Optimization Tool. Возьмите себе на заметку эту программку, очень проста и легка, делает даже массовый ресайз и сжатие, позволит вам визуально настроить параметры сжатия, сохраняя минимальный размер файла. Формат изображения (JPG, GIF или PNG)
Спасибо за подсказку, кому-то это может пригодиться!
А я наоборот, решил создать портал о путешествиях, где будет очень большое количество фотографий большого размера (фотоблог, вроде сайта «Бигпикча»). Визуально такие статьи смотрятся просто потрясающе! Вы подняли очень интересную тему, о которой думаю давно. КАК сделать на блоге большие фото, и в тоже время, чтобы размер фотографий по минимуму загружал скорость загрузки страниц?
Станислав, если фотография очень много весит, можно сначала сделать ее скрин, а потом обрезать и при сохранении уменьшить ее вес в онлайн фотошопе.
Есть такое мнение если картинка скачена, то хоть как ее изменяй код остается и роботы считают, что это не оригинальная картинка?
Олег, честно говоря, первый раз такое слышу. Может кто-то из читателей подскажет?
Нет, способ сделать картинку уникальной есть. Надо «отзеркалить» её в Фотошопе. Делается это так: Добавить файл — > Изображение — > Вращение изображения -> Отразить холст по горизонтали. Это делает фото уникальным. Я так на своем сайте делаю, фотки махом индексируются.
Станислав, спасибо за подсказку
А что, очень даже удобно. И внешне очень похоже на стандартный графический редактор — все очень интуитивно. Если под рукой нет GIMP’а — буду теперь знать, куда идти.
Надо разобраться с этим. Моя дочь хорошо в фотошопе разбирается.
там понятно все))) Станислав все пошагово объяснил
Статья действительно нужная и полезная. Ведь постоянно на блог надо картинки добавлять.
Вот ведь лень разбираться в новом, делаешь по накатанной, а здесь оказывается было то что ищешь. Только читал невнимательно!
Начну пользоваться, надо менять привычки 
Спасибо очень полезная информация. Я раньше картинки не оптимизировал, а просто вставлял в текст. Правда подгоняя размер, иногда прописывал титл и на этом все. Еще раз спасибо за полезную информацию. И примите мои поздравления с наступающим 8 марта. И так, как поздравления уже опубликованны, то приглашаю Вас в гости С уважением Андрей.
Андрей, спасибо за поздравления!!! Через статью будем говорить еще о том как картинки уникализировать)))) А в гости- обязательно!
Станислав, не факт, что кто-то до вас уже не «отзеркалил» туже самую фотку. Лучшая фотография — своя собственная!!
Это точно. Сейчас пишу статью по этому поводу с программой, которая проверяет картинки на уникальность. Вот там и можно будет проверить)
Наталья, оптимизация картинок — это не только изменение их размеров, но и количества пикселей на дюйм. Для Инета хватит и 72 dpi.
Только хотел написать, что есть редакторы, но Ваше сообщение заставило меня пересмотреть свой взгляд. Действительно, не всегда на компьютерах есть графические редакторы. Поэтому я двумя руками за сервисы в качестве дополнительной поддержки.
kiborg, речь не программах вообще, а о сервисе fotofab.ru, который поможет в отсутствии редактора. Понятно, что у каждого на компе тот или иной редактор имеется. А если в другом месте нужно отредактировать?
Кстати, я тоже хотела поднять этот вопрос. Если просто обрезать картинку и добавить свою надпись, то она от этого уникальной не станет.
Есть специальный сервис TinEye, на котором можно проверить уникальность картинок.
не станет, сейчас дописываю статью по этому поводу
И я так думаю это уже не то время, чтобы поставить надпись на картинку и она уже уникальна. Сейчас не то время, и это уже все знают, можешь делать что хочешь это уже ничего не поможет/ Сейчас лучше всего заказывать, чтобы рисовали уникальную и красивую картинку.
Я раньше писала статьи, просто вставляла фотографии или картинки и совсем их не подписывала и не оптимизировала. Теперь понемногу исправляю все. Ведь картинку тоже надо подписывать под название статьи. Сколько мне теперь надо всего исправлять!
Да придется. Дело в том что много людей попадают на блог или сайт, по картинкам. Примерно в общем такая статистика. 3000 посетителей из них 300 приходят по картинкам. Если в каждой статьи есть картинки
Без картинок статьи выглядят сухо. Они нужны на блоге обязательно.
Наташа, а в редактировании картинок заглавие надо писать как в статье? И alt прописывать как. тоже название статьи писать?
И еще- на латинице подписывать надо непосредственно, когда картинку только редактируешь, или уже когда загрузил в админку?
alt у меня автоматически проставляется названием картинки, меняю заголовок. А сохранить название на латинице нужно перед загрузкой на блог
Наташа, сегодня сидела в фотошопе, оптимизировала картинки для будущей статьи. все, оказывается, очень просто. А я раньше вставляла , особенно свои фото, они большие и сильно грузят блог. Теперь надо потихоньку все оптимизировать, что еще не удалила с компьютера. Но картинки, которые скачиваю с интернета, легкие.
Очень все понятно ты расписала в статье. Просто я не придавала значение этому.
Спасибо тебе большое.
Ольга, не все картинки в интернете «легкие», так что советую проверять, чтобы лишний раз блог не нагружать
Наташа, блог твой понравился, ты молодец. У меня вопрос совсем неопытного новичка. Так ли я поняла, заголовок картинки должен быть таким же, как и заголовок статьи? А если к статье даешь от 3 до 8 картинок и что же на всех один и тот же должен быть заголовок? Наверное, все же я что-то не так поняла. И вот вы все восторгаетесь Sibscribe, а я никак не могу в нем разобраться. Хотела зарегистрироваться, так он меня замучил. Все время выдает, что я неправильно ввела пароль или логин. Откуда он знает, если я еще не регистрировалась. Не выдержала,ушла. Но я-то понимаю важность этого сервиса. Моему блогу уже пошел третий месяц, а посетителей мало. Я не знаю и не люблю соцсети. Не придавала им значения. А сейчас понимаю, что надо. Но ни у кого не найду, чтобы было написано подробно: что, как, делать, куда нажимать, ну как полагается для новичков.
Валентина, спасибо за вопросы. Я делаю одинаковым только заголовок первой картинки, остальные уже называю другими, подходящими по смыслу, словами. А насчет сервиса- в левом верхнем углу есть форма для ввода логина и пароля. Так как вы еще не зарегистрированы, она вам не нужна. Слева от нее есть надпись- регистрация, нажимаете на нее и переходите к регистрации. Попробуйте
Наталья, Ваш блог потенциально опасен для меня
Сажусь почитать одну статью и пропадаю 
О необходимости называть картинки латиницей знала, но не делала. буду исправляться, картинок у меня много!
Галина, наоборот хорошо, когда много полезного в одном месте
Наталья, я еще и еще возвращаюсь к этой статье. Хорошая статья и вопросы и рассуждения комментаторов также помогают мне понемногу набираться знаний. У одного блогера прочла, что картинки также делают копии страниц, или дубли, что мешает успешной оптимизации сайта. Я попробовала избавиться способом, который он предложил, но у меня получился сбой в похожих картинках. Я еле исправила то, что сама натворила. Но хочу спросить, Наталья, а ты что-нибудь скажешь по этому поводу? Блогер серьезный писал, наверное что-то напутала я. И я просто хотела бы знать, действительно ли картинки тоже добавляют дублей страниц?
С картинками не разбиралась и на дубли не проверяла, не буду лукавить
Здравствуйте!
Чтобы мы не занимались извращениями 
Рано или поздно каждый блогер приходит к оптимизации изображений. Хорошо, когда количество картинок не перевалило за… потому что ручная работа самая трудная.
Наталья, спасибо, что всё так чётко объяснили.
Наталья, отличный вариант редактировать картинки в онлайн фотошоп, но я всё же привык делать картинки в обычном фотошопе. Как делаю я. Обычно беру картинку которую хочу загрузить себе на блог, обрезаю её в программе Faststone. С помощью этой программы я просматриваю картинки на компьютере. Так же этой программой могу уменьшить размер картинки и добавить нужные мне элементы. А потом открываю картинку в фотошопе, добавляю текст (название блога). Могу ещё что то там изменить, а после этого сохраняю на компьютер. Только сохраняю не просто так, а с помощью специальной функции, называется она «Сохранить как для Web — устройств». Там ещё можно поэкспериментировать с качеством самой картинки, для того чтобы ещё уменьшить вес картинки. Вот такие мероприятия провожу я. Казалось бы, что это долго и в двух программах всё делать нужно. Но если отточить этот процесс, то он проходит очень быстро.