Як оптимізувати зображення для сайту

1. Так як же оптимізувати зображення для сайту?
2. Утиліти оптимізації зображень з графічним інтерфейсом
3. ImageAlpha
4. JPEGmini
5. Мій Workflow і ImageOptim-CLI
6. Установка ImageOptim-CLI
7. Запуск ImageOptim-CLI
8. Плагін для WordPress
9. висновок

Наша команда-партнер Artmisto

Думаю, що кожен знає, що перед тим, як розмістити зображення на сайті, його треба смасштабіровать до необхідного розміру, а не заливати відразу на сайт 2,5-мегабайтний tiff, задаючи розмір потім тільки атрибутами width і height в html або css.

Якщо перед розміщенням зображення для сайту оптимізувати, то можна ще більше знизити обсяг переданих даних при відкритті вашого сайту, і, отже, збільшити швидкість його відкриття. А це добре для ваших користувачів, які в такому випадку не підуть з вашого сайту через занадто довгого його відкриття, що особливо актуально, враховуючи, що все більше і більше трафіку генерується мобільними пристроями. Також це добре для SEO, тому що, наскільки я знаю, при інших рівних пошукачі враховують швидкість відкриття вашого сайту.

Якщо ви ще не впевнені, що зображення заслуговують такої пильної уваги, то подивіться на цей цікавий графік, на якому відображено середня кількість байт, що передаються при відкритті сторінки сайту, з розбивкою по типу контенту.

Оптимізація зображень - це процес, який застосовує до зображення більш відповідний алгоритм стиснення, а також дозволяє позбутися від зайвої інформації, що зберігається в зображенні, наприклад мета-даних, які записуються в файл зображення при збереженні в графічному редакторі або фотоапаратом при зйомці.

Таким чином, оптимізація зображень зменшує обсяг даних, необхідний для зберігання і передачі зображення (наприклад, по мережі).

Існують як lossy, так і lossless методи оптимізації.

З мого досвіду, навіть при використанні lossless оптимізації в середньому виходить знизити розмір зображення на 5-10%, а в деяких випадках ця цифра зростає до 15-25% і при везінні навіть до 35%. Погодьтеся, що це досить приємний виграш в обсязі даних.

Якщо ж скористатися утилітами, які використовують lossy стиснення, то можна виграти в обсязі картинок в кілька разів. Головне, що, зі слів творців цих утиліт, вони автоматично вибирають такий ступінь стиснення, щоб втрата якості зображення не була помітна оку, і можна не переживати, що на зображеннях з'явиться зернистість або якісь інші небажані артефакти.

Відкрив зображення в оптимізаторі, і бум! - зображення стало важити на кілька десятків відсотків менше. От би так само можна було худнути, так?

Так як же оптимізувати зображення для сайту?

Використовувати для цього відповідні утиліти. Вони бувають як у вигляді десктопних додатків, так і у вигляді утиліт для командного рядка. Але крім того, що з CLI непросто відразу розібратися, так вони ще й дають не найкращий результат в плані стиснення. Тому я не буду їх тут розглядати.

Також є як універсальні рішення для всіх трьох типів зображень (png, jpеg, gif), так і обробні тільки png або jpeg формат.

Утиліти оптимізації зображень з графічним інтерфейсом

ImageOptim

ImageOptim - це проста, ефективна і універсальна утиліта для оптимізації зображень для Mac OS X.

Підтримує всі необхідні формати зображень: png, jpg, gif. Виконує lossless оптимізацію.

ImageOptim одночасно соовмещает в собі кращі утиліти для оптимізації зображень: PNGOUT , Zopfli , Pngcrush , AdvPNG , extended OptiPNG , JpegOptim , Jpegrescan, jpegtran і Gifsicle . Саме тому я не бачу сенсу розглядати їх окремо, коли вони все представлені в одній програмі, що набагато зручніше.

Якщо ж ви з якихось причин використовуєте Windows, для вас існує альтернатива RIOT . Cам я цю утиліту не використав, але виглядає вона непогано.

ImageAlpha

ImageAlpha стискає png файли шляхом lossy стиснення і конвертації 24-бітних PNG в PNG8 зі збереженням альфа-каналу (прозорості). При цьому такі зображення підтримуються в iOS, всіма браузерами і навіть в IE6.

Ця утиліта дозволяє виграти більше 30% від початкового об'єму зображення, а втрата якості помітна тільки при дуже пильному погляді під лупою.

На жаль, аналоги під Windows мені не відомі.

JPEGmini

JPEGmini lossy оптимізатор jpeg зображень, але погіршення якості після його використання навіть складніше помітити, ніж після ImageAlpha. є версія для Windows .

У нього є тільки один недолік - на відміну від попередніх утиліт, які є безкоштовними і open source, JPEGmini платний. Правда, у нього є безкоштовна Lite версія , Яка дозволяє обробляти 20 файлів в день.

Не забудьте після ImageAlpha і JPEGmini пропустити зображення через ImageOptim, щоб заощадити ще пару відсотків місця.

