Как да намалим теглото на GIF във Photoshop. Визуализирайте анимацията в браузъра, като запазите параметрите за оптимизация

Здравейте на всички, които четете сега. Днес ще ви разкажа за моите няколко начина за намаляване на размера (теглото) на картина, екранна снимка, снимка, GIF анимация, без да губите качество за вмъкване в уебсайт.

Намаляване на размера на изображението по различни начини

Всяка снимка или изображение, наречете го както искате ;), има свой размер, който се състои от няколко точки, това са вертикална височина, хоризонтална ширина (px) и тегло - килобайти (KB), мегабайти (MB).

Намаляването на размера (теглото) на изображението ще има положителен ефект върху скоростта на зареждане на сайта - уеб производителността, а също така ще помогне за спестяване на място на вашия хостинг, компютър или флашка.

Съгласете се, изображенията, направени на професионални фотоапарати (DSLR), понякога могат да тежат повече от 2 мегабайта и да са с ширина 2500 пиксела. Ако такова изображение се вмъкне в сайта без компресия, това значително ще увеличи времето за зареждане, за което днес PS прилага филтър, особено за Google PS.

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

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

Така че, достатъчно е да промените качеството от високи числа от 60 до средни числа от 30-50, за да намалите значително теглото. Желаното качество може да служи като ориентир. В прозореца за визуализация контролирайте колко се променя изображението.

Що се отнася до формата на изображението, избирам да го запазя като Jpeg, ако е цветна снимка, а ако трябва да запазя прозрачността на слой или черно-бяла екранна снимка, тогава по правило е във формат Png, така че че текстът и цифрите върху него се четат по-ясно. По темата за Photoshop прочетете: използване на тази програма.

Променям размера на изображението (в пиксели) в същия прозорец, което е удобно. Щраквам върху „Запазване“ и след това пиша името на файла на латиница.

Вторият начин за компресиране на изображения с помощта на онлайн услуги

Честно казано, прибягвам до този метод изключително рядко. Тези услуги обаче помагат да се компресират няколко (партидни) изображения наведнъж, без да се губи качество, което се отразява на производителността. Това са добре познатите услуги krakin.io, TinyPNG; Compresspng и други.

Ще ви кажа и още нещо - това е Optimizilla, която тествах и много ми харесаха резултатите. Опитайте и вие.

Екранната снимка показва, че системата е заредена JPEG снимка, с тегло 60 KB. Услугата автоматично го компресира с 39% до 37 KB, но визуално качеството практически не беше засегнато.

Използвайки удобния плъзгач или знаците [+ -], можете да играете с качеството на изображението; увеличете снимката и разгледайте по-отблизо всички детайли след компресиране, преди да запазите. Това е много действителна функцияпредварителен преглед на снимки, за сайтове с портфолио на фотограф, пътувания, ресурси за жени, онлайн магазини, където висококачествените изображения на продукти са важни.

Преоразмеряване на височината и ширината на изображение

Мисля, че днес процесът на промяна на размера на ширината и височината на изображението вече не създава трудности за никого. Това може да се направи както онлайн, така и в стандартна графика Paint редакторили по-удобния Paint.NET.

Отворете нов файл в програмата, щракнете върху „Преоразмеряване“, имайте предвид, че е в пиксели, като същевременно запазите пропорциите. ДОБРЕ.


Промяна на теглото на изображение в Gif формат онлайн

В тази част на статията ще ви кажа как бързо да компресирате не само изображения във формат JPEG, PNG, SVG, но и Gif. Gif файловете тежат доста, така че има голям брой заявки за това как да се намали теглото на GIF изображение без загуба на анимация и допълнителни усилия).

  • Нека използваме първата онлайн услуга Compressor.io .

Compressor.io е мощен онлайн инструмент за драматично намаляване на размера на вашия цифрови снимкии GIF анимации. Позволява ви да спестявате високо качествоизображения, използва два вида компресия, където има разлика и няма разлика преди и след компресия. Така характеризират услугата си и можете да видите това на главната страница.

За пример за компресиране на Gif анимация вижте екранната снимка. Можете да изтеглите оптимизираното изображение по удобен за вас начин: на вашия компютър, запишете в Dropbox, Google Диск(drive.google.com).

  • Втора услуга Онлайн оптимизатор на изображения.

