Dimensiuni implicite ale imaginii WordPress și cum să adăugați dimensiuni personalizate

când încărcați o imagine, WordPress face multă muncă în culise, astfel încât să puteți servi imaginea vizitatorilor dvs. Puteți piggyback pe acest proces și adăugați dimensiuni de imagine personalizate pentru a salva având pentru a redimensiona imaginile manual.

în acest post, voi explica cum și de ce WordPress creează diferite dimensiuni de imagine. Apoi vă voi învăța cum să adăugați propriile dimensiuni de imagine modificând funcțiile.fișier php, regenerați miniaturile și adăugați noile dimensiuni ale imaginii la blocul de imagini Gutenberg și/sau bucla WordPress.

dimensiuni de imagine WordPress explicate

de fiecare dată când încărcați o imagine în Biblioteca Media WordPress, acestea sunt opțiunile suplimentare de dimensiune a imaginii pe care WordPress le creează în mod implicit:

• miniatură
• Mediu
• Mediu Mare
• mare

Dacă tema specifică dimensiuni suplimentare ale imaginii, WordPress le creează și pe acestea.

WordPress păstrează, de asemenea, dimensiunea originală pe care o încărcați și o numește completă ca în dimensiune completă.

puteți vedea toate acestea (cu excepția Medium_Large) în meniul drop-down Gutenberg image Block Image Size când introduceți o imagine într-o pagină sau într-o postare.

de ce WordPress creează atât de multe imagini?

imaginile sunt ca pantalonii. Vrei să te asiguri că ai mărimea potrivită. Pantalonii și imaginile prea mici arată prost și este dureros de evident pentru tine și pentru toți ceilalți că nu se potrivesc bine. Imaginile prea mici de pe site-ul dvs. vor arăta întinse sau pixelate.

în schimb, dacă sunt prea mari, este super risipitor. Nu ai pune o pereche de pantaloni făcuți pentru un bărbat pe un copil, nu? Este atât de multă țesătură suplimentară care nici măcar nu este necesară. Copilul se va pierde într-un picior de pantaloni 😉

imaginile sunt aceleași. Dacă imaginea dvs. este prea mare pentru container, pierdeți lățimea de bandă și timpul descărcând-o pentru a fi difuzată pe pagina dvs. Și pentru ce? Pentru nimic.

în mod ideal, imaginile de dimensiune completă pe care le încărcați ar trebui să fie suficient de mari pentru a se potrivi cu cel mai mare container de imagini de pe site-ul dvs., dar nu mai mari. Atunci când utilizați imagini pe site-ul dvs., ar trebui să utilizați dimensiunea exactă a imaginii de care aveți nevoie.

deoarece scalarea imaginilor pentru a crea dimensiunea potrivită în Photoshop sau alt editor de imagini necesită timp prețios, WordPress își asumă această sarcină și o face pentru dvs. Mulțumesc, WordPress!

tot ce trebuie să faceți este să alegeți dimensiunea corespunzătoare atunci când introduceți o imagine în site-ul dvs. pentru a obține beneficiile de performanță ale utilizării unei imagini care este corectă.

dacă dimensiunile implicite ale imaginii WordPress nu sunt dimensionate perfect pentru tema dvs., puteți ajusta valorile implicite în secțiunea Setări Media > sau puteți adăuga dimensiuni personalizate, astfel încât să aveți mai multe opțiuni din care să alegeți.

dimensiunile implicite ale imaginii sunt următoarele:

• 150px pătrat pentru miniaturi
• 300px lățime pentru imagini medii
• 768px lățime maximă pentru imagini medium_large
• 1024px lățime maximă pentru imagini mari.

Medium_large a fost adăugat pentru a profita de suport imagine receptiv, motiv pentru care nu este inclus în pagina de setări. Vorbind de imagini responsive …

imagini Responsive

toate aceste imagini în diferite dimensiuni servesc unui alt scop, deci nu ar trebui să setați valorile implicite la zero pentru a împiedica WordPress să le creeze, așa cum sugerează unele tutoriale.