Якщо ви хочете знайти «більш кращу» утиліту: порівняння ефективності описуваних мною утиліт з іншими популярними оптимізаторами зображень.

Мій Workflow і ImageOptim-CLI

У оптимізації зображень, крім незаперечних плюсів, таких як зменшення місця, необхідного для їх зберігання (що на веб-сервері далеко не зайве), зменшення непотрібного трафіку вашого веб-сервера і прискорення відкриття ваших сайтів, є один великий недолік: зображення треба оптимізувати.

Тобто, кожен раз, перед тим як викласти зображення на сайт, необхідно виконати одну і ту ж поєднання дій: запустити ImageAplpha або JPEGmini, відкрити в ньому зображення, почекати результату, потім прогнати цю ж картинку через ImageOptim. А якщо потім зображення довелося відредагувати, то процес доведеться повторити.

Все це починає швидко і дуже сильно дратувати і, я б навіть сказав, дратувати. Але, на щастя, людина на ім'я Jamie Mason подбав про цю проблему і обернув все три утиліти в AppleScript і Shell, так що можна обробляти багато файлів за раз, виконавши всього одну команду.

Установка ImageOptim-CLI

Якщо у вас встановлений node.js (А точніше пакетний менеджер npm , Який ставиться разом з node.js), то встановити ImageOptim-CLI дуже просто, достатньо виконати в терміналі :

Якщо ж у вас немає node.js, то установка буде виглядати так:

1. відкриваємо термінал і викачуємо ImageOptim-CLI: curl --output ~ / Downloads / imageoptim-cli.zip https://codeload.github.com/JamieMason/ImageOptim-CLI/zip/1.7.10
2. Розпаковуємо в те місце, де хочемо, щоб він лежав, наприклад, в домашню директорію : Unzip ~ / Downloads / imageoptim-cli.zip -d ~ /
3. І додаємо imageOptim в PATH, щоб його можна було запускати, що не вказуючи весь шлях до утиліти повністю: export PATH = $ PATH: ~ / ImageOptim-CLI-1.7.10 / bin

Запуск ImageOptim-CLI

Тепер щоб оптимізувати всі зображення всередині будь-якої директорії, досить виконати:
imageOptim -j -a -d ~ / Sites / MyProject, де

• ~ / Sites / MyProject - це шлях до вашого проекту з картинками,
• -j пропустити зображення через JPEGmini,
• -a пропустити зображення через AlphaImage,
• -d обробити зображення в директорії.

Швидше за все, щоб опція -j працювала і додаток JPEGmini могло бути автоматизовано, необхідно дозволити так званий «доступ для допоміжних пристроїв і програм« (Enable access for assistive devices).

Для цього треба відкрити «Системні налаштування» (System Preferences), і якщо у вас Mac OS X Mavericks (10.9), виконати наступні дії:

1. У «Системних налаштуваннях» (System Preferences) клікнути по «Захист і безпека» (Security & Privacy).
2. Перейти на вкладку "Конфіденційність" (Privacy).
3. У списку праворуч вибрати пункт «Універсальний доступ» (Accessibility).
4. Клацнути по значку замка в нижньому лівому кутку вікна. І потім ввести ім'я та пароль адміністратора.
5. І, нарешті, поставити галочку навпроти додатки Термінал (Terminal).

Тим, хто не оновився до Mavericks, простіше - досить відрити «Універсальний доступ» (Accessibility) відразу в «Системних налаштуваннях» (System Preferences). І поставити галочку поруч з «Дозволити доступ для допоміжних пристроїв і програм« (Enable access for assistive devices).

Тепер найпростіший спосіб оптимізувати всі зображення вашого сайту:

1. Завантажити за допомогою FTP клієнта директорію з усіма зображеннями, наприклад, папку wp-content / uploads, якщо у вас сайт на WordPress.
2. Нацькувати на цю папку ImageOptim-CLI, наприклад так: imageOptim -j -a -d ~ / Sites / example.com / wp-content / uploads
3. Випити чаю, поки зображення обробляються.
4. Порадіти тому, скільки місця було зекономлено і завантажити зображення назад.

Плагін для WordPress

Якщо у вас сайт працює на WordPress, ви не прагнете до максимально можливої ​​ступеня стиснення при оптимізації і не хочете розбиратися з усіма описаними вище утилітами, то для вас є рішення - плагін для WordPress EWWW Image Optimizer .

Сам я цим плагіном не користуюся, тому що вважаю за краще обходитися мінімумом плагінів. Плюс як максималіст я прагну до максимально можливої ​​ступеня оптимізації зображень :)

висновок

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

Оптимізація потрібна для:

• прискорення відкриття вашого сайту,
• економії місця, займаного зображеннями,
• зменшення часу створення бекапа сайту,
• низького споживання каналу веб-сервера.

Оптимізувати зображення можна утилітами: ImageOptim, ImageAlpha і JPEGMini, а можна використовувати їх всі разом за допомогою ImageOptim-CLI.

схоже