High Star

Оптимизаци графики под web




На верхней панели программы Adobe Photoshop выберите Fail | Save for Web (Файл | Сохранить для Web), и перед вами откроется диалог Save For Web (Сохранить для Web) оптимизации изображений, предназначенной как раз для помещения графики в Интернете. Вот она:

Оптимизация графики для web
Оптимизация изображения для web

На верху вы видите четыре закладки: Original (Исходное изображение), Optimized (Оптимизированное), 2-up и 4-up. Я выбрала закладку 2-up, и у меня появилось два изображения, одно - левое - оригинал, а вот правое мы будем изменять настройками, подбирая наилучший вариант. Вы же, если желаете, можете выбрать 4-up, и у вас будут четыре изображения, одно из которых - оригинал, а три других можно изменять настройками.

Изображение у меня в формате .jpg, думаю и у вас тоже. Есть еще формат .gif, но для фотографий более подходящим является все-таки .jpg. Об этом мы еще будем говорить, а пока - нам главное уменьшить размер изображения.

Справа находится как раз то, что нам нужно. В поле Settings (Настройки) выберите вариант .jpg, сразу под ним станут доступны в нижнем окошке варианты: Low (Низкое), Medium (Среднее), High (Высокое) и Maximum (Максимальное). Перебирая эти варианты, следите за изменением значений под оптимизированным изображением, где показывается "вес" изображения, а также время его вероятной загрузки. Стремитесь к максимальному уменьшению файла, но при этом качество изображения все-таки должно оставаться приемлемым.

Я лично остановилась на medium (среднее), размер файла оказался 10, 64 килобайт, и время загрузки 5 секунд. Что ж, неплохо. Соглашусь, фотография у меня не лучшего качества, и я взяла ее только ради примера. Но все равно, старайтесь, чтобы ваше изображение не было больше 30 килобайт. Хотя, конечно, есть такие шедевры, на которые и 50 килобайт не жалко. Но лучше все-таки не мучить посетителей своей странички ожиданием загрузки. Но, повторяю, выбор все-таки за вами. Ваша страничка, что хотите то и воротите. Я могу только советовать.

Теперь осталось только нажать на кнопку Save (Сохранить) и сохранить нашу фотографию под новым именем, а лучше всего и в новой папке. Для этого открываем новую папку, называем ее foto и сохраняем нашу оптимизированную фотографию, скажем под именем foto01.jpg.

Вот и все. Теперь сравним насколько наша первая, необработанная фотография, отличается от оптимизированной:

Если первоначальная фотография имела размер: 500 пикселей в ширину, 493 - в высоту, занимала объем памяти в 254,1 килобайт, грузилась пять минуты, содержала ненужный фон, то новая, оптимизированая, занимает всего 245 х 354 пикселей, весит 10,64 килобайт, грузится всего 5 секунд, и при этом практически не потеряла в качестве… Комментарии, я думаю, излишни.

Открываем NotePad (Блокнот), открываем наш файл index.html и заменяем запись на:

Листинг 5. Наш новый шаблон

<HTML>
  <HEAD>
    <TITLE>Моя Домашняя Страничка</TITLE>
  </HEAD>
  <BODY>
    <IMG src = "foto/myfoto01.jpg">
    Ура! Привет люди! Встречайте!
  </BODY>
</HTML>

Видите, адрес нашего изображения немного изменился? Ведь мы создали новую папку foto, поэтому мы и указали новый путь: foto/myfoto01.jpg

Так скорее же откроем нашу "облегченную" страничку, и будем опять радоваться. Радоваться тому, что сделали еще одно важное, полезное дело.

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

И это важный шаг, поверьте мне!