WordPress a adăugat imagini receptive la core în versiunea 4.4. În loc să populeze atributele image src cu URL-ul pentru o singură imagine, WordPress a adăugat, de asemenea, srcset (set de surse), care este o listă de adrese URL ale imaginilor de diferite dimensiuni.

ghici ce imagini folosește pentru a crea acea listă? Da, WordPress folosește aceleași imagini la diferite dimensiuni pe care le creează atunci când încărcați o imagine.

oferă această listă browserului, astfel încât să poată selecta o imagine adecvată dispozitivului vizitatorului. Dacă vizitatorul utilizează un dispozitiv mobil, va primi o imagine mai mică în srcset. Dacă vizitează site-ul dvs. pe un dispozitiv Retina desktop, atunci vor primi fișierul imagine complet Retina-ready pe care l-ați încărcat. Din nou, acesta este motivul pentru care ar trebui să încărcați o imagine suficient de mare pentru a umple această nevoie.

când adăugați o dimensiune personalizată a imaginii, WordPress o va adăuga la srcset atâta timp cât are același raport de aspect. În cazul în care dimensiunea imaginii personalizate culturi imaginea într-o formă diferită, atunci acesta va fi omis din set.

„optimizarea Web” imagini mai mari în WordPress

WordPress 5.3 a introdus un nou mod de a gestiona fișierele mari de imagine prin detectarea și generarea unei „dimensiuni maxime optimizate pentru web” a acestora.

cum funcționează?

când este încărcată o nouă imagine, WordPress va detecta dacă este o imagine „mare” pe baza înălțimii sau lățimii acesteia peste big_image threshold.

valoarea prag implicită este 2560px (aceasta poate fi modificată folosind noul filtru big_image_size_threshold).

dacă înălțimea sau lățimea unei imagini este peste acest prag, aceasta va fi redusă – pragul fiind utilizat ca valoare max-înălțime și Max-lățime.

imaginea redusă va fi utilizată ca cea mai mare dimensiune disponibilă.

doriți să dezactivați scalarea?

scalarea este controlată de filtrul big_image_size_threshold.

returnarea false din filtrul callback îl va dezactiva (ca mai jos):

add_filter( 'big_image_size_threshold', '__return_false' );

miniaturi WordPress și dimensiunea imaginii recomandate

am ajuns acum la partea din tutorialul nostru în cazul în care vom descoperi întreaga miniatură/mizerie imagine recomandate. Practic, problema se reduce la aceasta; deoarece WordPress menține compatibilitatea înapoi pe măsură ce evoluează, numele lucrurilor se schimbă, dar funcțiile se referă în continuare la lucruri după numele lor vechi.

dimensiunea imaginii miniaturilor WordPress a fost introdusă în versiunea 2.9, dar a fost rapid schimbată în imagini prezentate în versiunea 3.0, dar, din păcate, numele s-a blocat. Deci, veți auzi adesea imagini prezentate denumite miniaturi în tutoriale și chiar în numele funcțiilor.

iată câteva exemple:

• Dacă tema dvs. nu are imagini prezentate și doriți să activați această caracteristică, veți adăuga add_theme_support( 'post-thumbnails' ); în fișierul funcții.
• pentru a afișa dimensiunea imaginii prezentate de WordPress într-o temă, veți utiliza funcția the_post_thumbnail().

miniaturile și imaginile prezentate au o dimensiune implicită de 150px pe 150px. Dacă utilizați the_post_thumbnail() funcția fără un argument pentru a specifica dimensiunea, se va folosi dimensiunea implicită pătrat 150px.

pentru a face acest lucru mai puțin confuz pentru dvs., astfel încât să puteți utiliza de fapt dimensiunea potrivită, vă sugerez să creați o dimensiune personalizată a imaginii și să o denumiți prezentată-mare sau ceva similar. Apoi, când doriți să utilizați acea imagine În you ‘ re the loop, veți utiliza the_post_thumbnail('featured-large').

înainte de a începe să creați dimensiuni de imagine personalizate în WordPress

pe măsură ce începeți să creați dimensiuni de imagine personalizate, evitați să treceți peste bord și să creați imagini pentru fiecare scop imaginabil. În caz contrar, veți arde prin spațiu pe găzduirea dvs. și dacă utilizați un serviciu de optimizare a imaginii care vă taxează pe imagine, veți trece prin alocația de imagine mult mai repede.

