Крайното ръководство за управление на изображения на WordPress

  1. 1. В момента четете: Крайното ръководство за управление на изображения на WordPress
  2. 2. 3 по-малко известни съвета за управление на изображения в WordPress
  3. 3. Грешки в WordPress Image и как да ги поправим

Визуалното въздействие е една от най-важните характеристики, когато става въпрос за въздействащ маркетингов план за съдържание. Добре дошли в чисто нова поредица от публикации – The Ultimate Guide to Image Management в WordPress.


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

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

Може би се чудите как ще продължим да правим това. 24 000+ изтегляния на нашата Обща – отзивчива многофункционална WordPress тема в ThemeForest може да не са чудесен показател.

Е, разтърсихме най-добрите блогове от водещите в индустрията хостинг компании WordPress (като WPEngine и Pagely) и научих какво те научени при обслужване на милиарди показвания на страници в хиляди клиенти с висок профил. Компресирахме цялата тази информация за вас в малки параграфи и точки за вашия онлайн успех. Сега да започнем, нали??

Съвети за техническа и ефективна оптимизация за изображения на WordPress

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

JPG или PNG? Използване на правилния формат на изображението

Първата стъпка в оптимизацията на изображението е добро начало. Казват, че добре започната работа е наполовина свършена. Точно такъв е случаят, когато става въпрос за оптимизация на изображения в WordPress. Всичко започва с избора на правилния формат на изображението. JPG и PNG са двата най-разпространени формати на изображения, използвани онлайн в маркетинга на съдържанието.

Номерът е да разберете кой формат да изберете за всеки тип изображение. Избирането на грешен причинява монументално увеличение на размера на изображението. Ето правилата.

Кога да използвате PNG формат?

За плоски изображения – като вектори, илюстрации, шрифтове, лога, банери, форми, банери и т.н. – всичко, което е създадено във векторен формат като EPS или Adobe Illustrator (.AI), използвайте PNG. Ще получите оптимизирано изображение с почти нулева загуба на качество. Ако използвате JPG в този случай, няма да направите компромиси с размера, но може да изчерпате качеството си. Всъщност при по-високи разделителни способности PNG би бил по-лек без загуба на качество. JPG ще страда.

Вземете неговия пример. Ще създадем плоско изображение в 5000px и ще го запишем като JPG и PNG.

Примерно изображение, използвано за тест

Плоско изображение
JPG233KB
PNG42KB

С две думи, JPG изображението е 455% по-високо от PNG за същата резолюция.

Кога да използвате JPG формат?

За всичко останало използвайте JPG. Всичко, различно от плоско или векторно изображение, използвайте JPG. Снимки на хора, места, неща и т.н. – използвайте JPG. Почти всички стокови снимки под тази категория използват JPG. Ако използвате PNG вместо JPG, ще попаднете на някои сериозни проблеми с изпълнението.

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

Настройвам: Изтеглих това изображение от Shutterstock, което тежи наоколо 10.3MB при резолюция на 6149 × 4562 – по същество 28MP стокова снимка. Ако не подготвяме нещо като брошура, готова за печат, няма да използваме пълната разделителна способност на снимката в нашите блогове. Нека да кажем, че в нашия блог има фиксиран максимален размер на изображението 1600px.

Експеримент: Ще променим размера на изходното изображение до 1600px и ще създадем четири версии – две за формат PNG и две за JPG. За всеки формат (JPG / PNG) ще използваме (a) препоръчваме настройките за компресия и (b) настройките за максимална компресия.

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

Резултати: Ето резултатите в хубава диаграма, която трябва да следвате:

Оригинално изображение (KB)

10870
Целева резолюция1600px
форматНастройкиРазмер (KB)% Намаление
JPGПрогресивно, качество = 8523198%
Непрогресивно, качество = 8523998%
PNGКомпресия = 0557549%
Компресия = 6185283%
Компресия = 9175084%

