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

опублікувати

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

  • Повільне завантаження з Інтернету
  • Погіршення позиціонування в пошукових системах
  • Споживання веб-трафіку сервером
  • A найгірший досвід користувачів мобільних пристроїв

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

Але спочатку необхідно пояснити деякі основи що допоможе нам краще зрозуміти цей процес.

Зміст

  1. Поняття
  2. Методи
    1. Photoshop
    2. GIMP
    3. Мережі для зменшення зображень
  3. Висновки
    1. Програми, що дозволяють змінювати розмір
    2. Програми, які не дозволяють змінювати розмір
  4. Інші міркування

Поняття

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

Методи

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

Як я вже говорив раніше, я поясню інакше методи зменшення зображення, перш за все я збираюся почати з Photoshop Y Gimp. Нижче, дослідивши та вивчивши рекомендації інших професіоналів, я натрапив на дві статті, які були відносно недавніми та перелічували ряд інструментів. Перший - Гіпертекстуальним, а другий - Хосе Факкіном, де вони перелічені кілька простих інструментів для веб- і настільних ПК для зменшення зображень. Проблема в тому, що після використання того, який мене не переконав, я вирішив зробити a порівняльний вибрати на основі цифр.

Щоб зробити цей тест, я почав з двох фотографії, зроблені мною звичайною компактною камерою (Canon Powershot SX220 HS). Завантажуючи їх із камери, я зробив відповідне зменшення в різних програмах і взяв відсоток зменшення, прийнявши за 100% початковий розмір цих фотографій. У тих додатках, в яких це було можливо, був зроблений виріз, в якому не попереджають, що він не дозволяє різати.

Photoshop

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

Коли ми хочемо зменшити зображення за допомогою Photoshop, процес майже завжди однаковий:

  1. Відкриваємо зображення з Adobe Photoshop
  2. У багатьох випадках нам буде потрібно встановити певні пропорції, тобто ширину на певну висоту зображення. Для цього ми будемо використовувати Інструмент обрізання. Тут ми визначимо пропорції в пікселях зображення і виріжемо весь зайвий простір того самого.
  3. Після обрізання зображення настав час експортувати його до остаточного розміру, який ми хочемо мати. Ми зробимо це за допомогою два можливі інструменти, обидва знаходяться в меню Файл Photoshop: Експортувати як ..., який є поточним методом для цього та рекомендованим Adobe; Y Зберегти для Інтернету (застаріла версія), який є старим методом, який досі був у програмі на момент написання цієї статті, і саме той, який мені все ще подобається найбільше. Тут ми завжди повинні пам’ятати, що вихідна роздільна здатність для Інтернету - 72 dpi (крапок на дюйм), тоді як у документах для друку набагато вище, 300 dpi. Завдяки цьому зображення для друку мають величезний розмір у порівнянні з веб-зображеннями.

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

І все, ось ці кроки вам потрібно виконати, щоб зменшити розмір веб-зображення за допомогою Photoshop. Який це був результат? Ми починаємо з Фото 1, з оригінальною вагою 2326854 байти (2,22 Мб), і з Фото 2, оригінальною вагою 3 919 094 байт (3,74 Мб).

Як ми вже згадували раніше, у Photoshop є два способи здійснити остаточний експорт, перший із них Експортувати як ..., а другий - Зберегти для Інтернету. Результат неоднаковий, тому нижче я показую ваги та відсоток ваги, яка була зменшена до зображення на різних рівнях якості.

Як ми бачимо на графіках, на яких ми порівнюємо розміри, отримані для Фото 1 та Фото 2, із двома методами Photoshop за різними якостями, ми бачимо, що метод "Зберегти для Інтернету »є більш ефективним і забезпечує трохи менше зображення (за винятком дивного винятку, який трапляється у малоймовірному випадку якості 100).

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

