Лучше меньше картинка, да лучше
Все! В конце концов WEB-страничка готова, и можно начинать зазывать на нее сначала друзей и знакомых, а потом и всех остальных. Прежде чем делать это, я советую оценить, насколько страница перегружена графикой. Считается, что оптимальный размер первой страницы, включающей все тексты, картинки и звуковые файлы - все-все, что будет грузиться, - не должен превышать 35-40 килобайт. Согласно исследованию одного американского маркетингового центра, каждое дальнейшее увеличение размера страницы на 10 килобайт "отсекает" от нее 10 потенциальных посетителей. У них просто не хватает терпения дожидаться, пока загрузится ваш шедевр. Если страничка получилась громоздкая, то, скорее всего, картинки недостаточно оптимизированы для Интернета.
Чем отличаются JPEG и GIF?
Чем отличается советский образ мышления от американского? Разработали обе страны новый спутник. Очень нужный, но тяжелый слишком, никак его в космос не запустить. Сидят американцы и думают: "Эх, как бы сделать такие микросхемы, чтобы эта штука весила поменьше..." А русские ученые думают : "Эх, как бы сделать такую ракету, чтобы всю эту бандуру на орбиту вывести..."
Картинки в Сети хранятся в основном в двух видах - JPEG или GIF, не считая нескольких других, которые используют лишь небольшое количество пользователей. У каждого из этих форматов есть достоинства и недостатки, которые нужно знать, чтобы размер файлов был минимальным при хорошем качестве.
Какой формат выбрать?
JPEG
GIF
JPEG идеален для картинок, в которых встречается большое количество цветов. Например, для фотографий. В JPEG вы сами выбираете качество сохраняемой картинки - от 100 до 10-15 (меньше не имеет смысла - картинка становится слишком плохой). Используйте низкое качество, когда не существенна размытость картинки - например, на фоновом изображении. Самая частая ошибка - использование JPEG в баннерах или картинках, где присутствует текст. Так как JPEG сохраняет изображение с потерей качества (маленькой или большой, но все равно потерей), то текст будет обязательно размазан. Поэтому нужно запомнить раз и навсегда: если в картинке есть текст, нужно сохранить ее в GIF.
GIF сохраняет изображение без потерь, но из-за этого оно может стать слишком большим. Поэтому имеет смысл применять GIF только на тех изображениях, где количество цветов ограничено несколькими десятками. Например, в логотипах фирм, рисунках (особенно черно-белых), небольших элементах WEB-страниц, таких как кнопки, линейки или заголовки. Совсем небольшие картинки также рекомендуется сохранять в GIF, так как JPEG вносит слишком много искажений в изображения с мелкими деталями.
Кроме того, большое достоинство формата GIF - в возможности создания анимационных баннеров. Баннеры вообще не рекомендуется делать в JPEG, так как они наверняка имеют какой-то текст. Чтобы он не оказался размытым, нечетким, придется сохранить картинку с очень хорошим качеством и, следовательно, сильно увеличить ее размер. Многие пользователи попросту не дождутся, пока такой большой баннер загрузится, и не увидят вашу рекламу. Оптимальный размер для баннера - 10 килобайт или меньше.
PHOTOSHOP: уменьшаем изображение при сохранении
Предположим, вы определились, в каком формате записать изображение, - JPEG или GIF. Проследите, чтобы разрешение вашей картинки было 72 пиксела на дюйм - большего для монитора не нужно. В меню PHOTOSHOP выберите "Изображение" - "Размер изображения" - "Разрешение = 72". Пункт "пропорции" должен быть отмечен галочкой (чтобы при изменении размера картинка не оказалась сжатой или приплюснутой), а пункт "размер файла" - нет.
JPEG сохраняется очень просто. В меню "Файл" - "Сохранить как" - "Сохранить JPEG (*.JPG)". Сначала попробуйте сохранить картинку с низким качеством (режим "качество - низкое") или, в крайнем случае, "качество - среднее". Если результат неудовлетворительный, попробуйте увеличить размер картинки, чтобы детали на ней не были размыты. Посмотреть, как картинка выглядит после всех пертурбаций, можно из любой другой программы, например, из броузера.
Для формата JPЕG увеличение резкости изображения автоматически увеличивает и его размер. Если картинка все же требует большей резкости, то попробуйте сначала применить фильтр "резкость по краям". Он дает неплохой результат при незначительном увеличении файла.
Сохранять GIF несколько сложнее - больше вариантов. Начнем. Чтобы перевести файл в формат GIF, выберите в меню "Режим" - "Индексированные цвета". Появится окошко, где нужно выбрать режим.
Разрешение должно быть 3, 4 или 5 бит на пиксел, что, соответственно, означает сохранение картинки с 7, 15 или 31 цветом. Большее количество цветов особого смысла в большинстве случаев не имеет, так как непомерно раздувает размер файла. Чем больше картинка, тем с меньшим цветовым разрешением она должна быть сохранена. Экспериментируйте, переводите картинку в разных режимах и, если результат не нравится, возвращайте все назад, нажав в меню PHOTOSHOP "Редактирование" - "Отменить" или CTRL + Z.
Не забудьте про параметр "Палитра". Если изображение состоит из небольшого числа цветов и имеет большие области одного цвета, то лучше всего использовать "Адаптированную" палитру с "не заданной" настройкой. Если же вы сохраняете небольшую фотографию, то лучше подойдет "Настройка" - "Случайная". "Случайное" распределение цветов делает размер файла больше, но иногда точнее передает фотоснимок. Советую сначала всегда пробовать ставить настройку "Не заданная" и, если вас устраивает качество картинки, останавливаться на ней.
В случае если вы будете непринципиально менять картинку (например, добавляя пункт в графическое меню или название на кнопке), то в следующий раз вам не придется мучиться, подбирая параметры оптимизации. Палитру - цвета, из которых состоит картинка - можно записать и использовать. Для этого нажмите в меню "Режим" - "Таблица цветов" - "Сохранить". А когда будете переводить в GIF, то выберите "Палитра" - "Заказная", а затем - "Загрузить" сохраненную вами палитру.
Чего делать не надо
1. Самое главное - не вставлять в одну страничку много больших изображений. Например, когда вы делаете фотоальбом, то лучше дать много маленьких картинок, нажав на которые читатель сможет посмотреть большую. Хочу заметить, что исправление в HTML-странице параметров WIDTH и HEIGHT, отвечающих за отображаемый размер картинки, практически ничего не приносит. Картинка действительно будет выглядеть маленькой, но грузиться будет так же долго. Кстати, параметры WIDTH и HEIGHT должны обязательно присутствовать, чтобы броузер мог отображать страничку, даже не дождавшись полной загрузки картинок. Для уменьшения изображения в меню PHOTOSHOP выберите "Изображение" - "Размер изображения" и введите другой размер. Как я писал выше, пункт "пропорции" должен быть отмечен галочкой, а пункт "размер файла" - нет.
2. Никогда не масштабируйте (не изменяйте размер) картинки, состоящей из сплошных цветов. При изменении масштаба PHOTOSHOP подбирает цвета таким образом, чтобы создать плавные переходы между границами областей. Из-за этого размер файла может вырасти в 2-10 раз. Используйте подобные картинки, не меняя их размера. В некоторых пакетах, например, COREL GALLERY (галерея клипартов, входящих в состав COREL DRAW), есть возможность задавать размер картинки, которую вы хотите получить. Тогда вам не придется перемасштабировать ее в программе PHOTOSHOP.
3. Если после изменения размера вам не понравился вид фотографии, не меняйте его прямо с полученной картинки. Она очень потеряет в качестве. Лучше отмените ваши действия (CTRL + Z) и проделайте операцию с оригинальным изображением. После изменения размера изображение станет немного размытым. В большинстве случае имеет смысл повысить резкость.
4. PHOTOSHOP 4-й версии по умолчанию записывает в любые картинки их маленькую версию, чтобы потом можно было понять содержимое файла без его открытия. Это, естественно, увеличивает их размер. Чтобы отключить эту функцию, снимите галочку с параметра "Сохранить миниатюру" при сохранении.
5. Еще раз хочу напомнить то, о чем говорил выше: если в картинке есть текст - забудьте про JPEG.
6. В большинстве случаев старайтесь не делать картинки размером, превышающим 10 килобайт. В случае формата GIF, если картинка получилась больше 10 килобайт, советую сохранить ее в режиме "INTERLACED". Тогда она будет появляться на страничке постепенно, по мере загрузки - из размытого состояния постепенно переходя в четкое. И читатель не будет нервничать, дожидаясь ее загрузки. Между тем это увеличивает размер картинки всего на 1-2. Для JPEG есть похожая опция - "PROGRESSIVE JPEG". Но ее не поддерживают броузеры ранних версий. Сохранить JPEG-файл в таком формате можно, например, с помощью SMART SAVER, речь о котором пойдет ниже.
Старайтесь всегда давать картинкам названия (тег ALT=""). Посетитель странички сам решит - дожидаться ему загрузки картинки или можно перескочить на следующую страничку. Кстати, этот тег используют некоторые поисковые системы, придавая тексту заголовков значительный вес.
Если вы никак не можете уложиться в лимит 30-40 килобайт на страницу - создайте упрощенную версию страниц для нетерпеливых посетителей (а их будет большинство).
7. Еще один совет по сохранению файлов. Не меняйте режимы и качество оригинальной картинки, а "играйте" с ее копией. Чтобы сделать копию, нажмите в меню "Изображение" - "Создать копию". Это даст вам возможность потом вернуться к оригинальному изображению, если вы сделаете слишком много изменений и результат вам не понравится.
Умный "сохранятель" - SMART SAVER
SMART SAVER - это улучшенная версия "сохранялки" PHOTOSHOP, позволяющая мгновенно оценить качество записываемого изображения. SMART SAVER автоматически встраивается в любую версию программы PHOTOSHOP. Чтобы записать с его помощью изображение, выберите в меню "Файл" - "Экспорт" - "PHOTOIMPACT GIF SMART SAVER" или "PHOTOIMPACT JPEG SMART SAVER".
Слева вы увидите оригинальное изображение и его размер, а справа - сохраняемое изображение. Для картинок JPEG наиболее оптимальны следующие параметры: SMOOTH = NONE (резкое изображение), SUBSAMPLING = YUV411 (наилучшее качество при минимальном размере), MODE = STANDART OPTIMIZED. Движок "качество" установите в то положение, при котором картинка выглядит без искажений.
Источник: www.vebius.com.ru