Компресиране на изображения за уеб - преглед на инструмента
Скоростта на зареждане на уебсайта е важен фактор за класиране в търсачките. По-голямата част от времето, необходимо за зареждане на сайт, е в изображения. Следователно компресирането на изображения допринася за подобряването на сайта.
В тази статия ще ви разкажа за графичните формати, онлайн услугите TinyJPG и TinyPNG, програмата за компресиране на изображения FileOptimizer и резултатите от изследването.
GIF, JPEG или PNG?
Всяко изображение е файл, кодиран в съответния графичен формат. GIF, JPEG и PNG са популярни в Интернет. Всеки от тях има плюсове и минуси.
- ФорматътGIFизползва индексирана палитра от до256цвята. Използвайте го за малки снимки (икони). Характеристика на GIF е поддръжката на анимация, но размерът на крайния файл ограничава неговия обхват.
- Използвайте форматаJPEGза съхраняване на снимки и картини с плавни преходи на яркост и цвят. В други случаи има голяма вероятност от изкривяване и загуба на качество на изображението.
- PNGе създаден специално за мрежата. Характеристика на PNG е поддръжката на полупрозрачност и компресиране на изображения без загуба на качество, което се отразява на размера на файла с изображение.
Съвет: когато избирате определен формат, погледнете крайното качество и размера на файла на конкретна картина.
Компресиране на снимки онлайн
Онлайн услугите за компресиране на изображенияTinyJPGиTinyPNGса създадени от холандското студиоVoormedia. Техният прост и ясен интерфейс на английски не създава трудности дори за начинаещи потребители.
Предлага се от онлайн услугиAPIви позволява да компресирате снимки буквално в движение. Компресирайте до500изображения намесец –безплатно. За блогове на енджина на WordPress също има готов плъгин.
Ако искате плъгин за Photoshop, наличен за Mac и Windows, ще трябва да дадете пари. Исканата цена е$50.
Онлайн услугата TinyJPG използва алгоритъма за компресиране на изображенияSmart JPEG, който ви позволява да получите най-добрия баланс между качество и размер на файла.
До20изображения се добавят наведнъж, но не повече от5Mb всяко. Услугата автоматично анализира и избира най-добрата опция за компресиране, а резултатът се изтегля или запазва в Dropbox.
За тестване на услугата е направена снимка, запазена във Photoshop във форматJPEGс високо качество (60%) и поставена отметка в квадратчето „Оптимизирано“. Оригиналният размер на файла беше121 Kb. След обработка на изображението в TinyJPG, полученият файл е6%по-малък от оригинала. Размерът му беше113 Kb.
Визуалното сравнение на оригиналното и компресираното изображение показа добър резултат. Картината стана още по-ясна, но артефактите не се увеличиха много.
Онлайн услугата TinyPNG използва алгоритъма за компресиране на изображенияSmart JPEG, който ви позволява да получите най-добрия баланс между качество и размер на файла.
До20изображения се добавят наведнъж, но не повече от5Mb всяко. Услугата автоматично анализира и избира най-добрата опция за компресиране, а резултатът се изтегля или запазва в Dropbox.
За да тестваме услугата, направихме снимка, запазена във Photoshop във форматPNG-24с изключена прозрачност. Оригиналният размер на файла беше727 Kb. След обработка на изображението в TinyJPG, полученият файл е75%по-малък от оригинала. Размерът му беше179 Kb.
Визуалното сравнение на оригиналното и компресираното изображение показа относителен резултат. Намаляване на броя на добавените цветове артефакти, но забележими само при приближаване.
FileOptimizer за компресиране на изображения
След като проучих наличните програми за компресиране на изображения, се спрях на FileOptimizer. Програмата работи на същия принцип като описаните по-рано онлайн услуги. Преминавайки през начини за компресиране на изображението, тя избира най-добрия вариант.
Забележка: FileOptimizer компресира файлове без загуба в различни формати: 3GP, .APNG, .BMP, .CHM, .CSS, .DOC, .EPUB, .FB2, .GIF, .HTML, .ICO, .JAR, .JPEG, .JPG, .JS, .MP3, .MP4, .PDF, .PNG, .PSD , .SVG, .SWF, .TIF, .TIFF, .ZIP и др.
Компресиране на изображения във FileOptimizer
Използването на програмата е удоволствие. Не е необходимо да настройвате FileOptimizer. Всичко вече е настроено оптимално. Следователно остава да изпълните следните прости стъпки:
- Щракнете върху елемента "Добавяне на файлове..." и (в отворения прозорец) изберете файловете за компресиране.
- Щракнете върху елемента „Оптимизиране на всички файлове“ и изчакайте, докато състоянието в колоната „Състояние“ на файловете, добавени към списъка, се промени на „Готово“ (готово).
Забележка: оригиналните файлове се презаписват от компресирани файлове. Компресирането на JPEG файлове е бързо, но PNG отнема време. Резултатът не е толкова впечатляващ, колкото в случая с онлайн услугите, но тук си струва да запомните качеството.
За тестване на програмата беше направена снимка, запазена във Photoshop във форматJPEGс високо качество (60%) и поставена отметка в квадратчето „Оптимизирано“. Оригинален размер на файлавъзлиза на121 Kb. След обработка на изображението във FileOptimizer, полученият файл е4%по-малък от оригинала. Размерът му беше116 Kb.
За тестване на програмата беше направена снимка, записана във Photoshop във форматPNG-24с деактивирана прозрачност. Оригиналният размер на файла беше727 Kb. След обработка на изображението във FileOptimizer, полученият файл е5%по-малък от оригинала. Размерът му беше696 Kb.
Визуалното сравнение на оригиналното и компресираното изображение показа най-добрия възможен резултат. Снимките не се различават дори при по-внимателно разглеждане, но размерът на файла е по-малък.
Забележка: Услугата за онлайн анализ на сайтове PageSpeed Insights на Google счита изображенията, компресирани от FileOptimizer, за приемливи. А висококачествените изображения трябва да се класират по-добре в търсачките.
TinyJPG и TinyPNG всъщност са една и съща услуга, но достъпна в различни домейни. Тези. Можете да качвате както PNG, така и JPEG файлове групово. Добри изстисквачки, но софтуерът би бил по-удобен. Добавката за Photoshop за $50 е PPC.
PNG е няколко пъти по-голям от JPG по подразбиране. Ако имате нужда от изображение с добро качество в JPG, тогава трябва да качите оригиналния размер на сайта и да поставите миниатюра в статията.
Това е много по-лесно и по-добро от компресирането на PNG и както се казва в статията, не спестява много:
Оригиналният размер на файла беше 727 KB. След обработка на изображението във FileOptimizer, полученият файл е с 5% по-малък от оригинала. Размерът му беше 696 Kb.
2Бележник на уеб администратораPNG компресията доведе до по-малък размер на файла от JPEG. PNG компресира много добре! Но за снимки наистина JPEG е по-добър. Но със скрийншотове бих избрал PNG, където JPEG губи. Тези. всеки случай трябва да се разглежда отделно. Миниатюрата, съгласен съм, е оптимална за всичкиформати.
И какъв е смисълът да компресирате само 5%? Може би нещо не разбирам. Компресирам до размер не повече от 100 Kb, ръчно, понякога използвам детската онлайн услуга fanstudio.ru, но все още трябва да работя върху качеството там. Има функция за автоматичен размер за публикуване в Интернет, можете да зададете свои собствени параметри. Факт е, че качеството се губи. Но услугата е удобна. Опитах се да използвам TinyJPG - качеството не спадна много. Ако просто ръчно компресирам в Paint, тогава качеството не страда много. И какъв трябва да бъде оптималният размер на изображението като цяло?
2Самата добротаПо отношение на компресията на изображението трябва да намерите най-добрата опция. За потребителите и следователно за търсачките са важни както размерът, така и качеството на изображението. Правилно отбелязахте - при компресиране в TinyPNG или TinyJPG картината губи качество; умерено, но загубено. FileOptimizer компресира изображения без загуба на качество. 5% не стигат! В примера това беше 31 KB. HTML кодът за тази страница със статия е 57 KB.
2Василийда, PNG често е добър за екранни снимки, а JPEG за снимки.
Добро допълнение към статията от Сергей Попович в стила на lifehack. Оказва се, че PageSpeed Insight има способността не само да анализира уеб страница, но и да изтегли нейната оптимизирана версия:
Използвам главно програмата за скрийншот FSCapture, опитвам се да направя не повече от 30 Kb (не помня защо точно тази цифра). Рядко използвам онлайн услуги. Константин, между другото, исках да попитам - не сте използвали плъгина за WordPress - Seo от Squirrly. Би било интересно да знам вашето мнение за него, а също и да знам дали плъгинът претоварва изтеглянето и противоречи ли на All In One Seo Pack?
Колкото до Seo by Squirrly, за първи път го чувам. Преди много време минах на Blogger и така реших проблема с натоварването. със сигурностБлог платформата винаги е ограничена и не е имунизирана от други проблеми, но въпреки това. Бях откровено zadolbali всички тези граници. В противен случай всеки плъгин често е допълнителни заявки към базата данни и то в огромно количество. Дори All In One Seo Pack работи далеч от оптималното и аз, в случая, някак си го оптимизирах, което значително намали броя на заявките.
https://compressor.io/ - компресирани изображения пасват на Google