Името на услугата говори само за себе си. Online Image Optimizer лесно оптимизира различни форматиизображения, включително Gif анимация. Просто качете изображението и щракнете върху „Оптимизиране“. Допълнително Онлайн услуга Image Optimizer ви помага бързо да създадете не само favicon за уебсайт, но също така има много полезни онлайн инструменти в своя арсенал.


  • Третият метод е приложна програма SuperGIFза MacOS и Windows.


Можете да закупите платена версия SuperGIF или изтеглете безплатно демо, където има леки ограничения на функционалността.

Анимираните gif файлове са много популярни в социалните мрежи и често могат да бъдат намерени в сайтове за развлечения. С помощта на gifs можете да покажете най-успешния момент от видеото; gif екранните снимки ясно демонстрират етапите на работа в програмата или услугата. Gif екранните снимки също се използват за показване на работата на елементите на уебсайта, например падащо меню. Преди да изтегли файлове за инсталиране, потребителят може да се запознае с тяхната работа чрез GIF анимация. Можете да създавате и качвате свои собствени анимирани забавни картинки, за това ще ви трябва приложение за Android

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

Свийте О'Матик

Това е проста програма за Windows за оптимизиране на GIF изображения. Също така е способен на прости действия с изображения, като завъртане, преоразмеряване, промяна на името на файла и неговото местоположение, пакетна обработка. Достъпни формати за обработка: GIF, JPEG, PNG.

ImageOptim

Тази програма работи на платформа Mac. Предназначен е за gif компресиядо 60-80% и повече без загуба на качество.

FileOptimizer е усъвършенстван инструмент за компресиране на GIF анимации. Програмата има прост интерфейс, така че може да се използва както от начинаещи, така и от опитни потребители.

Други поддържани формати: JPEG, PNG, SWF, TIFF, BMP, ICO

Работи на платформи: Windows, Mac OS, Linux

FILEminimizer Снимки

Компресията на изображението достига 98% и по-висока в резултат на собствени технологии за оптимизация Има 4 нива на компресия за gif файлове. В допълнение, програмата ви позволява да качвате снимки директно във facebook.

Формати: JPG, BMP, TIFF, PNG, EMF | Платформа : Windows

БУНТ

Тази програма ми хареса повече от другите. Можете да контролирате компресирането на GIF файлове, програмата показва размера на изходните и изходните файлове, има предварителен преглед, благодарение на който можете визуално да оцените загубата на качество. недостатък: анимиран gifсе превръща в обикновено статично изображение.

GIF оптимизатор

Проста програма за оптимизиране на GIF анимация. Програмата има само три бутона - open - отваряне на файл, optimize - оптимизиране и Save as - запазване като. Можете да контролирате компресията чрез менюто за настройки.

В InVision GIF анимациите не се използват за глезотии – те играят важна роля от гледна точка на маркетинга и обучението. Затова дори се опитахме да ги използваме на нашата начална страница вместо кодирани анимации.

В крайна сметка хората започнаха да ни питат: „Как създавате GIF анимации?“ Време е да разкрием тайната.

GIF дизайн на изображението

1. Тайна съставка

Ето го моя малка тайна: Всички мои GIF анимации първоначално са били видео файлове. Обикновено използвам ScreenFlow, който използвам и за създаване на видеоклипове на нашите продукти. Това проста програма, който в същото време съдържа много полезни инструменти за анимация.
След като запазя анимацията като видео файл, я импортирам във Photoshop чрез Файл > Импортиране > Видео рамки като слоеве.

съвет:Ако ScreenFlow или After EffectsАко не можете да си го позволите, създайте анимация в Keynote и я експортирайте като видео. Най-накрая малко използване на тази функция в Keynote.

2. По-малко цветове = повече забавление

Ако искате да направите страхотни GIF анимации, тогава трябва да подходите към избора на цвят със специално внимание. Това не само ще повлияе на размера на файла, но също така ще ви позволи да създавате по-дълги анимации с по-малък размер на файла. (За мен малкото е по-малко от 1MB)

3. Използвайте motion blur, ако е възможно

Програми като ScreenFlow и After Effects ви позволяват да експортирате видео с приложено замъгляване на движението. Това не само ще придаде професионален вид на вашата анимация, но и ще улесни намаляването на размера на файла във Photoshop.

4. Бъдете (донякъде) мързеливи

Представете си какви други елементи мога да добавя към GIF анимацията в началото на тази публикация. Малки подсказки с потребителски имена, курсор, който щраква върху бутона плюс и т.н. Хората не трябва да виждат всичко, за да получат обща представа за това, което виждат, така че показвайте само това, от което се нуждаете - ограничени сте от време и размер на файла.

