Dimensiunile imaginilor WordPress explicate

Dimensiunile imaginilor WordPress pot fi uneori un mister! V-ați văzut vreodată această pagină de setări media în zona dvs. de administrare și v-ați întrebat ce este?

În acest articol, vom analiza dimensiunile imaginilor WordPress, despre ce este vorba și cum poate afecta acest lucru lucruri precum timpii de încărcare. În plus, ne vom uita și la modul în care WordPress utilizează aceste dimensiuni diferite de imagini în aspectul site-urilor web. Și, în sfârșit, vom arunca o privire la modul în care puteți elimina dimensiunile inutile ale imaginii sau puteți adăuga propria dimensiune personalizată.

Care este rolul dimensiunilor imaginilor în WordPress?

Este foarte important ca imaginile de pe site-ul dvs. să arate frumos și clare și de înaltă calitate. Există mai multe elemente care vor dicta acest lucru, inclusiv dimensiunea fizică a imaginii (atât dimensiunile, cât și dimensiunea fișierului) și rezoluția imaginii. Dacă imaginea dvs. este prea mare (de exemplu, 10.000 pixeli lățime) și dimensiunea fișierului este prea mare (adică peste 1 MB sau cam asa ceva), veți începe să încetiniți viteza de încărcare a site-ului dvs. În schimb, dacă dimensiunea imaginii este prea mică, atunci probabil veți observa o degradare a calității imaginii... cu alte cuvinte, ar putea începe să arate neclar sau granulat.

Găzduiește-ți site-ul web cu Pressidium

GARANTIE 60 DE ZILE BANI RAPIS

VEZI PLANUL NOSTRU

WordPress încearcă să atingă un echilibru oferind dimensiunea optimă a imaginii în funcție de locația imaginii. Face acest lucru creând 3 dimensiuni diferite de imagine de fiecare dată când încărcați o imagine în Biblioteca Media WordPress. Acestea sunt „Dimensiune miniatură”, „Dimensiune medie” și „Dimensiune mare”, cu dimensiuni de 150×150 pixeli, 300×300 pixeli (maxim) și, respectiv, 1024×1024 pixeli (maxim). În cele din urmă, va stoca și o imagine de „dimensiune completă”, care este dimensiunea originală a imaginii încărcate.

Aceste dimensiuni, împreună cu dimensiunile suplimentare pe care le vom analiza mai târziu, sunt utilizate de WordPress în diferite poziții în aspectul frontend. Acest lucru se face astfel încât imaginea folosită atât a) să arate bine, cât și b) să se încarce rapid.

Examinarea dimensiunilor imaginilor WordPress mai detaliat

Să parcurgem un exemplu, astfel încât să puteți vedea exact ce se întâmplă „în culise” atunci când încărcați o imagine pe WordPress. În scopul acestui exemplu, vom încărca o imagine cu numele „post1-feature-image”. Are o dimensiune de 294KB și măsoară 2089×1175 pixeli și vom face acest lucru cu tema implicită WordPress Twenty Twenty activă (alte teme pot modifica modul în care sunt gestionate imaginile de WordPress).

După ce am încărcat această imagine prin Biblioteca Media WordPress, ne putem conecta la site-ul nostru folosind un client FTP și, dacă ne îndreptăm către folderul Încărcare, vom vedea că au fost create mai multe versiuni ale imaginilor noastre.

Evidențiate cu roșu, veți vedea dimensiunile noastre implicite ale imaginii. Miniatura a fost decupată, deoarece aceasta este setată implicit prin setările Media.

„Dimensiunea medie” și „Dimensiunea mare” au fost redimensionate astfel încât să se evite modificarea proporțiilor reale ale imaginii. Deci, de aceea, de exemplu, „Dimensiunea medie” este 300×169 în loc de 300×300. Restul imaginilor care au fost generate sunt rezultatul unor fișiere de bază WordPress și codul temei Twenty Twenty.

Devine tehnic!

Dacă sunteți interesat de codul din spatele a ceea ce se întâmplă atunci când sunt create dimensiunile suplimentare de imagine, atunci această secțiune a articolului este pentru dvs. Dacă nu, nu ezitați să treceți la capitolul următor!

WordPress extrage instrucțiuni dintr-un fișier numit media.php care se află în folderul wp-includes/. Mergeți la aceasta, linia 4861 și veți vedea următoarele:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg este creat ca urmare a dimensiunii „medie_mari” care a fost adăugată în versiunea 4.4 WordPress pentru un suport mai bun pentru imaginile receptive și poate fi văzută pe diferite dispozitive portabile. Este definit în folderul „wp-admin/includes” din fișierul schema.php linia 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

și solicitat în Fișierul image.php în linia 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg și post1-feature-image-1980x1114.jpg sunt generate din tema „Twenty Twenty” din fișierul functions.php din rândul 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Acest lucru se face deoarece tema Twenty Twenty folosește 1200px ca dimensiune a imaginii pentru imaginile prezentate. Dacă creăm o postare de testare și adăugăm o imagine prezentată și apoi în pagina de postare unică, putem vedea cum se utilizează această dimensiune făcând clic dreapta pe imaginea prezentată și căutând în inspectorul browserului.

