В тази статия бих искал да ви науча как да изрежете и намалите изображение, за да го включите във вашия блог или на вашия уебсайт.

намалите

Първият проблем, с който се сблъскват моите клиенти, когато започнат да работят със своя уебсайт, е, че в него вмъкват огромни изображения. Въпреки че през повечето време те не са наясно, това води до поредица от проблеми, които в дългосрочен план в крайна сметка показват лицата им:

  • Бавно зареждане от мрежата
  • Нарушение на позиционирането в търсачките
  • Консумация на уеб трафик от сървъра
  • A най-лошото потребителско изживяване на мобилни устройства

Вярно е, че тези от нас, които работят в мрежата, вече напълно са възприели концепцията за намаляване на изображенията в мрежата (или би трябвало) и понякога не вземаме предвид, че другите не трябва да разбират. Ето защо, въпреки че има много добри статии, написани по тази тема, ще се опитам да направя сравнение на различните съществуващи методи и да обясня как се използват.

Но първо е необходимо да се обясни някои основи това ще ни помогне да разберем по-добре този процес.

Съдържание

  1. Концепции
  2. Методи
    1. Photoshop
    2. GIMP
    3. Мрежи за намаляване на изображенията
  3. Заключения
    1. Приложения, които позволяват преоразмеряване
    2. Приложения, които не позволяват преоразмеряване
  4. Други съображения

Концепции

Разделителната способност не е същата като размера на изображението, оразмеряването на единия и другия ясно влияе върху теглото на файла и затова трябва да разберем какви са те и как работят.

Методи

След това ще обясня различните методи за намаляване на изображението, от тези, използвани от дизайнерите, до други за по-неопитни потребители. Във всеки случай винаги имайте предвид, че започваме от размер на изображението в пиксели (например 2000 x 3500 px) и че можем да намалим, но никога да не разширяваме казаното изображение. С други думи, ако започнем от изображение с размери 200 x 450 px, малко можем да направим. И то е, че не можете да стигнете оттам, където няма.

Както казах преди, ще обясня различно методи за намаляване на изображението, на първо място ще започна с Photoshop Y. Gimp. По-долу, след проучване и разглеждане на препоръки от други професионалисти, попаднах на две статии, които бяха сравнително скорошни и изброиха редица инструменти. Първият от Hypertextual, а вторият от José Facchin, където те изброяват някои прости уеб и настолни инструменти за намаляване на изображенията. Проблемът е, че след като използвах такъв, който не ме убеди, реших да направя сравнителен да изберете въз основа на числата.

