Як працює стиснення зображення без втрат у програмі Page Speed ​​Google?

Коли ви запускаєте плагін Google PageSpeed ​​для Firebug / Firefox на веб-сайті, він запропонує випадки, коли зображення можна стискати без втрат, та надасть посилання для завантаження цього меншого зображення.

Наприклад:

• Стиснення http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg без втрат може врятувати 33,5 КБ (85% зменшення).
• Стиснення без втрат http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg може зекономити 18,5 КБ (77% зменшення).
• Стиснення http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png без втрат може заощадити 262B (скорочення на 11%).
• Стиснення без втрат http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png може врятувати 91B (51% зменшення).
• Стиснення без втрат http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm може врятувати 61B (5% зменшення).

Це стосується файлів JPG та PNG (я не тестував GIF та ін.)

Зверніть увагу також на ескізи Flickr (усі ці зображення розміром 75x75 пікселів.) Вони є досить великими заощадженнями. Якщо це дійсно так чудово, чому Yahoo не застосовує цей сервер до всієї своєї бібліотеки і не зменшує їх навантаження та пропускну здатність?

Навіть Stackoverflow.com розраховує на дуже незначні заощадження:

• Стиснення http://sstatic.net/stackoverflow/img/sprites.png?v=3 без втрат може втратити 1,7 КБ (10% зменшення).
• Стиснення http://sstatic.net/stackoverflow/img/tag-chrome.png без втрат може врятувати 11B (1% зменшення).

Я бачив, що PageSpeed ​​пропонує досить пристойну економію файлів PNG, створених за допомогою функції «Зберегти для Інтернету» Photoshop.

Отже, моє запитання полягає в тому, які зміни вони вносять у зображення, щоб зменшити їх на стільки? Я здогадуюсь, що існують різні відповіді на різні типи файлів. Це справді без втрат для JPG? І як вони можуть перемогти Photoshop? Чи варто мені трохи підозріло ставитися до цього?

Якщо вас справді цікавлять технічні деталі, перегляньте вихідний код:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

Для файлів PNG вони використовують OptiPNG з деяким підходом до проб і помилок

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

Коли застосовуються всі чотири комбінації, зберігається найменший результат. Просто як це.

(NB: optipngінструмент командного рядка робить це занадто , якщо ви надаєте -o 2через -o 7)

Для файлів JPEG вони використовують jpeglib із наступними параметрами:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

Аналогічно WEBP стискається за допомогою libwebp із цими параметрами:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

Існує також image_converter.cc, який використовується для безперервного перетворення в найменший формат.

Я використовую jpegoptimдля оптимізації файлів JPG та optipngоптимізації файлів PNG.

Якщо ви ввімкнули bash, команда для оптимізації без втрат усіх JPG в каталозі (рекурсивно):

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Ви можете додати -m[%]до jpegoptimвтрачених стискання зображень JPG, наприклад:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Для оптимізації всіх PNG в каталозі:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2- це рівень оптимізації за замовчуванням, ви можете змінити це o2на o7. Зауважте, що більш високий рівень оптимізації означає триваліший час обробки.

Погляньте на http://code.google.com/speed/page-speed/docs/payload.html#CompressImages, де описано деякі методи / інструменти.

Це питання часу CPU кодера для ефективності стиснення. Стиснення - це пошук коротших уявлень, і якщо ви будете шукати більш важко, ви знайдете більш короткі.

Існує також питання використання можливостей формату зображення в повній мірі, наприклад, PNG8 + a замість PNG24 + a, оптимізованих таблиць Хаффмана в JPEG тощо.

Photoshop насправді не дуже намагається це зробити, зберігаючи зображення в Інтернеті, тому не дивно, що будь-який інструмент обіграє його.

Побачити

• ImageOptim (без втрат) і
• ImageAlpha ( втрата ) для менших файлів PNG ( опис на високому рівні, як це працює ) та
• JPEGmini / MozJPEG ( втрата ) для кращого компресора JPEG.

Щоб повторити результати стиснення JPG PageSpeed ​​у Windows:

Мені вдалося отримати абсолютно такі ж результати стиснення, що і PageSpeed, використовуючи версію jpegtran для Windows, яку ви можете отримати на веб- сайті www.jpegclub.org/jpegtran . Я запустив виконуваний файл, використовуючи підказку DOS (використовуйте Пуск> CMD). Щоб отримати точно такий же розмір файлу (до байта), як і стиснення PageSpeed, я вказав оптимізацію Хаффмана наступним чином:

jpegtran -optimize source_filename.jpg output_filename.jpg

