Web-сайт. Ускоряем загрузку. Картинки

Этот пост является очередным, посвященным оптимизации загрузки сайта. И на этот раз уделим внимание картинкам.

  • Уменьшаем количество картинок.

    Таким образом добиваемся уменьшения http-запросов. Так как каждая картинка - это отдельный запрос. Добиться уменьшения картинок можно с помощью css-sprites. При использовании css-sprites у Вас несколько картинок заменяются одной, но отображается только часть этой картинки (меняется background-position). В интернете много примеров с подробным описанием css-sprites.

  • Конвертируем gif в png.

    Для этого можно использовать утилиту ImageMagick. У нее имеется очень большое количество команд. Но например конвертация из gif в png производится следующим образом.

    convert image.gif image.png
    Разница в размерах довольно существенная и является убедительным аргументом в сторону использования png.

  • Уменьшаем размер картинок.

    Для этого можно использовать утилиту jpegtran. Например следующий пример 

    jpegtran -copy none -optimize -perfect src.jpg dest.jpg
    удаляет из картинки комментарии и другую ненужную информацию без потери качества. Чтобы понимать насколько эта утилита эффективна, я выполнил описанные выше действия на картинке размером 23 кб в результате получил картинку размером 8 кб. Как говорится результат на лицо. В следующем посте я расскажу как можно уменьшить картинки более простым способом.

  • Не используйте картинки с пустым src.

    Браузер всеравно делает запрос к серверу и пытается получить картинку.

  • Указывайте реальный размер картинки в css.

    Браузеру не придется вычислять размер при загрузке.

  • Разместите картинки на отдельном домене.

    Это позволит увеличить количество параллельных загрузок. Но количество доменов должно быть не более 4. Большее количество будет сказываться отрицательно на производительности.

  • Кэшируйте картинки.

    О кэшировании я более подробно напишу в следующих постах.

Много информации для этого и предыдущих постов об оптимизации взято из http://developer.yahoo.com/

Время - деньги. Оптимизируйте Ваш сайт. Ваши пользователи будут Вам благодарны.