Експортирайте GIF анимации

Преди да се тревожите за съветите по-долу, опитайте да експортирате своята GIF анимация. Ако е с разумен размер, страхотна работа! Продължавайте в същия дух. В противен случай опитайте следните методи.

5. Премахнете дублиращи се рамки

Най-вероятно вашата анимация спира или остава неподвижна за някакъв момент. Ако се вгледате внимателно, ще забележите, че този момент се състои от няколко еднакви кадъра. Ако има 10 такива кадъра, изтрийте 9 от тях и задайте продължителността на оставащия кадър на например 1 секунда.

Ако това не помогне, опитайте да импортирате видеоклипа отново, но този път изберете опцията Ограничение до всеки 2 кадъра.Това трябва значително да намали размера на файла.

съвет:Ако вашата анимация се състои от повече от 150 кадъра, ще срещнете проблеми, когато се опитвате да намалите размера на файла.

6. По-малко цветове

Когато запазите GIF анимация във Photoshop, ще видите падащо меню до опцията Цветове. Експериментирайте със стойностите, опитайте възможно най-малкия брой цветове, които няма да превърнат целия файл в боклук.

7. Променете параметъра Lossy*

Честно казано, дори не знам какво означава този параметър. Но аз точноЗнам, че ако го зададете на ниво между 1 и 10, ще се отървете от излишните килобайти, без да губите качество.

* „Загуба“ (Lossy) - допустимо нивозагуби графична информация V растерен файл, което позволява да се намали размер на файлаИзображения

Нищо не се промени! Помогне!

Ако сте опитали всичко споменато по-горе и все още не можете да намалите размера на вашата GIF анимация, тогава трябва да направите крачка назад. Може би искате невъзможното? Има ли друг начин да постигнете това, което искате? Възможно ли е да разделя файл на две GIF анимации? Ще бъде по-добре, ако вашата GIF анимация се фокусира върху един аспект.

От преводача. За всички ваши желания и коментари относно превода, моля свържете се с мен на лично съобщение. Благодаря ти!

Предлагам ви да използвате онлайн редактор, наречен „ Ezgif.com“, където можете не само да промените размера на анимираните изображения, но и да ги оптимизирате, т.е. да намалите теглото им.

С помощта на този онлайн редактор можете да преправяте много банери от Интернет по свое усмотрение и не е необходимо да работите върху дизайна. Просто напишете своя текст и банерът е готов.

да дойдем тук

Инструменти за онлайн редактор "Ezgif.com"

За бързо редактиране на GIF изображения е по-добре да използвате онлайн редактор, отколкото Photoshop. В крайна сметка много хора нямат представа как да работят с Photoshop, но тук можете да редактирате всяко GIF изображение за няколко минути

Онлайн редакторът изглежда така:



Редактор "Ezgif.com" за редактиране на анимирани GIF картинки

Разбира се, той не достига функционалността на Photoshop, но има всички необходими инструменти за редактиране на GIF изображения.

Функции на онлайн редактора:

  1. Изрязване на изображение

  2. Промяна на размера

  3. Оптимизация на изображението

  4. Добавяне на ефекти

  5. Промяна на скоростта на анимацията

  6. Разбор на анимация в рамки (фрагменти)

  7. Добавяне на текст

  8. Наслагване на друго изображение

Изглежда като прост редактор, но колко мощен.

Нека сега разгледаме всички изброени инструменти поотделно.

Реколта:прост онлайн инструмент за рязане на анимирани изображения.

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

След като качите изображение, под него се появява информация за него: размер в KB, размери на изображението и колко кадъра съдържа.


Когато изрязвате снимка, можете да зададете размера ръчно. За да направите това, под изображението трябва да въведете полетата „ Наляво», « Връх», « ширина" И " Височина» въведете необходимите стойности.

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

В полетата " Нова ширина" И " Нова височина" трябва да зададете нов размер на изображението или можете просто да посочите процента (Percentage), след което щракнете върху " Преоразмерете го!" Картината ще бъде намалена с посочения от вас процент.

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

Ако картината след промяната по някакъв начин започне да показва лошо анимацията, тогава можете да опитате да зададете различен размер

Оптимизиране:и с този инструмент можете да промените размера (теглото) на GIF файла. Теглото на картината става по-малко чрез намаляване на броя на цветовете във всяка рамка. Всеки GIF кадър съдържа до 256 уникални цвята, но чрез намаляване на количеството цвят можете да постигнете по-малък размер на файла.

