Працюючи з деякими темами Wordpress, я змінював деякі файли зображень і помітив, що мої редаговані версії іноді на 3-4 рази більше, ніж оригінал (зберігаються у тому ж форматі). Я не хочу погіршувати якість - які способи зменшити розмір файлу, щоб він швидше завантажувався?
Зараз, наприклад, я використовую Photoshop і встановлюю повзунок якості зображення на "8" (з 10).
Відповіді:
Smashing Magazine зробив 2 чудові статті про оптимізацію PNG та оптимізацію JPG .
Вони досить глибокі, детально пояснюючи деякі речі, які ви можете не знати про формати та їх реалізацію. Наприклад, стаття JPEG: "Майте на увазі, що при встановленні Якості до 50 років у Photoshop він запускає додатковий алгоритм оптимізації, який називається кольоровим зменшенням вибірки, який в середньому виділяє колір у сусідніх восьмипіксельних блоках".
Обидві статті вживаються в конкретних методах, які ви можете використовувати в Photoshop, щоб підготувати свої файли для більшої компресії. Що набагато ефективніше, ніж методи, що використовуються після збереження файлу.
Після того як ви зберегли ці файли або на файли, вам не пощастило мати шаруваті вихідні файли, щоб налаштувати їх у Photoshop, ще більше стискання для витіснення цих файлів.
Я використовую програму Mac під назвою ImageOptim . З їх сайту:
ImageOptim оптимізує зображення - таким чином вони займають менше місця на диску та швидше завантажуються - шляхом пошуку найкращих параметрів стиснення та видалення зайвих коментарів та кольорових профілів. Він обробляє анімацію PNG, JPEG та GIF.
ImageOptim надає графічний інтерфейс для різних інструментів оптимізації: AdvPNG від AdvanceCOMP , OptiPNG , PngCrush , JpegOptim , jpegtran від libjpeg, Gifsicle і, можливо, PNGOUT .
Він відмінно підходить для публікації зображень в Інтернеті (легко скорочує зображення, «збережені для Інтернету» у Photoshop), а також корисний для зменшення додатків для Mac та iPhone.
Шматок пирога. Перетягніть свої зображення (або папки зображень) на вікно, воно проходить через усі ці інструменти, налаштовуючи схеми стиснення та видаляючи непотрібні метадані та інформацію про кольоровий профіль (які все одно не підтримуються широко - вам слід виправити кольорові профілі перед збереженням, не економлячи і вставляючи їх).
Усі інструменти, зв'язані цитатами, мають версії Windows / Linux / Mac, крім PNGOUT, але, на щастя, хтось переніс PNGOUT в OS X та Linux, тому що вони такі продумані. Якщо ви вирішите використовувати ImageOptim, він буде включати всі, крім PNGOUT, в .app, тому захопіть порт PNGOUT, опустіть його в / usr / local / bin (або куди завгодно) та скажіть ImageOptim, де він знаходиться.
Мені не рідкість, особливо з зображеннями PNG, бачать, що розміри файлів зменшуються на 30% навіть після збереження через "Зберегти для Інтернету та пристроїв" Photoshop.
Підказка: Після запуску оптимізації відсортуйте стовпчик із значками зліва та виберіть усі рядки з піктограмою (X) - файли, які більше не зменшувались. Видаліть їх зі списку та повторно натисніть на всі зображення, які мають значок галочки. Я майже можу вам пообіцяти, що у вас з’являться зображення, які все ще втрачають розмір файлу. Повторюйте сортування, вибираючи, видаляючи, повторюючи, поки не отримаєте всі (X) піктограми та зателефонуйте за день.
Під час збереження фотографій у Photoshop рекомендую використовувати File > Save for Web and Devices. Це дозволить вам грати з рівнями стиснення і бачити візуальний результат в режимі реального часу. На фотографіях зазвичай можна зберегти його нижче рівня 8 і все одно отримати чудові результати.
Ви можете перевірити Smush.it Yahoo . Я виявив, що це працює дуже добре.
Для зображень PNG можна зменшити кількість кольорів у кольоровій карті та зберегти їх як індексований PNG. Наприклад, розгляньте логотип розміром 128x128 пікселів (нестиснений). Уявіть, що є лише 16 кольорів, які він насправді використовує.
Ви можете бачити, що без зниження якості зображення (це стосується лише певних видів зображень) ви можете значно зменшити розмір.
Для кнопок і піктограм веб-сайтів ви також можете об'єднати їх в одне зображення та використовувати CSS або JavaScript для управління їх відображенням (спрайтами). Це економить на кількості запитів HTTP, зроблених для кожного зображення.
Спробуйте інші формати.
В основному спробуйте зберегти своє зображення в різних форматах, а потім подивіться на розмір файлу.
Якщо ви використовуєте JPEG, ви повинні мати можливість регулювати якість зображення вгору та вниз у графічному редакторі, наприклад paint.net. Якість зображення на 50% зазвичай досить добре для Інтернету і робить зображення значно меншим.
З PNG ви не можете цього зробити, але варто зазначити, що іноді PNG набагато більший, а іноді набагато менший, ніж JPEG. PNG набагато менше для чорно-білих зображень, наприклад, таких як чорно-білі малюнки ліній.
Поради, що даються в наші дні, - використовувати CSS-спрайти для прискорення завантаження, зменшуючи кількість запитів, але знову ж таки потрібно фактично переглянути розмір зображення, який ви отримуєте. Цілком можливо, що CSS-спрайт-зображення буде набагато більшим, ніж компонентні зображення, якщо, наприклад, ви поєднаєте кілька чорно-білих PNG з кольоровим.
Ви також хочете переконатися, що ви знімаєте всі дані EXIF - майже все це не має відношення до користувачів в Інтернеті, чи дійсно вони повинні знати, що ви використовували Canon 5D для фотографування, і що ви використовували F-стоп 2,8, виставлений на 0,5 секунди, з ISO 160, відсутність зміщення експозиції та фокусна відстань 9 мм?
Всі ці метадані додають ваги вашому образу, і взагалі їх слід викреслити.
Як зазначає jessegavin , більшість графічних додатків покажуть попередній перегляд ефектів стиснення - використовуйте їх, оскільки налаштування ковдри "8" рідко дасть вам найкращі можливі компроміси.
Нарешті, плагін Google Page Speed Firefox / Firebug може дати вам гарне уявлення про те, наскільки ви могли зменшити розміри зображень (у тому числі дозволяти переглядати та зберігати менші версії).
Після того, як ви зробите всі інші пропозиції щодо того, щоб ваше зображення було якомога меншим, зберігаючи бажаний рівень якості, ви також захочете налаштувати свій веб-сайт таким чином, щоб він розміщував зображення із мінімальними заголовками HTTP та переконувався, що заголовки, які ви обслуговуєте, дозволяють відповідним чином зберігати зображення за допомогою кешування проксі-серверів та веб-браузерів.
Щоб зменшити розмір запитів, переконайтеся, що ваш веб-сервер налаштований не надсилати непотрібні заголовки, такі як X-Powered-By. Також переконайтеся, що ви подаєте такі речі, як зображення, CSS та інші статичні компоненти від хоста, який не встановлює файли cookie (наприклад, static.example.com).
Для зображень, які є статичними, встановіть заголовок Expires на дату в далекому майбутньому. Це гарантує, що веб-браузер та будь-які проксі-сервери в кеші посередині будуть триматися на зображенні якомога довше. Єдиним недоліком цього є те, що якщо ви хочете показати інше зображення, вам потрібно буде використовувати інше ім’я файлу та посилання на нього. Нумерація версій у імені файлу (наприклад, myimage_1.png або /images/3/logo.png) може бути ефективним способом цього зробити. Для менш статичних сторінок встановіть реалістичний заголовок Expires (доступ плюс X годин) та переконайтесь, що ви встановлюєте або заголовок Last-Modified, або заголовок eTag (не обидва), щоб браузери, які раніше завантажували файли, змогли швидко перевірити чи є у них поточна версія, порівнюючи заголовки, а не знімаючи все зображення.
Хоча існує багато ресурсів для обговорення цих методів, Yahoo зробив чудову роботу, давши багато порад щодо покращення ефективності доставки вмісту разом в одному місці.