Оптимизация изображений: Adobe Photoshop и Image Optimizer

Содержание.

  1. Программа Adobe Photoshop.
  2. Программа Image Optimizer.
  3. Программа Blogger.
  4. Сколько картинок проиндексировано?
  5. Уникальность картинок для поисковых систем.

Программа Adobe Photoshop.

Для того, чтобы ускорить загрузку блога, рекомендуется оптимизировать изображение, то есть при минимальном объёме файла, получить максимально качественную картинку. Лидером рынка в области редактирования web-изображений является редактор Adobe Photoshop (Фотошоп). Скачать последнею версию можно с сайта разработчика или воспользоваться услугами таких программ, как MediaGet. Я выбрала последнее. Вот скаченный мной файл Adobe_Photoshop_CS5_En-Ru-Ukr. При обозначении настроек принято использовать английский язык, поскольку перевод (русификация программы) может варьироваться. Я же буду указывать обозначения, задействованные в данной версии программы.

Общие настройки сжатия изображения.

После предварительной обработки фотографии, выбираем пункт "Файл"-"Сохранить для Web и устройств". Не стоит сохранять оптимизированные картинки поверх оригинала, исходные изображения лучше держать под рукой. При сохранении, имя файла присваиваем латинскими буквами без пробелов, используя в качестве разделителя слов тире, формат - "Только изображения".
Открыть меню для оптимизации изображения Photoshop.
Открыть меню для оптимизации изображения Photoshop.
Определяемся с удобным способом предварительного просмотра результата оптимизации изо в сравнении с оригиналом:
  • Исходное,
  • Оптимизация,
  • 2 варианта,
  • 4 варианта.
Можно выбрать уже готовый вариант установок сжатия рисунка в поле "Набор". Для того, чтобы добавить свои часто применяемые параметры сжатия, нужно, после задания их значений, вызвать всплывающее меню и нажать на "Сохранить настройки". В том же меню есть возможность оптимизировать рисунок, задав лишь желаемое значение размера файла. Но для лучшего результата всё же следует использовать ручные настройки.
Сохранить настройки сжатия в Photoshop.
Сохранить настройки сжатия в Photoshop.
От показа метаданных я отказываюсь. Они увеличивают объём файла картинки.

При необходимости можно изменить размер изображения. Нежелательный эффект: изменение пикселей в картинке ухудшает чёткость рисунка. Я для манипуляций размера использую программу Image Resize Guide Lite (скачать с сайта разработчика). На мой взгляд, итоговая картинка получается чётче, чем в Фотошопе. А скриншот, по-возможности, стараюсь сразу получить нужного размера, либо предварительно уменьшив размер программы (см, рис. ниже), либо изменив масштаб в браузере: "Вид"-"Масштаб".
Image Resize Guide Lite.
Image Resize Guide Lite.

Оптимизация изображения в формате PNG-8.

Оптимальным вариантом для скриншотов является формат PNG-8 (вариация формата PNG). Данный формат предназначен для графических изображений и позволяет получить наилучшее сжатие, степень которого в наибольшей мере определяется количеством цветов и алгоритмом сокращения цветов:
  1. Перцепционная - за основу берутся текущие цвета скриншота, сохраняется целостность цвета, особое внимание уделяется восприятию цветовой палитры человеком.
  2. Селективная - предпочтение отдаётся Web-безопасным цветам (количество: 216), которые во всех браузерах выглядят одинаково.
  3. #000000#000033#000066#000099#0000CC#0000FF
    #003300#003333#003366#003399#0033CC#0033FF
    #006600#006633#006666#006699#0066CC#0066FF
    #009900#009933#009966#009999#0099CC#0099FF
    #00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
    #00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
    #330000#330033#330066#330099#3300CC#3300FF
    #333300#333333#333366#333399#3333CC#3333FF
    #336600#336633#336666#336699#3366CC#3366FF
    #339900#339933#339966#339999#3399CC#3399FF
    #33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
    #33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
    #660000#660033#660066#660099#6600CC#6600FF
    #663300#663333#663366#663399#6633CC#6633FF
    #666600#666633#666666#666699#6666CC#6666FF
    #669900#669933#669966#669999#6699CC#6699FF
    #66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
    #66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
    #990000#990033#990066#990099#9900CC#9900FF
    #993300#993333#993366#993399#9933CC#9933FF
    #996600#996633#996666#996699#9966CC#9966FF
    #999900#999933#999966#999999#9999CC#9999FF
    #99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
    #99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
    #CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
    #CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
    #CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
    #CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
    #CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
    #CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
    #FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
    #FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
    #FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
    #FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
    #FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
    #FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF
  4. Адаптивная - цветовая таблица состоит из наиболее часто встречающихся цветов в исходном изо.
