Типы файлов
Первое и самое простое, что следует учитывать при оптимизации изображений является тип файла. Некоторые типы файлов изображений лучше подходят для определенных изображений. Например, JPG лучше всего подходят для фотографических изображений. PNG, с другой стороны, лучше всего подходят для простых изображений с несколькими цветами или для изображений с использованием прозрачности. 24-битные PNG лучше всего подходят для изображений, содержащих как фотографические элементы, так и простые графики. 8-битные PNG могут дополнительно уменьшить размер файла на изображениях с количеством цветов менее 256 цветов.
спрайты и Preloaders
Полезная практика для уменьшения времени загрузки является использование CSS спрайтов, которые являются CSS кодой, которые отображают часть большего изображения. Этот метод часто используется для мышиных состояний на кнопках. Например, с помощью спрайта вы можете отображать кусок изображения в виде кнопки на своем сайте и отображать другую часть этого изображения в качестве кнопки всякий раз, когда пользователь перебирает ее.
Хотя спрайты часто используются для интерактивных меню и кнопок, их также можно использовать для отображения нескольких изображений сайта из одного файла изображения. Это потребует, чтобы браузер загружал только одно изображение, а не, скажем, три или четыре.
В дополнение к спрайтам изображения могут быть предварительно загружены с использованием JavaScript, jQuery, Ajax или CSS. Когда изображение предварительно загружено, браузер загружает или «предварительно загружает» изображение, а затем мгновенно отображает его, когда пользователь переходит к нему. Предварительная загрузка может значительно снизить время загрузки с сайтов с тяжелыми изображениями, особенно сайтов с фотогалереями.
Использование CSS вместо изображений
Иногда лучший способ уменьшить время загрузки изображения не использовать изображение на всех. Улучшения CSS позволили браузеру отображать определенные «изображения» с использованием чистого CSS. Теперь можно создавать закругленные прямоугольники, градиенты, тени и прозрачные изображения с помощью CSS. Будьте осторожны, каждый браузер не всегда будет поддерживать эти методы, и совместимость браузера должна быть тщательно рассмотрена перед заменой изображения на CSS.
Предлагая некоторые хорошие чтения по оптимизации изображения и уменьшая время загрузки при использовании изображений.
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
Do Images Load Faster in HTML or CSS?