dacă planul dvs. vă permite să optimizați 100 de imagini, dar fiecare încărcare generează 9 dimensiuni suplimentare care trebuie, de asemenea, optimizate, veți atinge limita după ce încărcați 10 imagini. Rețineți acest lucru atunci când adăugați dimensiuni personalizate și alegeți planuri de optimizare a imaginilor.

Smush Pro nu are limite de optimizare a imaginii și vine cu un CDN, astfel încât să puteți păstra spațiul de stocare al serverului clar. Veți putea adăuga mai multe dimensiuni de imagine personalizate decât în mod normal. Ganditi-va ca echivalentul de a pune pantaloni flowy MC Hammer în loc de blugi skinny mici pe acei copii, deoarece materialul este ieftin 🙂

încercați Smush Pro gratuit timp de 7 zile.

cum se adaugă dimensiuni de imagine personalizate în WordPress

iată codul pe care îl vom adăuga la fișierul nostru de funcții pentru a adăuga dimensiuni de imagine:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

această funcție acceptă 4 parametri în această ordine:

1. numele pe care îl dați dimensiunii personalizate a imaginii
2. lățimea imaginii în pixeli
3. înălțimea imaginii în pixeli
4. în cazul în care imaginea este decupată pentru a se potrivi lățimii și înălțimii specificate mai sus

decupare

parametrul de decupare este boolean, deci veți folosi true sau false. Dacă îl lăsați în întregime, atunci va fi implicit la fals.

dacă setați parametrul de decupare la true, atunci WordPress vă va decupa imaginea pentru a se potrivi dimensiunilor pe care le specificați atunci când creează imaginea personalizată.

de exemplu, dacă dimensiunea personalizată a imaginii este de 600px pe 600px pătrat și setați decuparea la true, atunci dacă încărcați o imagine dreptunghiulară de 600px pe 800px, 200px va fi tăiată pentru a face imaginea pătrată.

add_image_size( 'custom-image-square', 600, 600, true );

setarea parametrului de decupare la true este utilă pentru dimensiunile imaginilor care trebuie să fie exacte, cum ar fi imaginile prezentate sau imaginile de arhivă care trebuie să se potrivească perfect unei anumite dimensiuni.

pentru imaginile care pot avea mai mult spațiu de mișcare, cum ar fi dimensiunea imaginii postării WordPress și imaginile de pe paginile care tind să aibă înălțimi și lățimi variabile, atunci puteți seta decuparea la fals. Aceasta va redimensiona imaginile, dar nu va schimba forma imaginii și nu va tăia pixeli.

aruncați o privire la ghidul nostru SEO pentru imagini dacă încercați să conduceți trafic către site-urile dvs. cu imaginile dvs.

regenerarea miniaturilor

unul dintre cei mai importanți pași atunci când fie:

1. modificarea dimensiunilor implicite ale imaginii WordPress
2. adăugarea dimensiunilor personalizate ale imaginii sau
3. trecerea la o temă nouă care are dimensiuni personalizate diferite

regenerează miniaturile.

în acest context, miniaturile se referă la toate imaginile suplimentare pe care le creează WordPress, inclusiv dimensiunile personalizate ale imaginilor care sunt incluse în tema dvs. și cele pe care le creați prin fișierul dvs. de funcții.

când faceți o modificare a modului în care WordPress creează imagini suplimentare, atunci va afecta doar imaginile pe care le încărcați înainte. Ea nu actualizează imaginile care sunt deja în biblioteca media.

pentru a schimba imaginile pe care le-ați încărcat deja, va trebui să utilizați pluginul popular Regenerate Thumbnails.

după ce îl instalați, îl veți găsi în secțiunea Instrumente.

când vă regenerați miniaturile în noile dimensiuni, veți avea opțiunea de a șterge vechile dimensiuni de imagine neutilizate pentru a elibera spațiu pe server.

cum se adaugă dimensiuni de imagine personalizate în meniul derulant din blocul de imagini Gutenberg

