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

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

блог

Ако вашият уебсайт е бавен защото използвате неоптимизирани изображения (качествено изображение с разделителна способност 3000 x 2000 пиксела може лесно да надвишава 3 MB), лошото сърфиране, което ще имат читателите на вашия блог или потребителите на вашия уебсайт това ще има много негативно въздействие върху резултатите от вашия сайт. Ако това е блог, вашите читатели ще го изоставят, когато видят, че последната публикация, която сте публикували, не е завършила зареждането. Ако това е уебсайт, където продавате някакъв вид продукт или услуга, вашите клиенти ще отидат на състезанието.

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

Ето защо, ако не искате да увеличите времето за зареждане на вашия сайт или да повлияете отрицателно на позиционирането му в Google, трябва да използвате оптимизирани изображения. Няма смисъл да качвате изображения на вашия сайт в оригиналния им размер и с най-високо качество. Е, има доста приложения за оптимизиране на изображения, но в този пост ще ви кажа как да го направите с GIMP.

Какво е GIMP и къде мога да го взема?

GIMP е напълно безплатна програма за цифрово редактиране на изображения. Предлага се за повечето операционни системи и на множество езици, включително испански. Можете да го изтеглите от http://www.gimp.org/downloads Y. инсталирането му е много просто.

Приставки за оптимизиране на изображения за мрежата

След като инсталираме GIMP, следващото нещо, което трябва да направим, е инсталирайте приставка за оптимизиране на изображения за мрежата. Познавам две и те са тези, за които ще ви разкажа в тази публикация. Не е нужно да използвате и двете.

Първият е Запазване за уеб и можете да го изтеглите от http://registry.gimp.org/node/33. След като го изтеглите, трябва да разархивирате съдържанието на zip файла в папката GIMP plugins на потребителя на вашата операционна система. В моя случай, че използвам Windows 7, разархивирам zip файла, който съм изтеглил в C: \\ Users \\ Jarfer \\. Gimp-2.8 \\ plug-ins.

Вторият плъгин е Запазете за уеб с RIOT и прави същото като по-горе, но използва RIOT алгоритъм (инструмент за радикална оптимизация на изображението), който ви позволява допълнително да усъвършенствате вашата оптимизация. Можете да го изтеглите от http://registry.gimp.org/node/20778 и препоръчвам да изтеглите инсталатора вместо zip файла, защото с инсталатора инсталацията на приставката е много по-лесна. След като инсталаторът е изтеглен, вие го стартирате и самият инсталатор се грижи за копирането на всички файлове, от които се нуждае приставката, в папката на GIMP плъгините на вашия потребител. Ако не използвате инсталатора, освен че трябва да разархивирате съдържанието на zip файла в папката на GIMP плъгините на вашия потребител, ще трябва да изтеглите няколко допълнителни библиотеки и да ги копирате на ръка в същата папка. Във всеки случай крайният резултат ще бъде същият, но мисля, че е по-лесно да се използва инсталационната програма.

След като инсталираме плъгините, можем да получим достъп до тях чрез Главен прозорец на GIMP Меню Файл.

Формати на изображения за мрежата

На първо място трябва да знаете, че трите най-използвани формата за изображения в мрежата са JPG, PNG и GIF. По-долу ще ви кажа кой е най-подходящият формат за всеки отделен случай:

  • JPG формат: Това е форматът най-подходящ за фотографски изображения с много детайли и в която нямаме нищо против да загубим част от качеството на оригиналното изображение в замяна на получения файл със значително по-малък размер.
  • PNG формат: В този формат, за разлика от JPG формата, се използва алгоритъм за компресиране без загуби, т.е. информацията не се изхвърля от изображението, така че форматът е най-подходящ за изображения с малко цветови вариации и големи площи с плътни цветове като екранни снимки, лога или графични изображения като цяло. Ако изображението няма твърде много цветове (около 256 или по-малко), е възможно да го запазите Формат PNG-8, което е същия формат PNG, но с индексирана цветова палитра, която допълнително намалява размера на изображението.
  • GIF формат: Това е формат, подобен на PNG, но с някои недостатъци по отношение на него, което го прави в неизползване и използвайте само за анимирани изображения.

Стъпки за оптимизиране на изображения за мрежата с GIMP

След като инсталираме GIMP и сме добавили приставки, които позволяват оптимизиране на изображения за мрежата, стъпките за оптимизиране на изображение с GIMP са както следва:

  • Регулирайте размера на изображението. Не е нужно да качвате изображения с размери 3000 x 2000 пиксела на вашия уебсайт. В този блог изображенията, които включвам във всяка публикация, се показват на екрана с максимална ширина 640 пиксела, така че всяко изображение, което искам да добавя, което надвишава тази ширина, го намалявам до 640 пиксела ширина и до съответната височина, която позволява поддържане на съотношението ширина/височина на оригиналното изображение. Само като намалите размера на изображението до броя на пикселите, с които ще го показвате на уебсайта си, ще намалите значително размера на файла с изображението. За да регулирате размера на изображението, можете да използвате някоя от двете приставки, които съм посочил, или можете да го направите с Опцията Scale Image на GIMP. Тази опция е в Главен екран на GIMP Меню Изображение.

  • Използвайте опцията Save for Web или Save for web with RIOT, за да оптимизирате изображението.

За фотографско изображение с много детайли използвайте JPG формат и регулирайте качеството на изображението така че, без да губите прекалено много качество, размерът на файла на изображението се намалява значително. С качество от 80 до 90% в сравнение с качеството на оригиналното изображение, теглото на изображението, веднъж зададено в пиксели, може лесно да бъде намалено от 10 до 50 пъти или дори повече в зависимост от изображението. На следващото изображение можете да видите как снимка, която заема повече от 700 KB, се намалява до около 20 KB, когато се компресира с качество от 80% в сравнение с оригинала. В този пример използвам приставката Запазете за уеб с RIOT.

За изображение с малко цветови вариации и големи площи с плътни цветове, като например графично изображение като първото изображение на тази публикация, използвайте PNG формат. Ако изображението също няма твърде много цветове (около 256 или по-малко) или броят на цветовете може да бъде намален, без да се губи твърде много качество, можете да намалите теглото на изображението, като го запазите във формат PNG-8 и коригирате броя на използваните цветове. На следващото изображение можете да видите как първото изображение на тази публикация е намалено от 32,5 KB на 11,6 KB с помощта на приставката Запазване за уеб и го запазвате в Формат PNG-8.

И накрая, ако вашият уебсайт е блог с WordPress, можете да инсталирате приставката в WordPress WP Smush.it който използва безплатна услуга от Yahoo Smush.it за оптимизиране на изображения. Въпреки че имам инсталиран WP Smush.it, предпочитам да оптимизирам изображенията с GIMP, преди да ги кача в блога. Приставката обикновено извършва втора оптимизация в случаите, когато моята оптимизация с GIMP може да бъде подобрена, а също така гарантира, че оптимизацията на изображението винаги се извършва, ако по някаква причина не съм го правил преди това с GIMP.

Знаете ли GIMP? Използвали ли сте го някога за оптимизиране на изображения за мрежата? Знаете ли плъгините Запазване за уеб или Запазете за уеб с RIOT? Как оптимизирате изображенията, които използвате на вашия уебсайт?

Ако тази публикация ви е била полезна, споделете я в социалните мрежи. Ще бъде полезно на другите и ще е добре за мен да се изявя. Благодаря много!