Щоб отримати додаткову допомогу щодо параметрів стиснення, у командному рядку просто введіть: jpegtran

Або використовувати Автогенеровані зображення на вкладці PageSpeed ​​у Firebug:

Я зміг дотримуватися порад Pumbaa80, щоб отримати доступ до оптимізованих файлів PageSpeed. Сподіваємось, скріншот тут надає додаткову чіткість для середовища FireFox. (Але мені не вдалося отримати доступ до локальної версії цих оптимізованих файлів у Chrome.)

А для очищення брудних імен файлів PageSpeed ​​за допомогою Adobe Bridge та регулярних виразів:

Хоча PageSpeed ​​у FireFox міг генерувати оптимізовані файли зображень для мене, він також змінив їхні імена, перетворивши прості імена на кшталт:

nice_picture.jpg

в

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Я виявив, що це, здається, є звичайною скаргою. Оскільки я не хотів перейменовувати всі свої зображення вручну, я використав інструмент перейменування Adobe Bridge разом із регулярним виразом. Ви можете використовувати інші команди / інструменти для перейменування, які приймають регулярні вирази, але я підозрюю, що Adobe Bridge доступний для більшості з нас, які працюють із проблемами PageSpeed!

1. Запустіть Adobe Bridge
2. Виберіть усі файли (за допомогою керування A)
3. Виберіть Інструменти> Перейменування партії (або Control Shift R)
4. У полі Попередньо виберіть "Заміна рядків". У полях "Нові імена файлів" тепер повинно відображатися "Заміна рядків", а потім "Оригінальне ім'я файлу"
5. Увімкніть прапорець під назвою "Використовувати регулярне вираження"

6. У полі «Знайти» введіть регулярний вираз (який вибере всі символи, починаючи з правого красного роздільника підкреслення):

   _ (?!. * _) (. *) \. jpg $

7. У полі «Замінити на» введіть:

   .jpg

8. За бажанням натисніть кнопку «Попередній перегляд», щоб побачити запропоновані результати перейменування партії, а потім закрийте

9. Натисніть кнопку Перейменувати

Зауважте, що після обробки Bridge скасовує вибір файлів, на які не вплинуло. Якщо ви хочете очистити всі ваші .png файли, вам потрібно переібрати всі зображення та змінити конфігурацію, що була вище (для "png" замість "jpg"). Ви також можете зберегти конфігурацію, вказану вище, як попередньо встановлену настройку, наприклад, "Очистити зображення jpg".

Знімок екрана конфігурації / усунення несправностей

Якщо у вас є проблеми, можливо, деякі веб-переглядачі можуть не відображати вираз RegEx вище (звинувачувати мої вихідні символи).

Як використовувати інструмент пакетного перейменування Adobe Bridge для очищення оптимізованих зображень сторінок швидкості, що мають брудні імена файлів

На мою думку, найкращий варіант, який ефективно обробляє більшість форматів зображень у ході, - це триміаж . Він ефективно використовує optipng, pngcrush, advpng та jpegoptim на основі формату зображення та забезпечує майже ідеальне стиснення без втрат.

Реалізація досить проста, якщо використовувати командний рядок.

sudo apt-get install trimage    
trimage -d images/*

і вуаля! :-)
Крім того, ви знайдете досить простий інтерфейс, щоб зробити це і вручну.

Існує дуже зручний пакетний сценарій, який рекурсивно оптимізує зображення під папкою за допомогою OptiPNG (з цього блогу ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

ОДНА ЛІНІЯ!

Якщо ви шукаєте пакетну обробку, майте на увазі скарги на триміжа, якщо у вас немає Xserver. У такому випадку просто напишіть скрипт bash або php, щоб зробити щось подібне

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Змініть параметри відповідно до своїх потреб.

Для вікон існує кілька інтерфейсів drag'n'drop для легкого доступу.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

Для файлів PNG я знайшов цей для задоволення, мабуть, 3 різних інструменти, загорнуті в цей GIU. Просто перетягніть і це зробить це за вас.

https://pnggauntlet.com/

Хоча потрібно час, спробуйте стиснути файл PNG розміром 1 Мб - я був вражений, скільки процесора увійшло в це порівняння стиснення, яке має бути тим, що тут відбувається. Здається, зображення стиснуто 100 способами, і найкращий виграє: D

Що стосується стиснення JPG, то я відчуваю себе ризиковано знімати кольорові профілі та всю додаткову інформацію - однак - якщо всі це роблять - це його бізнес стандарт, тому я просто робив це сам: D

Я зберег 113 Мб на 5500 файлах на WP, встановлених сьогодні, тож це, безумовно, варто!