Фотография стоит тысячи слов. Старая поговорка, но правда в Интернете, где вы можете передавать глав текста в время, необходимое для скачивания одного большого изображения. С тех заметить, как фотографии всегда будут в последнюю очередь, чтобы показать, когда вы работаете? Это потому, что крупнейший кусок время загрузки происходит из графических файлов.

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

Кстати, многое изменилось после первого издания этого учебника - это еще не все для оптимизации сегодня качество изображения, чем просто знать ваши GIF-файлы с вашего JPEG. (Хотя мы рассмотрим, что, так как это может быть ваш первый раз.) Есть теперь другие форматы файлов (например, PNG) стоит рассмотреть, и усовершенствованных методов взвешенных-оптимизации, чтобы бросить в смеси.

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

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

Она не нужна? Не используйте его.

Ничего сложно или Азы об этом, но, друг, он творит чудеса. Прежде чем делать что-нибудь еще, удалить все лишние изображения с дизайном вашей страницы. Теперь "лишних" не означает, что ваш логотип компании или полезную карту в Ваш офис. Мы говорим о том, что умные, анимированные конверт рядом с вашим Отправить почту ссылку. Или, если ваш сайт имеет копии страницы с большим логотипом и [Щелкните здесь, чтобы войти!] ссылку, канавы и отправить вашу аудиторию непосредственно на главной странице. Поверьте нам: быстро погрузки, функциональный веб-сайт дает вашему бизнесу лучшее изображение, чем некоторые Splashy Intro, который предлагает пользователю нет реального содержания, и ничего не делать, но ждать следующую страницу для загрузки.

Помните, что бритье ничтожные 10KB изображения с вашего сайта не может звучать как что впечатляющие улучшения, но если вы работаете с 40 КБ страницы, что 10 Кб представляет здоровых 25-процентное сокращение времени загрузки не плохо для торговли потери привет-Res изображение вашего нового Привет Китти тостер.

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

Нажмите для передачи данных

Кроме того, вы можете заменить анимированных GIF-файлов со статическими изображениями, которые принимают доля времени, чтобы загрузить.

Наконец, много фантазии "заголовок" и навигации графика может быть заменен на больший размер текста, соответственно стиле с теги или CSS. В эти дни, этот вариант работает лучше, чем когда-либо, так как Windows XP и Mac OS X браузеров изначально поддерживает текстовые сглаживания. Этот процесс сглаживает неровные края вокруг шрифтов, давая Тип экрана более естественный, изысканный внешний вид, особенно при больших размерах шрифта.
Форматы изображений

Если вы не стремится вызывающие, что ретро-покупать АРЧИ или GOPHER чувствую, вы, вероятно, будет использовать некоторые изображения на ваших страницах. Просто следуйте нескольким простым указаниям во время создания изображения, и на страницах будет скачать в рекордно короткие сроки.

Для начала решить, будет ли данное изображение должно быть GIF, JPEG, PNG или. Это может показаться элементарным, но это ошибка, которая все еще замедление хороший процент от веб-страниц там.

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

Теперь, PNG очень много, как GIF - на самом деле, она была разработана, чтобы быть патент-бесплатная альтернатива GIF, созданные с такой же использует в виду. PNG опирается на основные особенности GIF, с улучшений, как больше цветов, причудливые многоуровневой прозрачности (идеально подходит для тонких эффектов тень), даже гамма-коррекции, которая гарантирует, что цвета выглядят одинаково на Mac, Windows и Linux компьютеров. Лучший из всех, не только PNGs так же хорошо, как GIF-файлы в почти во всех отношениях, но лучше использовать PNG-сжатие файлов, так что они меньше файлов, которые загружаются быстрее.

Короче говоря, PNG является отличной заменой GIF, встроенный в ручку же типа графика (логотипы, иконки, неправильной формы, предметы, и т.д.) лучше и быстрее. Там только один большой недостаток: маленькая, крошечная доля браузеров не будут отображать PNG с на всех! И, из-за этого, вряд ли кто использует PNG-еще.