În cele din urmă, imaginea de 1980 px este dimensiunea utilizată pentru imaginea prezentată a celorlalte șabloane de postare. Puteți vedea acest lucru schimbând șablonul postării de testare în „Șablon de copertă”. Apoi, în inspectorul CSS al elementului HTML al imaginii de copertă, putem vedea cum este utilizată această dimensiune:

Merită întotdeauna să vă asigurați că orice imagine pe care o încărcați este mai lată decât lățimea imaginii recomandate și a copertei, pentru ca acestea să pară clare. WordPress poate reduce dimensiunile imaginilor în mod eficient, dar nu poate mări o imagine mică și să o facă să arate bine.

Eliminați dimensiunile inutile de imagini WordPress

După cum am văzut, WordPress este ocupat cu producerea unei game de dimensiuni de imagini ori de câte ori încărcăm o imagine în Biblioteca noastră media. Dar chiar avem nevoie de toate aceste imagini? În realitate, nu, nu. Nu numai că încetinește viteza cu care sunt încărcate imaginile, deoarece WordPress trebuie să lucreze în fundal creând aceste diferite dimensiuni de imagini, dar ocupă și spațiu de stocare pe care nu trebuie să îl folosim pe serverul nostru. Deci, cum oprim WordPress să creeze dimensiuni de imagini de care nu avem nevoie? Citiți mai departe pentru a afla!

Notă: Dacă nu urmați aceste instrucțiuni de pe un site web demonstrativ, vă recomandăm să implementați modificările prezentate mai jos în fișierul functions.php al unei teme secundare. Modificările aduse fișierului functions.php într-o temă părinte vor fi șterse data viitoare când tema este actualizată.

Eliminați dimensiunile implicite ale imaginii WordPress

Acest lucru poate fi realizat cu ușurință prin editarea funcțiilor.php ale temei și adăugând următorul cod:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Pentru a testa, haideți să încărcăm o nouă imagine (în exemplul nostru aceasta se numește post2-featured-image) în biblioteca media și să reîmprospătăm vizualizarea FTP a folderului de încărcare.

După cum puteți vedea, spunând WordPress să elimine cele 4 dimensiuni implicite de imagine prin fișierul functions.php, l-am oprit pe WordPress pentru a le crea în folderul nostru media. Mergând mai departe, această actualizare simplă a codului temei înseamnă că nu ne vom înfunda serverul cu dimensiuni nedorite ale imaginilor. Acest lucru va economisi spațiu și va accelera procesul de încărcare a imaginii.

Eliminarea dimensiunilor vechi de imagini din biblioteca media

Poate ați observat că, deși cele 4 dimensiuni implicite de imagini nu au fost create pentru noua noastră imagine pe care am încărcat-o, imaginea încărcată anterior are în continuare toate cele 8 variante salvate în biblioteca media. După toate probabilitățile, cu excepția cazului în care acesta este un site nou-nouț, veți fi încărcat zeci, dacă nu sute de imagini și, în toate cazurile, aceste dimensiuni „extra” vor fi fost create. Deci ce să fac?

Primul lucru de constatat este dacă aveți nevoie de aceste imagini? Înainte de a continua cu eliminarea imaginilor generate de WordPress va trebui să confirmați că aceste dimensiuni nu mai sunt folosite. Verificați postările de pe blog, imaginile prezentate și orice altă parte a site-ului dvs. web pentru a vă asigura că niciuna dintre dimensiunile vechi nu este încă utilizată.

O modalitate excelentă de a trata aceste fișiere nedorite ale imaginilor vechi este să utilizați pluginul Force Regenerate Thumbnail, care le va trece și le va șterge automat. Instalați și activați pluginul și apoi apăsați butonul „Regenerați toate miniaturile” din meniul pluginului (Instrumente->Forțat regenerarea miniaturilor).

Reîmprospătați vizualizarea folderului media FTP și veți vedea că imaginile implicite WordPress au dispărut. Grozav!

O altă modalitate ușoară de a obține același rezultat pentru dimensiunile implicite este de a modifica valoarea dimensiunilor acestora la „0” din interiorul Setări > Media în wp-admin. Veți vedea apoi ceva de genul acesta:

O metodă alternativă este de a schimba update_option( 'SIZE_w/h', 0 ); în interiorul funcțiilor.php. Nu uitați să faceți acest lucru într-un fișier functions.php cu temă secundară, astfel încât modificările dvs. să nu se piardă atunci când actualizați tema la un moment ulterior.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

Când se face această actualizare, veți vedea că Care va reflecta valoarea dimensiunilor din setările Media (din cadrul WP Admin) au fost acum actualizate la 0.

