Берём исходник. Это GIF 84х98. Картинка имеет особенность. Три шарика на ней не залиты оранжевым цветом, они раскрашены в небольшой мелкий горошек с жёлтенькими вкраплениями. Эту картинку мне надо использовать в нескольких частях страницы. Поэтому где-то я вставляю её в полный размер, а где-то хочу изменить ей размер, задав нужное свойство у тега <img>
Итак, исходник. Для начала поиграемся с ним в Адоби Фотомастерской. Вот что мы имеем:
Замечу лишний раз, что моя буква "Х" с шариками - это GIF в режиме "Indexed color", как это обычно с такими картинками и бывает. Теперь я уменьшу её в стандартном диалоге Image size. Результат:
Боже мой! Наши шарики стали похожи на иссохшиеся, затвердевшие куски севернокорейского мороженого! Посмотрите, в каждом из шариков образовались ненужные жёлтые вкрапления, заметные глазу.
Тут к доктору не ходи, многие знают, как на самом деле надо поступать в данной ситуации. Перед изменением размера картинки её надо перевести в режим RGB (Mode->RGB). Тогда всё станет на свои места:
О чудо! Шарики остались оранжевые.
Это была теория. Теперь поговорим, какое место данный случай может занять при вёрстке шаблонов сайта. Дело в том, что все браузеры работают с картинками index-color'а по-разному. Смотрите различия (смотрите нижние картинки, результатные):
Уу-у-у-ух! Майкрософт подкачал как обычно, Фирфокс с чего-то вдруг тоже. А вот Опера и Сафари, которыми, как скажут 99% людей, "никто не пользуется", с задачей справились. Наверное, поэтому ими никто и не пользуется :)
Решения описанной мною проблемы каждый пусть придумает себе сам, это будет домашнее задание такое. Лично я на всё махнул ногой и без задней мысли стал использовать в шаблоне две разных картинки. Одну побольше, другую поменьше. Ха-га, ха-га...