GIMP 2 схожий на Photoshop безоплатний, Іншими словами, це відкрите програмне забезпечення для обробки зображень, абсолютно безкоштовне. Цей доступний кожному і йому нічого не заздрити Photoshop (принаймні, робити основні процедури обробки зображень, подібні до тієї, з якою ми маємо справу тут).

Якщо ви хочете дотримуватися навчального посібника, в якому я детально пояснюю, як зменшити зображення в Інтернеті за допомогою GIMP, ви можете побачити його тут. У будь-якому випадку, процес точно такий же, як і в Adobe Photoshop, але з невеликими варіаціями:

  1. Відкрийте зображення з GIMP.
  2. Встановлюємо пропорції зображення у пікселях за допомогою відсічний інструмент (в даному випадку символізується різцем).
  3. Масштабуємо зображення (Зображення -> Масштабувати зображення). Це невелика варіація щодо Photoshop, де ми зробили цей крок під час процесу експорту, а в GIMP ми робимо це перед експортом.
  4. Ми експортуємо зображення (Файл -> Як експортувати) у тому місці, де ми хочемо мати його, щоб завантажити його на наш веб-сайт.

Деякі аспекти, які слід враховувати, завжди однакові:

  • ми можемо зменшити але ми не можемо збільшити зображення без втрати якості.
  • Ми ніколи не повинні заплутатися та експортувати з роздільною здатністю зображення для друку (300 dpi), оскільки розмір зображення буде величезним. Тому, ми повинні подбати, щоб роздільна здатність складала 72 dpi.

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

Мережі для зменшення зображень

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

    Webresizer.com: Це веб-сайт, який дозволяє виконувати різні процеси, включаючи обрізання зображення, на додаток до його оптимізації. В основному все, що вам потрібно зробити, це завантажити файл в Інтернет (максимум 10 МБ). Тоді ви можете встановити коефіцієнт обрізання, якщо хочете, а потім новий розмір по ширині або висоті. Ви можете додати ще деякі параметри, такі як якість зображення, і навіть можете внести в нього деякі зміни.

І яку продуктивність Web Resizer дав у зменшенні зображень? Ну подивимось.
Кінцевий результат webresizer також цілком оптимальний, без надто великої різниці між 80 і 60 якостями.

Результат також був трохи дивним, оскільки один із варіантів (Losless) безпосередньо залишив зображення таким, яким він був.

Випадок compressor.io не був нічим задовільним. З одного боку, він нічого не робив у режимі без втрат, тоді як у режимі з втратами стискає зображення приблизно на 50%.

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

Висновки

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

Програми, що дозволяють змінювати розмір

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

Висновок досить цікавий, але здається, що серед настільних програм GIMP бере участь у стискуванні і перемагає свого платного конкурента Photoshop. Але найкраще - це Kraken.io перевершив усі очікування, тож він бере пиріг і б’є їх усіх. Мені особисто більше подобається webresizer, і це, мабуть, той, який я рекомендую своїм клієнтам, але kraken.io дуже близький і дає дуже хороший результат.

Програми, які не дозволяють змінювати розмір

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

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

Тому, GIMP для робочого столу, вебрезайзер або kraken.io були переможними додатками цього порівняння.

Інші міркування

Тут я хотів би дати кілька порад, які, на мою думку, можуть зацікавити:

  1. Будь ласка, не вводьте зображення з іменем, призначеним безпосередньо камерою фотографій або що надходить з Інтернету. Дуже часто можна побачити зображення з іменем файлу IMG_415.jpg. Це нікому нічого не говорить, найменше Google, котра найбільше має значення для нас разом із нашим користувачем.
  2. Ми повинні звикнути завжди заповнюйте альтернативний текст (Alt) наших зображень. Цей текст допомагає їм знайти нас також у пошукових системах. Тут ми завжди повинні вводити короткий опис зображення, оскільки воно призначене для читання людьми з порушеннями зору, які переглядають наш веб-сайт за допомогою адаптованого пристрою.

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