От пръв поглед може да се мисли, че 84% компресия на PNG е достатъчно добър спрямо 98% постигнато в JPG. Това не е напълно вярно. Ако разгледате по-отблизо размерите на изображението, ще видите, че PNG тежи малко над 1,7MB, докато JPG е 0,22MB. Което означава, че PNG е 8 пъти по-тежък от JPG версия на същото изображение със същата разделителна способност. С други думи, за същото изображение и разделителна способност, JPG версията е със 700% по-лека от PNG!

За същото изображение и разделителна способност, JPG версията е със 700% по-лека от PNG!

Като правило, използвайте PNG за плоски изображения, а JPG за всичко останало.

Контролен списък за качване на стокови снимки в блогове

Има много блогове, в които редакторите директно качват пълната разделителна версия на изображението в своите публикации в блога. Ето няколко указателя за качване на стокови снимки в блогове. Използвам безплатен софтуер, наречен IrfanView, който има много страхотни функции. Ще илюстрирам всеки един за вас.

1. Преоразмерете вашето изображение

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

IrfanView има Партидно преобразуване функция (натиснете B след стартиране на приложението), която може да приложи списък с функции за куп изображения с едно движение. За нашите цели функциите включват оразмеряване, изрязване, добавяне на воден знак и т.н..

2. Премахнете EXIF ​​данни

Снимките, щракнати на обикновена камера, са много вградени метаданни – което не е нищо друго освен малки (но полезни) битове информация за изображението. Примерите за такава информация включват GPS координати на мястото, когато е щракната снимката, ISO настройки, модел на камерата и т.н..

EXIF информация за произволна снимка, щракната върху моя iPhone

Освен ако не фотографски блогове, обикновено не искаме такава информация в изображението на публикацията в блога. Когато запазвате или пакетно преобразувате изображения в IrfanView, EXIF ​​данните обикновено се премахват. Това помага за запазването на поверителността ви – особено на вашето физическо местоположение. Разликата в размера на повечето снимки е около 200-300 KB на изображение.

3. Запазете като прогресивен JPG

IrfanView запазва JEPG като прогресивни по подразбиране

Прогресивното JPG изображение зарежда изображението слой по слой – като по този начин ускорява времето за зареждане. Стартираха мрежи за доставка на съдържание като KeyCDN автоматично преобразуване JPG файлове за прогресивни JPG файлове за ускоряване на доставката на изображения и оптимизиране на съхранението.

4. Задайте DPI на 72

DPI или точки на инч е мярка за качество на изображението. За печатни материали се използва висока стойност на DPI. За мрежата стойност 72 е перфектна.

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

Настройки за пакетно преобразуване в IrfanView за типичен блог за WordPress

5. Оптимизирайте вашите изображения

Без значение дали сте използвали JPG или PNG, трябва да оптимизирате изображението си. Има много сериозни страхотни онлайн инструменти, които ви помагат да оптимизирате вашите изображения и да запазите много на пространството.

Говоря за услуги като TinyPNG или TinyJPG, който просто оптимизира вашите PNG / JPG изображения с някои усъвършенствани алгоритми.

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

За да бъда честен, не знам как работят алгоритмите, но те се справят и аз винаги успявах да получа намаление с 50-70%, без значение колко най-добре ги спестявам.

Можете също да си купите Pro версия на услугата като Photoshop плъгин за $ 50 USD. Предлагат се както версии за Windows, така и за Mac. За моите цели онлайн версията (съчетана с Запазване в Dropbox функция) работи най-добре.

Плъгини за оптимизация на изображения в WordPress

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

EWWW Облачен оптимизатор на изображения

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

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

Но тук е проблемът. Много хостове (включително WPEngine) не позволяват приставката за оптимизация на изображения EWWW, тъй като тя поставя много допълнително натоварване на сървъра. Ако по някакъв начин успеете да заобиколите ограниченията на сървъра, може да рискувате акаунта ви да бъде спрян поради нарушения на правилата.

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

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

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

TinyPNG WordPress Plugin

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

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

заключение

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map