Остальные варианты приводят к значительным искажениям картинки.
Photoshop. Формат PNG-8.
Photoshop. Формат PNG-8.
Web-цвета - допуск, с которым цвета преобразуются в ближайшие Web-цвета: чем выше значение, тем меньше вес файла и менее привлекательно изображение. Подобрать золотую середину не сложно.

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

Прозрачность позволяет создать непрямоугольные изображения, что достигается присутствием прозрачных участков рисунка, через которые можно видеть фон блога. Для прозрачности лучше подходит формат PNG-24. При постоянном однородном фоне целесообразнее использовать поле "Матовый", задав цвет, соответствующий фону.

Всегда использую галочку "Чересстрочно", т.е. постепенного увеличения чёткости картинки по мере его загрузки. Чтобы посетитель имел возможность сразу увидеть скриншот.

Оптимизация изображения в формате PNG-24.

Этот формат применяется для полноцветных изображений, использует более 16 миллионов цветов в файле, сохраняет чёткие детали рисунка, поддерживает многоуровневую прозрачность, в результате чего конечный объём графического файла получается наибольшим. Оптимизация проводится лишь в двух направлениях: присутствием прозрачности и наличием режима "Чересстрочно".
Photoshop. Формат PNG-24.
Photoshop. Формат PNG-24.

Оптимизация изображения в формате GIF.

Формат GIF поддерживает по кадровую смену изображений. Широко используется при создании баннеров и анимационной графики.

Оптимизация изображения в формате JPEG.

Для цифровых фотографий и картин с плавными переходами яркости и цвета применяется формат JPEG. Он не подходит для многоразового сжатия, поскольку каждый раз будут происходить искажения фото. Если изображение уже было оптимизировано в JPEG, то при дальнейшем его сжатии не рекомендуется использовать другие форматы.

Перед осуществлением оптимизации фоторгафии, предварительно применяем команду "Фильтр"-"Шум"-"Уменьшить шум".

Степень сжатия определяется:
Photoshop. Формат JPEG.
Photoshop. Формат JPEG.
  1. Значением поля "Качество" (при использовании очень мелких контрастных деталей, не стоит выставлять качество ниже 51),
  2. Желательным наличием режима "Прогрессивный" (постепенная загрузка изображения),
  3. Значением поля "Размытие",
  4. Не обязательным присутствием галочки "Встроенный профиль" (большинство браузеров не могут читать ICC-профиль).

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

Программа Image Optimizer.

Для быстрой оптимизации изображений без потери качества в формате PNG и JPEG можно воспользоваться программой Image Optimizer (ссылка компьютерного портала RU-BOARD). После использования Фотошопа, я применяю также эту программу, что позволяет ещё уменьшить размер объёма файла. Для JPEG практикую цифру 2 (Прогрессивный), а для PNG - 3 (Чересстрочно). При Xtreme происходит наилучшее сжатие.

Программа Blogger.

В первую очередь замечу, что поскольку блогпост не позволяет размещать у себя на сервере файлы, в Blogger интегрирован один из сервисов Google - веб-альбом Picasa. Автоматически в нём изображения закрыты для индексации поисковыми системами. Для разрешения поисковикам сканировать ваши изо, нужно сделать Picasa общедоступным.

При включении картинки в блог, Blogger автоматически размещает ссылку на её оригинальный размер и место расположения (левый/правый край, по центру). Код при этом выглядит следующим образом (для работы с кодом нужно при редактировании/создании сообщения выбрать вкладку "Изменить HTML"):
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s320/tigr.jpg" width="320" /></a></div>
Обратите внимание на часть адреса /s1600/ - он определяет размер изо. Оно может варьироваться по вашему усмотрению, а не только (маленький, средний, крупный, очень крупный, исходный). В данном случаем установлен "средний размер". Но, если выбрать "исходный размер", изображение уместится в ширину сообщения блога. То есть, можно безболезненно удалить ссылку, поскольку она не увеличивает рисунок и не улучшает качество просмотра. Я стараюсь уменьшить ненужную и неэффективную ссылочную массу, поэтому располагаю большую часть картинок в их исходном виде без использования тега </a>.

При выборе варианта размещения рисунка "Исходный размер", нет таких важных параметров, как alt, width, height. В остальных случаях задаётся фиксированное значение width и соответствующее ему height. Более подробно про значения размеров изображений можете прочитать здесь.

Также мы видим тег </div>, который определяет место расположения изображения. При большом рисунке, чтобы его границы были в рамках сообщения, или малом изображении, например, кнопки, в тексте, я удаляю этот элемент. Бесполезен данный код и при использовании возможности "Добавить подпись" к рисунку. В общих чертах:
<table><tbody>
<tr><td><img/></td></tr>
<tr><td>Тигры</td></tr>
</tbody></table>
<div>
<a></a></div>
Как видите, в тег </div> заключён только тег </a>, у которого нет анкора, т.е. ваша картинка не будет увеличиваться. А место размещения рисунка определяется атрибутом class тега <table>.

