Практика разработки Web-страниц


Изображения слишком долго загружаются - часть 3


  • Когда изображение будет готово, переместите его в ваш веб-каталог и просмотрите в своем броузере – и сохраните исходный файл, на тот случай если вам не понравится рисунок с пониженным качеством.. Если цвета не в порядке, обратитесь к разделам "Сплошные цвета в рисунках JPEG смотрятся плохо" или "Цвета в рисунке GIF зернистые и неровные".
  • Если вы изменяете размеры изображения, убедитесь в обновлении тэгов <IMG>: в атрибутах width и height должно стоять число пикселов, показанных в графическом редакторе. Всегда точно устанавливайте эти атрибуты, иначе броузеру придется приспосабливаться к схеме вашей страницы всякий раз при загрузке изображения. Неплохо также использовать атрибут alt, так как он задает текст, который отображается, пока загружается изображение.

    В Fireworks, Photoshop или ImageRead, вы можете просматривать изображение при изменении значений установок.

    увеличить изображение
    В Fireworks, Photoshop или ImageRead, вы можете просматривать изображение при изменении значений установок.

    <img scr="kj.jpg" width=90 height=140 alt="Photo of Kirk and Jade">

  • Если вы хотите занять посетителей, пока загружаются большие изображения, экспортируйте ваши изображения в interlaced GIF-файлы или progressive JPEG-файлы. Когда посетитель открывает страницу, эти файлы отображаются так, как они загружаются – сначала с низким разрешением, а затем становятся все лучше и лучше, пока не загрузятся полностью.

    Форматы изображений в сети

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

    • JPEG может сохранять миллионы цветов на минимальном пространстве. Это почти всегда лучший формат для фотографий, поскольку он делает цвета более гладкими, а файлы намного меньше. Когда вы сохраняете JPEG файл, вы определяете нужное вам разрешение – обычно в шкале от 0 до 100 – и программа определяет детали в цвете согласно вашей установке. Попробуйте уровень разрешения 70, так как он является хорошим компромиссом между маленьким размером файла и детальностью изображения. JPEG имеет два известных недостатка. Первый – его схема сжатия делает однотонные области пятнистыми, размывает острые грани или меняет цвета, делает шрифты нечёткими. По этой причине вы не должны использовать JPEG для логотипов или для графических изображений, содержащих текст. Второй – JPEG не позволяет вам определять прозрачность – так что фон не может просвечивать вокруг краев изображения.
    • GIF лучше всего подходит для логотипов и рисунков, особенно для тех, которые содержат текст. Он имеет 256 различных цветов, относящихся к палитре изображения. Чтобы сделать ваш GIF-файл меньше, вы можете использовать палитру с меньшим количеством цветов – логотипы могут иметь всего 4 или 8 цветов, например. GIF проделывает большую работу по сжатию больших однотонных областей, то есть чем меньше деталей на вашем изображении, тем меньше полученный файл. GIF имеет некоторые специфические способности. Вы можете задать прозрачность, так что ваше изображение покажет фон страницы вокруг краев. Вы также можете использовать GIF для анимации.
    • PNG был разработан как замена для GIF, но, к сожалению, не стал популярным. Он обладает всеми возможностями GIF (кроме анимации), делает изображения меньше (до 5-25% от исходного) и может сохранять миллионы цветов. Он также предлагает настоящую прозрачность: мало того, что фон может показываться вокруг граней, но и полное изображение может быть более или менее прозрачно. Поскольку броузеры ранее 4 версии не показывают PNG-файлы, вы, возможно, предпочтете избегать их пока. Однако в будущем они могут стать стандартом.




    Начало  Назад  Вперед