Оптимизируем загрузку маленьких картинок. Пошаговая инструкция
Запись от 26.06.2014
1. gtmetrix.com - смотрим какие картинки можно объединить в спрайты. Поможет раздел "Combine images using CSS sprites".
2. css.spritegen.com - объединяем картинки в спрайт. Внимание, для repeat картинок может потребоваться ручная переделка файла спрайта.
3. tinypng.com - уменьшаем вес png картинки, от 10 до 70%, иногда даже 90% получается.
4. webcodertools.com/imagetobase64converter - преобразуем изображение в base64. Это следует делать, если картинка до 2кб, вы знаете все места где используются картинки из спрайта и сможете разобраться со свойствами типа background: url(...) 0 -25px repeat-x, url(...) 0 0 repeat-y...
Немного пояснений:
1. gtmetrix.com показывает общие рекомендации и советы по оптимизации сайта, их стоит принимать во внимание.
2. Картинки в спрайт стоит объединять, т.к. легче загрузить одну большую картинку, чем несколько маленьких - экономия на общем объеме данных и количестве GET-запросов.
3. tinypng помогает уменьшить вес png картинки за счет лучшего использования палитры и магии
раньше плохо отрабатывал тени - картинки получались неуклюжими, но сейчас сервис работает достойно!
4. Загрузить картинку прямо из css в base64 легче, чем делать отдельный запрос к серверу. Хотя, это может быть и лишним, т.к. отдельный файл можно закешировать на стороне клиента.
2. css.spritegen.com - объединяем картинки в спрайт. Внимание, для repeat картинок может потребоваться ручная переделка файла спрайта.
3. tinypng.com - уменьшаем вес png картинки, от 10 до 70%, иногда даже 90% получается.
4. webcodertools.com/imagetobase64converter - преобразуем изображение в base64. Это следует делать, если картинка до 2кб, вы знаете все места где используются картинки из спрайта и сможете разобраться со свойствами типа background: url(...) 0 -25px repeat-x, url(...) 0 0 repeat-y...
Немного пояснений:
1. gtmetrix.com показывает общие рекомендации и советы по оптимизации сайта, их стоит принимать во внимание.
2. Картинки в спрайт стоит объединять, т.к. легче загрузить одну большую картинку, чем несколько маленьких - экономия на общем объеме данных и количестве GET-запросов.
3. tinypng помогает уменьшить вес png картинки за счет лучшего использования палитры и магии
раньше плохо отрабатывал тени - картинки получались неуклюжими, но сейчас сервис работает достойно! 4. Загрузить картинку прямо из css в base64 легче, чем делать отдельный запрос к серверу. Хотя, это может быть и лишним, т.к. отдельный файл можно закешировать на стороне клиента.