За да направя този тест, започнах с две снимки, направени от мен с нормален компактен фотоапарат (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, с оригинално тегло 2,326,854 байта (2,22 Mb), и от Снимка 2, с оригинално тегло 3 919 094 байта (3,74 Mb).

Както споменахме по-рано, във Photoshop има два начина за извършване на окончателния експорт, първият с Export As ... и вторият с Save for web. Резултатът не е същият, така че по-долу показвам тежестите и процент от теглото, което е намалено до изображението на различни нива на качество.

Както виждаме на графиките, в които сравняваме получените размери за Снимка 1 и Снимка 2 с двата метода на Photoshop в различните качества, виждаме, че методът "Save for web ”е по-ефективно и осигурява малко по-малко изображение (с изключение на странното изключение, което се случва в малко вероятния случай на качество 100).

Качеството, което да изберете, зависи малко от крайния резултат, който получавате, може би трябва да направите няколко теста и запазете този, който не засяга визуалния аспект на експортираната снимка.

GIMP 2 е като Photoshop безвъзмездно, С други думи, това е софтуер за обработка на изображения с отворен код, напълно безплатен. Този е достъпен за всички и няма на какво да завижда на Photoshop (поне да прави основни обработки на изображения като този, с който си имаме работа тук).

Ако искате да следвате урок, в който обяснявам подробно как да намалите изображение за мрежата с GIMP, можете да го видите тук. Във всеки случай процесът е абсолютно същият като в Adobe Photoshop, но с леки вариации:

  1. Отворете изображението с GIMP.
  2. Задаваме пропорциите на изображението в пиксели с инструмент за изрязване (в този случай символизирано с фреза).
  3. Мащабираме изображението (Изображение -> Мащабиране на изображението). Това е малката вариация по отношение на Photoshop, където направихме тази стъпка по време на процеса на експортиране, а в GIMP го правим преди експортиране.
  4. Експортираме изображението (Файл -> Как да експортираме) на мястото, където искаме да го имаме, за да го качим на нашия уебсайт.

Някои от аспектите, които трябва да се вземат предвид, винаги са едни и същи:

  • можем да намалим, но не можем да увеличим изображение, без да загубим качество.
  • Никога не трябва да се бъркаме и да експортираме с разделителна способност на изображението за печат (300 dpi), тъй като размерът на изображението ще бъде огромен. Следователно, трябва да се погрижим резолюцията да е 72 dpi.

Както виждаме, резултатите от намаляването на размера на файловете с GIMP бяха доста добри. Очевидно виждаме, че идва момент, когато по-нататъшното понижаване на качеството не ни кара да намаляваме размера на файла много повече, така че, както винаги, е удобно да балансираме между намаляването и полученото качество.

Мрежи за намаляване на изображенията

В случай на уебсайтове и малки настолни приложения, проучени и изброени в гореспоменатите статии, ще разкажем накратко от какво се състои този процес на намаляване, ще коментираме впечатления и ще покажем числа, които в крайна сметка са най-обективните.

    Webresizer.com: Това е уебсайт, който позволява извършването на различни процеси, включително изрязване на изображението, в допълнение към оптимизирането му. По принцип всичко, което трябва да направите, е да качите файл в мрежата (максимум 10mb). След това можете да зададете съотношението на изрязване, ако искате, и след това новия размер в ширина или височина. Можете да добавите още някои параметри като качество на изображението и дори можете да направите някои промени в него.

И каква производителност е дал Web Resizer при намаляване на изображенията? Ами да видим.
Крайният резултат от webresizer също е доста оптимален, без твърде голяма разлика между 80 и 60 качества.

Резултатът също е малко странен, тъй като една от опциите (Losless) директно е оставила изображението такова, каквото е било.

Случаят с compressor.io не е нещо задоволително. От една страна, той не е направил нищо в режим без загуби, докато в режим на загуби е компресирал изображението с около 50%.

Що се отнася до резултатите, нека го разгледаме. Резултатите са доста различни в зависимост от избраното качество, но изглежда, че тази програма е била малко по-ефективна от предишната.

Заключения

На този етап и с тази бъркотия от числа и сравнения, мисля, че си струва да направим обобщение, което ни позволява да изберем програма. За да направите това, тъй като не би било честно да го правите по друг начин, първо ще сравним тези програми, които позволяват преоразмеряване, и след това тези, които позволяват преоразмеряване на изображението. Очевидно първите водят до по-добър резултат, така че те са тези, които препоръчвам. Последното може да бъде интересно, ако първо променим размера на изображението или ако то вече има окончателния размер, който ще се показва в мрежата. В този случай можем да изберем и един от анализираните тук.

Приложения, които позволяват преоразмеряване

Както казахме, при това сравнение въведохме онези приложения, които позволяват преоразмеряване на изображението, съществена стъпка, ако имаме изображение с ширина 4000 px (какъвто е случаят в примера, който използвахме за това сравнение).

Изводът е доста любопитен, но изглежда, че от настолните програми GIMP взема тортата при компресиране и побеждава своя платен конкурент Photoshop. Но най-хубавото е Kraken.io надмина всички очаквания, така той взема тортата и ги побеждава всички. Аз лично повече харесвам webresizer и вероятно е този, който препоръчвам на клиентите си, но kraken.io е много близо и дава много добър резултат.

Приложения, които не позволяват преоразмеряване

От друга страна, нека видим какъв е резултатът при тези приложения, които не позволяват преоразмеряване на изображението. Тъй като не можем да променим размера, за мен тези приложения са изключени, когато ги препоръчвам на моите клиенти. Нека обаче да ги разгледаме за всеки случай.

Въз основа на тези резултати изглежда ясно, че optimizilla отвежда котката до водата, докато compressor.io даде доста разочароващ резултат. Това, заедно със своята простота, го прави добър кандидат за намаляване на изображенията., стига да не се налага да ги преоразмеряваме.

Следователно, GIMP за десктоп, webresizer или kraken.io са печелившите приложения от това сравнение.

Други съображения

Тук бих искал да дам няколко съвета, които според мен могат да представляват интерес:

  1. Моля те, не въвеждайте изображенията с име, присвоено директно от камерата на снимки или това, което идва от интернет. Много често се виждат изображения с името на файла IMG_415.jpg. Това не казва нищо на никого, най-малко на Google, който е най-важен за нас, заедно с нашия потребител.
  2. Трябва да свикнем винаги попълвайте алтернативния текст (Alt) на нашите изображения. Този текст им помага да ни намерят и в търсачките. Тук винаги трябва да въвеждаме кратко описание на изображението, тъй като то е предназначено за хора със зрителни затруднения да го прочетат, които разглеждат нашия уебсайт с помощта на адаптирано устройство.

И накрая, ако искате да изтеглите оригиналните снимки, които съм използвал, и да повторите тестовете, можете да го направите от следната връзка.