Как да намалите изображение, за да го публикувате в уебсайт или блог
В тази статия бих искал да ви науча как да изрежете и намалите изображение, за да го включите във вашия блог или на вашия уебсайт.
Първият проблем, с който се сблъскват моите клиенти, когато започнат да работят със своя уебсайт, е, че в него вмъкват огромни изображения. Въпреки че през повечето време те не са наясно, това води до поредица от проблеми, които в дългосрочен план в крайна сметка показват лицата им:
- Бавно зареждане от мрежата
- Нарушение на позиционирането в търсачките
- Консумация на уеб трафик от сървъра
- A най-лошото потребителско изживяване на мобилни устройства
Вярно е, че тези от нас, които работят в мрежата, вече напълно са възприели концепцията за намаляване на изображенията в мрежата (или би трябвало) и понякога не вземаме предвид, че другите не трябва да разбират. Ето защо, въпреки че има много добри статии, написани по тази тема, ще се опитам да направя сравнение на различните съществуващи методи и да обясня как се използват.
Но първо е необходимо да се обясни някои основи това ще ни помогне да разберем по-добре този процес.
Съдържание
- Концепции
- Методи
- Photoshop
- GIMP
- Мрежи за намаляване на изображенията
- Заключения
- Приложения, които позволяват преоразмеряване
- Приложения, които не позволяват преоразмеряване
- Други съображения
Концепции
Разделителната способност не е същата като размера на изображението, оразмеряването на единия и другия ясно влияе върху теглото на файла и затова трябва да разберем какви са те и как работят.
Методи
След това ще обясня различните методи за намаляване на изображението, от тези, използвани от дизайнерите, до други за по-неопитни потребители. Във всеки случай винаги имайте предвид, че започваме от размер на изображението в пиксели (например 2000 x 3500 px) и че можем да намалим, но никога да не разширяваме казаното изображение. С други думи, ако започнем от изображение с размери 200 x 450 px, малко можем да направим. И то е, че не можете да стигнете оттам, където няма.
Както казах преди, ще обясня различно методи за намаляване на изображението, на първо място ще започна с Photoshop Y. Gimp. По-долу, след проучване и разглеждане на препоръки от други професионалисти, попаднах на две статии, които бяха сравнително скорошни и изброиха редица инструменти. Първият от Hypertextual, а вторият от José Facchin, където те изброяват някои прости уеб и настолни инструменти за намаляване на изображенията. Проблемът е, че след като използвах такъв, който не ме убеди, реших да направя сравнителен да изберете въз основа на числата.
За да направя този тест, започнах с две снимки, направени от мен с нормален компактен фотоапарат (Canon Powershot SX220 HS). Докато ги изтеглях от камерата, направих съответните намаления в различните приложения и взех процента на намаляване като 100% от първоначалния размер на тези снимки. В онези приложения, в които е било възможно, е направен разрез, при който не се препоръчва да не позволява рязане.
Photoshop
Този метод не е достъпен за всички, въпреки че Photoshop е една от програмите, които повечето хора са инсталирали на компютъра си (необяснимо). За мен е методът, който предпочитам да използвам, тъй като тук имате по-голям контрол върху изображението. Тук няма да обяснявам как изображенията се намаляват с Photoshop, но ако искате да използвате този метод, каня ви да следвате следния урок в този блог, тук ще обобщя стъпките, които трябва да следвате концептуално.
Когато искаме свийте изображение с Photoshop, процесът е почти винаги един и същ:
- Отваряме изображението с Adobe Photoshop
- В много случаи ще ни трябва установете определени пропорции, т.е. ширина с определена височина на изображението. За целта ще използваме Инструмент за изрязване. Тук ще определим пропорциите в пиксели на изображението и ще изрежем цялото излишно пространство на същото.
- След като изображението е изрязано, е време да го експортирате намалено до крайния размер, който искаме да има. Ще направим това с два възможни инструмента, и двете се намират в менюто Файл на Photoshop: Експортиране като ..., кой е настоящият метод за това и препоръчаният от Adobe; Y. Запазване за уеб (наследство), което е старият метод, все още присъстващ в програмата по време на писането на тази статия и който е този, който все още ми харесва. Тук винаги трябва да имаме предвид, че изходната разделителна способност за уеб е 72 dpi (точки на инч), докато тази на документите за печат е много по-висока, 300 dpi. Това прави изображенията за печат с огромен размер в сравнение с изображенията в мрежата.
Внимавайте, много е важно да не се объркаме, тъй като въпреки че в стъпка 2 говорихме за дефиниране на пропорциите в пиксели, това, което дефинираме, са точно тези пропорции. Това е Съотношение ширина и височина на изображението, което определяме с крайния размер в пиксели, но това ще бъде ефективно в оригиналния размер на изображението. Това ще се разбере по-добре, като гледате урока за това как да намалите изображенията с Photoshop.