Eliminați dimensiunile suplimentare ale imaginii temei

Acum ne-am ocupat cu succes de imaginile implicite produse de nucleul WordPress. Acum putem trece mai departe și aborda imaginile create de temă (în acest caz Twenty Twenty). Dacă, la fel ca dimensiunile noastre implicite de imagine, ați ajuns la concluzia că acestea nu sunt necesare, atunci puteți face unele modificări codului temei pentru a opri WordPress să producă aceste dimensiuni în viitor.

Pentru a face acest lucru, vom folosi hook-ul init și funcția de bază remove_image_size. Copiați codul de mai jos și inserați-l în fișierul functions.php. Dacă nu utilizați tema Twenty Twenty așa cum suntem aici, atunci înlocuiți numele „post-miniatură” și „douăzeci și douăzeci de ecran complet” cu numele temei dvs. active.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Dacă încărcăm o nouă imagine acum și verificăm folderul nostru de încărcare prin clientul nostru FTP, vom vedea că toate dimensiunile sunt generate, cu excepția „post-thumbnail” și „twentytwenty-fullscreen”.

Adăugați propria dimensiune personalizată a imaginii

Acum că am învățat cum să eliminăm dimensiunile redundante ale imaginilor din WordPress, să vedem cum putem adăuga propriile dimensiuni de imagini personalizate în funcție de nevoile șablonului nostru.

Cum decidem ce dimensiuni de imagine avem nevoie?

Să presupunem că aveți un site web cu o coloană principală cu lățime de 960 px, unde imaginea caracteristică este în partea de sus și conținutul postării de mai jos. Dimensiunea dorită a imaginii va fi atunci 960px. Nu uitați să calculați și umplutura CSS, dacă există. Dacă elementele părinte au o sumă de umplutură de 20 px, de exemplu, atunci lățimea potrivită pentru imagine va fi de 920 px. Este 960px minus 20px pentru umplutura din stânga minus 20px pentru umplutura din dreapta.

Înregistrați dimensiuni noi de imagini

O modalitate simplă de a înregistra noi dimensiuni este să utilizați funcția încorporată add_image_size() furnizată de WordPress. Structura funcției este:

 add_image_size( name, width, height, crop )

Majoritatea acestor opțiuni se explică de la sine. Ultima opțiune (decupare) dictează dacă WordPress respectă proporțiile imaginii noastre la redimensionare sau dacă ne decupează imaginea. Dacă opțiunea de decupare este setată la „adevărat”, atunci imaginea va fi decupată și proporțiile nu vor fi respectate. Dacă opțiunea de decupare este omisă sau setată la fals, atunci proporțiile noastre de imagine vor fi respectate.

Să încercăm acest lucru în acțiune și să monitorizăm rezultatul folosind o imagine de testare care are 2089×1175 pixeli.

Mai întâi să adăugăm acest cod:

 add_image_size( 'new-post-thumb', 220, 180 );

Aceasta va genera un post2-feature-image-220x124.jpg în loc de 220×180 în folderul nostru de încărcări, deoarece decuparea nu este setată (fals). Același lucru s-ar întâmpla dacă introduceți următoarele:

 add_image_size( 'new-post-thumb', 220, 180, false );

Dacă, totuși, setați trunchierea la adevărat astfel, atunci o imagine post2-feature-image-220x180.jpg va fi salvată.

 add_image_size( 'new-post-thumb', 220, 180, true );

În cele din urmă, puteți dicta modul în care va fi poziționată recolta. În loc de „adevărat”, folosiți opțiuni precum „stânga” sau „sus” sau ambele:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

Matricea specifică locația decupării. Valorile care pot fi utilizate sunt:

Pentru x_crop_position: „stânga”, „centru” sau „dreapta”.
Pentru y_crop_position: „sus”, „centru” sau „de jos”.

Ieșirea în fiecare caz va fi o parte diferită a imaginii originale. Aici sunt cateva exemple:

O alternativă pentru a face acest lucru manual prin adăugarea de cod la tema noastră este să utilizați un plugin, cum ar fi Simple Image Sizes. Cu toate acestea, este util să înțelegeți ce se întâmplă în culise, chiar dacă utilizați un plugin ca acesta.

Concluzie

Utilizarea dimensiunilor corecte a imaginilor în WordPress este importantă – nu numai că asigură o experiență de înaltă calitate a utilizatorului prin prezentarea de imagini clare și de înaltă rezoluție pentru vizualizatorul site-ului web, dar are și un impact semnificativ asupra timpilor de încărcare și a utilizării serverului. Sperăm că acest articol v-a ajutat să înțelegeți importanța dimensiunilor imaginilor în WordPress și modalitățile prin care puteți modifica, elimina sau extinde dimensiunile imaginilor pentru a satisface nevoile site-ului dvs., precum și cum puteți economisi o mulțime de spațiu pe server prin oprirea WordPress. generând dimensiuni inutile pentru fiecare imagine pe care o încărcați.