Так следует ли вы рискуете подойдя к PNG только, чтобы сделать ваши страницы быстрее? Ну, наверное, "Да!" Мы вернемся к этому решению, но во-первых, давайте поговорим сжатия основы, и посмотреть, как слабым PNG и старожила GIF стек против JPEG, неуклюжий формат файла, который давит фото-реалистичные данные в крошечный-weensy файлов.
JPG и PNG Основы

PNG-и GIF-изображения использовать формат без потерь сжатия. В отличие от JPEG, детали ваших графических не будет размытым. Если вы что-то вроде сканирования мелких деталей карты, или что-нибудь с создания небольшой текст, вы должны выбрать GIF или PNG формате. Просто имейте в виду, что использование GIF-файлы (и даже PNG с) при больших фотографий приводит к огромным размерам файлов и долгое время загрузки.

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

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

В формате JPEG являются идеальным форматом файла для цветной фотографии в Интернете, являются ли они отсканированы или прямо с цифровой камеры. Просто имейте в виду, что в формате JPEG не может сделать анимацию и прозрачность, и они не обрабатывают подробные чертежи, а также GIF-или PNG.
Стандартный сжатия изображений

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

JPEG предлагает широкий спектр уровней сжатия, с технической точки зрения, но это довольно интуитивно: чем больше вы сжатия изображения, тем хуже она выглядит. Редактирования изображений программы обычно предлагают низкий, средний и высокий варианты для качества изображения. Photoshop и фейерверков пусть пользователь закрутки сжатия набрать в любом месте между уровнями 1 и 100. (Да, и Найджел Tufnel бы впечатление, - но мы можем предложить уровне 101?) Избегайте крайностей, очевидно, но определение правильного уровня сжатия на данной фотографии, в конечном счете зависит от вас.

Вы не можете переменно сжатия GIF-или PNG-изображений как таковых, но вы в состоянии уменьшить свой ​​цвет битовую глубину, которая ограничивает количество используемых цветов. Чтобы вычислить количество цветов в данной глубины цвета, принимать по 2 в степени глубины цвета (например, 8-битный цвет = 256 цветов). Чем меньше цветов, тем меньше килобайт размер изображения. Скажем, вы собираете Coca-Cola сайте - вы, вероятно, может уменьшить свой ​​логотип на бит глубину 2 или 3. 2-битный цвет позволяет смелый красный и белый, но 3-бит покупает вам несколько дополнительных оттенков каждого, чтобы сгладить острые углы. Говоря о дополнительных оттенков, оптимизация профи заметить, что использование сглаживания текста в иллюстрациях делает ее гораздо труднее ниже глубины изображения немного. сглаживание эффекта требуется много дополнительных цвета, чтобы текст, мягкий взгляд. Если вы должны использовать тип изображения, удерживая ее простой помогает сокращения размера файла и делает текст легче читать.

Вверху: 2-битные и 8-разрядных версий одного и того же изображения. Если вам не нужно расширенный диапазон цветов, нет необходимости использовать более высокие глубину цвета!

Дополнительные способы сжатия

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

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

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

Щегольской, а? Ну, по словам каждый уважающий себя телевидение рекламный ролик: "Подождите! Это еще не все! "Есть и другие Ginsu-острые инструменты в Photoshop's" Сохранить для Web "диалог. Одним из них является эффект размытия для формата JPEG, что снижает воздействие цифровых артефактов - самый удобный, но лучше всего использовать с легкими прикосновениями. Photoshop также позволяет указать файлы JPEG быть отформатирован как "Базовый Оптимизированная", которая немного меньше формата размер файла-мудрым. Игнорирование предупреждения Photoshop о том, что базовый Оптимизированная формате JPEG менее совместимы - они выглядят ОК во всех браузерах. Ну, кроме, конечно, Lynx.