Конечный код оптимизированного изо будет иметь вид:
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Тигры" border="0" height="255" src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TKT7q7GVJkI/AAAAAAAAAoM/Kbm08McseMk/s1600/tigr.jpg" style="margin-left: auto; margin-right: auto;" width="340" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Тигры</td></tr>
</tbody></table>
А это его отображение:
Тигры
Тигры

Сколько картинок проиндексировано?

Чтобы увидеть какие изображения вашего блога проиндексированы:
  1. Расширенный поиск Яндекс.Картинки.
    В графу "Находятся на сайте:" задаём URL(адрес, например, http://shpargalkablog.ru/).
  2. Поиск Google (результат: Картинки).
    В поле поиска задаём site:ваш_блог (например, site:shpargalkablog.ru).
    Здесь же можно загрузить фото через свой компьютер по нажатию на кнопку поиск по документу png, jpeg в Гугл и робот покажет его аналоги.

Уникальность картинок для поисковых систем.

И последнее, стараемся размещать свои оригинальные изображения. Поисковые системы имеют свои алгоритмы распознавания дублей, такие, например, как у онлайн-сервиса TinEye. Потренировавшись на нём, у меня получилось, что уникальной картинку можно сделать лишь путём зеркального отражения либо поворотом изображения, скажем на 15 градусов. Способ довольно известный и широко используемый. Больше всего меня удивил скриншот программы Image Resize Guide Lite (см. выше). TinEye без труда выдал несколько копий с изображением тигров. Ни уменьшение, ни обрезка, ни... результата не дали.

Яндекс и Гугл могут определять похожие изображения. Для этого в поиске по картинкам рядом с изображением нужно щёлкнуть ссылку "Другие размеры" (в Яндексе ссылка под фото имеет вид "800×600 … 1600×1200").



Похожие статьи:
  1. Фотошоп с нуля.
  2. Программа для снятия скриншота ScreenHunter 5.1 Free.
  3. Как сделать анимированный баннер в Photoshop.
в f t
наверх ↑

23 комментария:

Анонимный
Уважаемый специалисты, может быть подскажете?

Оптимизация *.jpg файла длиной 4.66 МБ в Фотошопе вручную, т.е. так: Image\Image size\ и выставка ширины изображения, пусть 35 cm, в секции Document Size, либо, например, выставка ширины изображения в секции Pixel Dimensions, пусть 30%
дает результирующий файл около 160 КБ. Это хорошо. Эта же операция тщательно прописанная в actions, т.е. созданным Batch-ом, дает результирующий файл в 7-10 раз больше. Ну почему?!!!
Благодарен за возможную помощь.
С Новым, 2011! kuznsons4@tut.by
NMitra
Да, с наступающим!!!

Не могу ответить на вопрос без соответствующей практики. На данный момент нет необходимости применения пакетной обработки нескольких фото.
ExcluZive
Боооооольшая статья!
NMitra
Надеюсь полезная ))). Старалась охватить все важные моменты.
k___k
Здравствуйте, а не подскажете как убрать ссылки с картинок в блоге. Т.е у меня каждая картинка является ссылкой на хайрез.
Спасибо.
NMitra
Наиболее часто задаваемый вопрос))

При написании/редактировании сообщения на вкладке "Изменить HTML", если убрать всё лишнее код изображения заключён в ссылку:

<a href="URL"><img src="URL"/></a>

Нужно убрать тег a.

Более подробно:
1)http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html#Blogger, 2)комментарии к http://shpargalkablog.ru/2010/07/picasa-s-nulya.html#comments
3)http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html
k___k
Опс, благодарю за оперативный ответ. Разобрался. Ссылочки к изучению приму. :)
a.tkachuk
Наташа, здравствуйте! Не могу понять вот что.
Я стандартно добавляю фотографию, и код у меня получается обычный. Из этого обычного кода я удаляю только

ХРЕФ="https://lh4.googleusercontent.com/-4xUgUFnRJdc/TXBxq0Kc3AI/AAAAAAAAAFE/mnTsm5NqRG8/s1600/viewer2.JPG"

И все, в итоге ссылки на фотографию нет. Просто картинка как у вас с тиграми.

И не могу понять как так? Может быть так нельзя делать? Ведь вы пишите про удаление тега a, а я его не удаляю.

Является ли решение с удалением href верным в данном случае?
NMitra
Здравствуйте! Вот что я увидела.

Изображение:
- не очень понимаю что это: l6="true"
- alt не прописан