Оптимизацията има много методи, но можете да изберете най-добрия вариант, така че качеството на картината да остане добро. Прочетете повече за оптимизацията на сайта.

Ефекти (ефекти, промяна на цвета на изображението):С помощта на този инструмент можете да обърнете изображение хоризонтално и вертикално.

Можете също така да завъртите изображението под определен ъгъл, ако зададете степента в „ Завъртете" Можете да зададете различен цвят на изображението, да го направите черно-бяло или да му придадете друг нюанс.

Скорост (променете скоростта на GIF анимацията):Този инструмент е предназначен да променя скоростта на анимацията.

Ако искате да промените скоростта на анимацията пропорционално на текущата, тогава използвайте процент " % от текущата скорост", а за да зададете забавянето между кадрите, трябва да използвате метода " " параметър " стотни секунди между кадрите» задава времето на забавяне между кадрите в стотни от секунди (1/100)

Разделяне (разделяне на GIF изображение на рамки): ъ-ъТози инструмент е предназначен да конвертира анимирани GIF изображения в отделни кадри, след което всеки кадър може да се редактира отделно.

Всички кадри от анимираната картина могат да бъдат изтеглени на вашия компютър. За да направите това, щракнете с десния бутон върху рамката и след това изберете „ Запазете изображението като..." Можете също така да изтеглите всички рамки в един zip архив, като щракнете върху „ Изтегляне на рамки като ZIP»

Напишете (добавете текст): uhТози инструмент ви позволява да добавяте текст към GIF анимации. Можете да добавите текст към цялото GIF изображение или към отделни рамки. Текстът върху картинката може да се мести с мишката.

Наслагване (наслагване на друго изображение):Този инструмент ви позволява да наслагвате друго изображение върху GIF изображение, за предпочитане във формат PNG или GIF.

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

Вярно е, че има малък нюанс. От време на време дизайнерите се сблъскват с необходимостта от промяна GIF размери. Някои хора трябва да го намалят, други трябва да го увеличат. Как да редактирате такова съдържание? Например, трябва ли да го отрежа или да го свия? Бихте ли имали обикновен? jpeg файл, няма да възникнат такива въпроси. Компресирайте го в графичен редактор, дори и без специални знания. Само няколко щраквания и работата е свършена перфектно.

Как да редактирате GIF

Както е известно, мнозинството графични редакториработи изключително с неподвижни изображения. Специално за вас създадохме селекция от най-много ефективни програмиза компресиране на такива файлове, изрязване и последваща обработка на анимация. Вече няма да имате въпроси как да компресирате GIF файлове онлайн. Изберете програма от списъка - желаем ви приятна употреба!

GIF Resizer

Уникален във всеки смисъл редактор, който ви позволява да променяте размера на GIF само с няколко кликвания. За да направите това, трябва да изпълните следните основни стъпки:

  • Стартирайте програмата.
  • Намерете бутона „Преоразмеряване“ в менюто и щракнете върху него.
  • Като щракнете върху бутона "Преглед", изберете файла, който ви интересува.
  • Въведете необходимите параметри (дължина и ширина).
  • Кликнете върху „Прилагане“ и изчакайте няколко секунди.
  • Готово – анимираното съдържание вече е оразмерено според очакванията.
Интерфейс на GIF Resizer

Освен това с помощта на GIF Resizer можете да разрешите следните проблеми:

  • Промяна на формата.
  • Премахнете логото от анимацията.
  • Намалете/увеличете размера на анимираното изображение.
  • Конвертирайте GIF в JPG, разделете на отделни рамки.
  • Конвертиране в PNG.

Няма да се спираме на тази функционалност, защото се интересуваме само от компресиране на анимации в GIF формат. Просто знайте, че когато се сблъскате с различни задачи за редактиране на анимация, има смисъл да използвате Resizer.

Ezgif

Премиум услуга, която ви позволява да компресирате файлове GIF формати PNG. Освен това има много различни инструменти, което ви позволява да приложите ефект.

Как да използвам Ezgif? Отворете начална страницауслуга, щракнете върху „Преглед“. Когато файлът е избран, остава само да щракнете върху Качване. Различни опциикомпресиите ще станат достъпни след изтегляне. Повечето най-добрият вариантв съотношение размер/качество – Средно.

GIF компресор

Интересно по свой начин GIF програмаКомпресор. Тя може да компресира анимация само в 2 проста компресия. Можете да направите това с няколко файла наведнъж. Максимален размер GIF файл – 50 MB.

Кое приложение ви хареса най-много?