<nerd> (Хорошо, хорошо. Так вы действительно хотите знать, базовым оптимизированные изображения используются различные квантования делитель таблиц и словарей Хаффман, чем указано в старой школы JPEG / JFIF стандарт. Таким образом, хотя оптимизированных изображений может пролить некоторый образ-редакторы и кодировки программное обеспечение для петли, декодер JPEG в веб-браузер не заботится, так как он разбирает DQT и DHK маркеры, чтобы получить эти таблицы! Да, как я знаю, как дурацкий это?) </ ботаник>

Очевидно, JPEG сжатия опирается на чрезвычайно высшую математику. GIF-изображения, с другой стороны ...

GIF просто список цветных пикселей. Единственная попытка GIF-на сжатие для сокращения, когда же цвета пикселей в непосредственной близости друг к другу по горизонтали. И это все.

Так что с строке 100 белых пикселей, формат GIF экономит пространство с помощью аннотаций вдоль линии "один белый, еще 99 такого же цвета". Ряд переменного черно-белых пикселей, с другой стороны, требует более подробного описания ("один черный, один белый, другой черный, один белый") и впитывает больше пространства. В основном, это большое дело, если цветы изменения на одной горизонтальной линии.

Photoshop имеет "Lossiness" функцию для уменьшения размеров GIF, который пользуется любовью GIF для как-цвет сгустки. Photoshop заменит пикселей здесь и там, и попытаться увеличить число же цвета пикселей сидя рядом друг с другом. Он работает хорошо, но не так хорошо, как кажется; автоматизированные результаты могут выглядеть довольно плохо, особенно на типы пикселей совершенное произведение искусства вы хотели бы использовать для GIF, так или иначе.

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

Казненные эксперта (который вы сейчас!), Это усиление контроля над оптимизации изображения должны выжать еще несколько килобайт от каждого из ваших изображений, экономя пользователей секунд (и, надеюсь минут), когда по страницам вашего сайта. Это благотворительная, но помните: когда пользователь не чувствуют, что их время впустую, они подлежат сделать именно это - отходы серьезное время. Когда они это делают на вашем сайте, нажав на ссылку после ссылки, это хорошая вещь.
Быстрее, чем превышение скорости последовательной загрузки

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

При сохранении изображения в "переплетенного" (GIF-и PNG-изображений) или "Прогрессивная загрузка" (JPG) формате, браузер отображает ваши фотографии так быстро, как они могут. Во-первых, они рисуют грубое приближение изображения, а затем заполнить подробности позже. Sloppy, как это звучит, это повышает удобство работы пользователей, поскольку основные элементы страницы получить собрались быстро. Пользователи могут взаимодействовать со страницей - читать содержание текста и такие - перед загрузкой процесс полностью завершен.

В середине 90-х Paleoithic эпоху Интернета, дизайнеры использовали "LOWSRC" атрибут тега <img> по аналогичным причинам. Браузеры могут нагрузки супер-сжатую версию изображения, а затем загрузить "реальный" файл позже. LOWSRC подход - что требует загрузки в два раза больше изображений - было все, но отказался в пользу техники прогрессивной загрузки.

Если вы соскользнуть в радикальной оптимизации мышления, Вы не сомневаетесь, заметил, что прогрессивной или чересстрочной изображения иногда чуть больше, КБ-мудрым. В этом случае, научиться жить с ним - это еще не все, чтобы сделать страницы "оптимизированы", чем просто скачать размер.

В самом деле, Есть 3 вида скорость думать в Интернете:
Скорость загрузки
Render скорость
Visual Доступность

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

Обратите внимание, что эти сроки концы первой секунды посетитель может получить доступ к значению и взаимодействовать со страницей, а не строго, когда страница заканчивается рендеринга. С точки зрения пользователя, время рендеринга часто академической.

Зная, когда страница оказал достаточно, чтобы быть полезными (в отличие от бетонного потолка в 10 кбайт или "не более трех графики на странице" правила) дает дизайнером макет широты, необходимых для создания успешного странице. Пока пользователи не спрашивайте: "Эй, насколько велика эта страница, так или иначе?", Страница делает свою работу.
Кэш является вашим другом