Ссылка:
хотя href не является обязательным в теге a (http://pyramidin.narod.ru/html401/links.html#edef-A), всё же не рекомендую его использовать таким образом. В коде страницы элементы должны отвечать каким-то функциям. Здесь же этого не происходит.
a.tkachuk
Я так и думал. А какие могут быть последствия? Я почти на всех картинках в своем блоге удалил этот href.

Что такое l6="true" даже не догадываюсь.

Наверное, мне надо теперь везде код исправить на ваш вариант?
NMitra
Я бы наверно исправила и заодно попрактиковалась. Потом указание кода происходит на автомате. Сейчас я почти всегда пишу статьи при включенной вкладке "Изменить HTML", а раньше даже боялась туда заглядывать.

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

Рамку картинкам задавать не обязательно, а вот alt является обязательным атрибутом.
Анонимный
Как сохранить фотку после обработки в фотошопе???
NMitra
Alt+Shift+Ctrl+S

"Файл"-"Сохранить для Web и устройств"-устанавливаем необходимые параметры-кнопка "Сохранить"-"Формат-Только изображания".
marina
хороший урок для новичков
NMitra
Я этими рекомендациями пользуюсь по сей день )))
Это кажется, что написано много, а в итоге по привычке пару секунд занимает настройка в Фотошопе.
NMitra
Про "новичков" отдельное спасибо, очень стараюсь писать по доступнее
Светлана Ковалева
Наталья, ссылочка на скачивание (Adobe_Photoshop_CS5_En-Ru-Ukr) не работает. Может дадите рабочую? Буду благодарна! :)
NMitra
http://nnm-club.me/forum/viewtopic.php?t=721668&sid=3b1c5512336c4dd1835b35ce6c694a60
Или с http://www.utorrent.com
Светлана Ковалева
Спасибо, Наталья! А то у меня у компа мотор сдох, приходится временно на ноутбук фотошоп устанавливать.
Админ
Доброго времени суток!!!

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

Не могли бы мне помочь объяснить как правильно поступить ????ведь не хотелось бы огромное количество ссылок

Надеюсь мне поможете
NMitra
Доброго времени суток!!!

Прочитайте эту статью http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html о том как убрать с картинок тег a.

Но скорее всего и этого можно не делать. Огромное количество ссылок на 2.bp.blogspot.com никак не скажется на ранжировании: http://2.bp.blogspot.com/_ebKrCj8TLPk/TLIyv4GfDvI/AAAAAAAAAss/l9A_0m-Gyq8/s1600/tigr.jpg , так как на сайте нет негатива. Весь негатив/позитив остался на blogspot.com , а на 2.bp.blogspot.com одни картинки.

Картинка - это тоже страница, только её код браузер автоматом переводит в изображение. Даже если бы картинка была с URL нашего сайта, мы ссылаемся на конечную страницу. Этот вес никак нельзя перераспределить по своему сайту далее.

Ещё раз: с появлением новой ссылки на странице А, её вес (страницы А) не уменьшается. Но на странице Б, на которую ссылается страница А, этого веса становится больше. Если страница Б внутренняя, то со страницы Б можно поставить ссылку на страницу В своего же сайта и тем самым увеличить и её вес. То есть вес как бы распределяется внутри сайта. Вы, возможно, заметили, что на одном и том же сайте есть страницы и с pagerank0 (новые), и с pagerank5? Подробнее http://digits.ru/articles/promotion/pagerank.html

Общая формула действий такая:
1) количество внутренних ссылок со страницы должно быть больше чем внешних,
2) страниц http://сайт.ru/статья.html , на которых нет ссылок, должно быть поменьше.
Где-то читала предположение, что вес конечных страниц, где бы они не находились, увеличивает вес сайтов, поднятых вручную, таких как Википедия.

Так что в случае с картинками, также как и с видео, можно не переживать. Сделать что-то путное, используя только свой сайт не удастся. Единственная причина, почему изображения, взятые из интернета, я предпочитаю переносить на 2.bp.blogspot.com и соответственно в Гугл+ - это недолговечность сайтов, а тут я хоть уверенна, что вместо изображения не будет битой ссылки.
NMitra
Кстати, я не права. Наличие изображений (если они уместны) на странице скажется в положительную сторону, так как увеличит удовлетворённость посетителей страницей.
Иван Помидоров
Касательно gif/png - это всё устарело! Ныне нет никакого смысла что-либо оптимизировать в Фотошопе, потому что он значительно уступает и современным утилитам для глубокой оптимизации, типа Color Quantizer ( http://kherson.myftp.biz/cq/ ) и скриптовых Image Catalyst, ScriptPNG ( http://css-ig.net/scriptpng ) так и примитивным, но всё равно эффективным онлайновым сервисам вроде TinyPNG.