Как да оптимизирате вашите изображения, за да бъдат SEO приятелски (Пълно ръководство)

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


Форматирането им за подходящ размер обаче може да намали качеството поради модификациите, които правите. Добрата новина е, че можете да поддържате оптимално качество на изображението и да получите правилния размер с няколко техники и трикове.

Какво е оптимизация на изображенията?

измерения за оптимизиране на изображенияУеб страниците могат да получат значително забавяне при наличие на големи изображения. Това може да намали времето за зареждане и да направи цялостното изживяване подценка за посетителите на вашия сайт.

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

Това води до по-бързо време за зареждане на вашите страници. Компресирането без загуби и загубите са двата най-често срещани метода за оптимизация.

Предимства на форматирането на изображенията

средни размери на изображения в интернетИзчислено е, че приблизително 54 процента от общото тегло на уеб страница се дължи на изображения.

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

  • Подобрена скорост на зареждане на страницата
  • По-бързо е да създавате резервни копия
  • Необходимо е по-малко място за съхранение на сървър
  • Подобрено SEO с правилния SEO плъгин
  • Използва се по-малка честотна лента

Как да подобрим производителността с оптимизация на изображенията

Целта е да се балансира равномерно приемливото качество и възможно най-ниския размер на файла. Има повече от един начин да направите това. Преди да качите, компресирането на вашите изображения е често срещана опция. Можете да използвате инструмент или плъгин за тази цел (тук са няколко).

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

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

Изберете най-добрия формат на файла

За да изберете най-добрия тип файл, важно е да знаете кои са наличните. Това са най-често срещаните:

  • JPEG: Този тип използва оптимизация без загуби и загуби. Можете да постигнете солиден баланс на размера и качеството на файла, като коригирате нивото на качество.
  • PNG: Този тип има тенденция да има по-голям размер на файла, но изображенията са с по-високо качество. Можете да използвате загуба или компресия без загуби.
  • GIF: Това е идеално за анимирани изображения. Можете да използвате само компресия без загуби. Използва само 256 цвята.

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

Има и други опции, но те са сред най-често срещаните и лесни за работа. Други опции включват JPEG XR и WebP. Не всички браузъри поддържат тези два, така че имайте предвид това.

Те обаче могат да бъдат подходящ избор. Например, в сравнение със сравнимо JPEG изображение, има средно 30 процента намаляване на размера на файла с WebP.

Поради липсата на универсална поддръжка за тези две опции, вашето приложение ще се нуждае от допълнителна логика на вашите сървъри или приложение, за да осигури подходящия ресурс:

  • Оптимизацията на изображения е услуга, предоставяна от някои CDN, включително WebP и JPEG XR доставка.
  • За да откриете клиента, осигурете най-добрия наличен формат на изображението и проверете поддържаните формати е възможно да добавите допълнителна логика на приложението.
  • Определени инструменти с отворен код автоматизират разговора, оптимизирането и обслужването на подходящи активи.

Размер спрямо качество на компресия

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

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

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

Lossless vs. Lossy Optimization

Това са двата вида компресия, които ще използвате. Важно е да разберете какво правят:

  • lossless vs lossy CompressionLossless: Това компресира данни и това е филтър. Преди да изобразите изображението, то трябва да бъде некомпресирано. Качеството обаче не е намалено. Има няколко инструмента, които извършват компресия без загуби.
  • със загуби: Това елиминира някои данни и е филтър. Имайте предвид колко намаление правите, защото това ще влоши изображението. Можете да използвате различни редактори на изображения и инструменти, за да коригирате настройките за качество на изображението.

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

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

Оразмеряване на изображения до мащаб

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

преоразмеряване на изображението в wordpress

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

Подмяна и премахване на изображения

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

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

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

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

Растер срещу векторни изображения

rastor vs vector

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

Те се използват широко в интернет и по-често се използват. Векторният софтуер се използва за създаване на векторни изображения. Те са често срещани за изображения, които отиват на физически продукти, както и в инженерството, CAD и 3D графики.

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

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

Последствия от екрана с висока резолюция

Важно е да се разграничат двата различни типа пиксели, които включват пиксели на устройства и CSS пиксели. В един CSS-пиксел могат да присъстват множество пиксели на устройства. Детайлите на екрана стават по-фини с повече пиксели на устройството.

css pixel vs устройство pixelЗа да се възползвате максимално от по-високия брой пиксели на устройството, активите на изображението трябва да имат повече подробности.

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

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

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

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

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

Мащабируемата векторна графика (SVG) се поддържа от всички съвременни браузъри.

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

За да се намали размерът на SVG файловете, те трябва да бъдат изтрити. GZIP трябва да се използва при компресиране на SVG файлове.

Оптимизиране на растерни изображения

Решетка от пиксели съставя растерно изображение. Отделните пиксели са на двуизмерна мрежа. Например, последователност от 10 000 пиксела съставя изображение от 100 на 100 пиксела. Всеки пиксел кодира информация за прозрачност и цвят.

растер тежъкRGBA стойностите се съхраняват от всеки пиксел. Те включват:

  • Червен канал
  • Син канал
  • Зелен канал
  • Алфа (прозрачен) канал

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

Така че, за да намалите размера на файла с изображения, има няколко стратегии:

  • Намалете дълбочината на изображението. Можете да направите това, като използвате по-малка цветова палитра.
  • Оптимизирайте данните, които отделните пиксели съхраняват.

Инструменти и настройка на параметрите

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

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

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

  • Gifsicle: Това ви позволява да оптимизирате и създавате различни GIF изображения.
  • Optipng: Използва се, за да позволи оптимизиране на PNG без загуби.
  • Jpegtran: Този ви позволява да оптимизирате JPEG изображения.
  • Pngquant: Използва се, за да позволи оптимизиране на PNG загуби.

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

Има два основни критерия, които трябва да вземете предвид, когато извършвате оптимизация на изображението:

  • Оптимизиране на общия брой пиксели на изображението.
  • Оптимизиране на колко байта са необходими за кодиране на всеки пиксел в изображение.

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

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

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

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

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

Контролен списък за оптимизация на изображения

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

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

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

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

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

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

Референции и графични кредити:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector