Ноя

22

Полупрозрачный JPG

Filed Under (img) by Александр Бойченко on 22-11-2011

Попался мне на глаза достаточно интересный способ значительно уменьшить размер большого полупрозрачного PNG.
Начнем с примера.  PNG – 334Кб, aJPG – 74 Кб.
Суть приёма в следующем.

Раскладываем оригинальный PNG:

на две картинки, первая – jpg файл основного изображения:

и PNG маски прозрачности  -

Затем во время загрузки старицы динамически создаем canvas с jpg содержимым и на него накладываем маску.

Разумеется работать это будет при соблюдении двух условий: включенного js и поддержки браузером canvas.

Пример
Источник.

5 комментариев
Читать далее

Comments:

5 комментариев на “Полупрозрачный JPG”

  1. Metaller on 22 Ноя 2011 at 8:07 #

    Спасибо, взял на заметку. Интересное и несложное решение.

  2. GreLI on 22 Ноя 2011 at 11:39 #

    Может, если края джипега обрезать по квадратам 8×8, он несколько лучше сожмётся? Или хотя бы будет чуть лучше выглядеть по краям.

  3. Александр Бойченко on 22 Ноя 2011 at 11:45 #

    это зависит от исходного изображения, если в нем нет дополнительных данных – то область просто так не расширить

  4. Алексей on 22 Ноя 2011 at 23:36 #

    http://www.artlebedev.ru/tools/technogrette/img/png-3/

    Хоть бы картинки свои взяли

  5. Александр Бойченко on 22 Ноя 2011 at 23:42 #

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

Оставить комментарий