Там еще один важный метод это ключ к повышению воспринимается скорости вашего сайта. Эти образы, которые повторяются на Вашем сайте - общая логотипы, заголовки, или панели навигации - не нужно скачивать более одного раза. По умолчанию, большинство браузеров выделить кэш-памяти для хранения недавно использованных образов в памяти и на жестком диске. Если браузер признает тем же именем, он будет тянуть изображение прямо из кэша, а не его загрузку. Это обеспечивает массовый прирост производительности, что много автоматизированных программ сроки не признают. Просто вытащить секундомер и убедитесь в этом сами.

Так как на стороне клиента кэш такого полезного союзника, вы должны дизайн страниц с кэш браузера в виду. Например, если ваш сайт использует различные графики заголовков, которые отличаются лишь незначительно (например, стандартный логотип с различными названиями отдел под ним), попробуйте разрушение изображения таким образом, что неизменной частью (стандартный логотип) хранится в кэше и всегда нагрузки сразу. Хотя вы все равно нужно загрузить новый графический на каждой странице (в данном случае, название отдела), изображение меньше, и, следовательно, загрузки быстрее.

Браузер кэши концептуально похожи, но не то же самое, что сети (или "Прокси") кэш, который мы рассмотрим позже в этом руководстве.
Em Размер "Право

Хотя графический редактор работает, убедитесь, что изображение того же размера (по 72 точек на дюйм), как он появится на веб-странице. В вашем HTML, использовать атрибуты ширины и высоты "ИМИДЖ ¢ теги переформулировать реальные размеры изображения. Это позволяет браузеру выложить остальные страницы, а изображение по-прежнему загрузки - таким образом люди имеют что-то читать, пока они ждут - и гарантирует, что люди серфинг с "изображения с" все еще будут видеть страницу в свое расположение

Если вы используете таблицы на странице, размеры изображения приобретают особое значение, так как безразмерные изображения иногда силу браузеров для очистки и повторной визуализации страницы. Это происходит, когда браузер начинает строить структуру таблицы в соответствии с HTML-указанного <TABLE> и <TD> размеры, а затем, с опозданием, обнаруживает, что изображение не хватает HTML размеров, на самом деле, слишком велики, чтобы уместиться. Браузеры затем повторно вынести стол для размещения громоздкого изображения. Это неэффективное оказание страницы занимает много времени, и это неприятно для пользователя, чтобы увидеть элементы страницы передвигаться, или исчезать и появляться.

Вы, наверное, знаем, что это уже, но когда дело доходит до атрибуты ширины и высоты, наиболее важная вещь, чтобы помнить, никогда не использовать их, чтобы изменить размер или изменить форму графики на ваших страницах! Изменение размера с помощью HTML-это супер-плохо по двум причинам. Во-первых, при увеличении размеров изображения больше, чем фактический размер изображения (по 72 точек на дюйм), вы в конечном итоге с зубчатыми фотография. Как это:


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

Правила, конечно, чтобы их нарушать, и есть один случай, когда это приемлемо для разрушения этого правила. Если вы просматриваете проводных и Webmonkey достаточно долго, вы, наверное, видели изображения вроде этого:


В этом случае, как фотографии на самом деле же файл GIF, поэтому они принимают те же количество времени для загрузки. Однако, один на право было в два раза через ширина и высота атрибутов тега IMG. Существует нет зубчатость потому что это изображение отсутствует какая-либо кривые или диагональные линии. Если у вас есть логотип или дизайн, который все прямые углы (Lucky Dog), можно использовать супер-малые GIF (которая загружает Гепард-быстро), а затем изменить размер его содержанию вашего сердца в HTML - Только не забудьте сохранить размеры пропорционально.

Вы претенциозный люди там, возможно, захотите поэкспериментировать с использованием HTML, чтобы изменить размеры всех видов изображений для творческих эффект (конечно, дизайнеры здесь, на Проводной любил его). Конечно, только вы знаете, если президент компании будут заботиться, если вы берете "претенциозный подход" с его фотографией.