trebuie doar să adăugați codul de mai jos în fișierul funcțiilor dvs. dacă doriți ca dimensiunile de imagine personalizate să apară în meniul derulant din blocul de imagini Gutenberg. Dacă ați creat o dimensiune personalizată a imaginii pentru a o utiliza în culise pentru tema dvs., puteți sări peste acest pas.

o să ne agățăm de filtrul image_size_names_choose.

în matrice, voi adăuga numele dimensiunii personalizate pe care am specificat-o în funcția add_image_size și numele pe care vreau să apară în meniul derulant din paranteze.

după cum am învățat când am făcut acest tutorial, va trebui să regenerați miniaturile înainte ca imaginea să apară în meniul derulant.

WordPress Adăugați dimensiunea imaginii fragment de cod complet

apoi, vom combina tot ce am învățat într-un bloc de cod cu un exemplu din lumea reală.

să presupunem că doriți să adăugați dimensiuni de imagine personalizate pe blogul dvs.

iată dimensiunile imaginii pe care doriți să le adăugați:

• a 1600px de 400px recomandate imagine
• o dimensiune 800px care se întinde pe lățimea secțiunii de conținut blog-ul dvs.

deoarece tema noastră nu acceptă în prezent imagini prezentate, vom începe cu asta.

veți vedea apoi dimensiunile mele personalizate. Observați că nu am decupat imaginile care se vor întinde pe lățimea conținutului blogului. Voi decupa greu imaginile mele prezentate, deoarece vreau să se alinieze doar dreapta.

singura imagine pe care vreau să o adaug la meniul derulant Gutenberg este imaginea blogului, deoarece voi folosi dimensiunea imaginii prezentate de WordPress în tema mea.

după ce adaug acest cod la fișierul meu functions.php, următorul pas este regenerarea miniaturilor.

pentru a utiliza imaginea mea personalizată pentru postările mele în buclă, voi adăuga următoarele la single.phpsau index.php

vedeți cum am adăugat 'featured-large' în funcția the_post_thumbnail()? Aceasta va afișa imaginea mea prezentată sub titlurile postărilor mele de pe blog, deasupra conținutului meu.

dimensiuni de imagine personalizate Cele mai bune practici

iată câteva sfaturi pentru a nu întâmpina probleme în crearea de imagini personalizate în WordPress.

1. încărcați întotdeauna cel mai mare fișier pe care îl puteți. Dacă dimensiunea imaginii dvs. este prea mică, WordPress nu va putea crea toate dimensiunile de care are nevoie pentru a vă servi imaginile corect pe o varietate de dispozitive.
2. dacă trebuie să redimensionați dimensiunea implicită medium_large, utilizați funcția update_option(). Puteți utiliza aceeași funcție pentru a actualiza orice altă dimensiune implicită a imaginii WordPress.
3. dacă sunteți în afara buclei WordPress, puteți utiliza funcția get_the_post_thumbnail() pentru a utiliza una dintre imaginile personalizate.
4. Iată mai multe despre decuparea moale și decuparea tare atunci când creați dimensiuni personalizate de imagini în cazul în care întâmpinați probleme.

asta este tot ce trebuie să adăugați dimensiuni personalizate de imagine

odată ce înțelegeți cum funcționează dimensiunile personalizate ale imaginii în WordPress, le puteți modifica pentru a se potrivi nevoilor dvs. și pentru a economisi mult timp. Obținerea corectă a dimensiunilor imaginii vă ajută, de asemenea, să vă îmbunătățiți performanța site-ului și clasamentul motorului de căutare, deci este important să obțineți dreptate.

dacă doriți cu adevărat să vă duceți Optimizarea imaginii la un alt nivel, consultați Smush. Am adăugat un CDN uimitor la Smush Pro, care are redimensionarea automată a imaginii, ceea ce vă va ajuta să evitați modificarea fișierului funcțiilor dvs. pentru a adăuga dimensiuni personalizate ale imaginii.

există și alte caracteristici excelente de optimizare a imaginilor care sunt încorporate, cum ar fi încărcarea leneșă și conversia imaginilor în formate de ultimă generație. Încercați Smush Pro gratuit timp de 7 zile și vedeți cum funcțiile de optimizare a imaginii vă pot îmbunătăți site-ul.

etichete:

• Cod
• imagini