Optimizējiet savus attēlus ar iepriekš definētiem attēla izmēriem [WordPress Tip]

Attēlu optimizēšana tīmekļa vietnē ir grūts uzdevums. Varat izvēlēties izmantot mazāk attēlu, saspiestu attēlu, sprites vai svg; saraksts turpinās. Viena vieta, kur daudzas WordPress vietnes tiek atbrīvotas, ir attēla izmēru noteikšana, kas ir a būtisks aspekts, lai optimizētu satura smagās vietnes.

Attēla izmēri ir ļoti svarīgi, jo attēli tiek automātiski izveidoti atbilstoši attēliem, kas tiek parādīti, kad attēli tiek augšupielādēti. Tas nodrošina, ka pat tad, ja jums ir 3000px plašs oriģinālais attēls, to nekad neizmanto, ja pietiek ar 600 pikseļu attēlu. Ideālā gadījumā 600px plaša telpa būtu jāizmanto 600px plaša attēla vietā, nevis jāpielāgo lielāks.

Šajā rakstā es jūs aizvedīšu kādi attēla izmēri ir un kā tos definēt.

Kā WordPress apstrādā attēlus

Ja esat kādreiz ievietojis attēlu WordPress rakstā, jums vajadzēja nākt ar attēla izmēra selektoru. Tas ļauj ievietot mazas, vidējas un lielas attēlu versijas. To faktiskie izmēri var mainīt WordPress iestatījumos.

Ikreiz, kad augšupielādējat attēlu, izmantojot programmu WordPress, tas ģenerē šo attēlu versijas un glabā tos atsevišķi. Piemēram, ja augšupielādējat 1200 × 800 attēlu, WordPress var izveidot 100 × 100, 600 × 400 un 900 × 600 versijas. Ievietojot attēlu un izvēloties "vidēja", tiks izmantota faktiskā vidējā versija, nevis oriģināla samazināta versija..

Tas ir ļoti izdevīgi, jo tā saglabā joslas platumu serverī un apstrādes laiku klienta datorā. Es domāju, ka nav nekāds pārsteigums, ka 600 × 400 attēla lejupielāde ir ātrāka nekā 1200 × 800 attēla lejupielāde.

Ja tiek izmantots lielāks attēls, kas jāsamazina, pārlūkprogrammai ir jārūpējas par aprēķiniem lai tas notiktu. Lai gan tas neņems stundas, tas var būt ievērojams tīmekļa vietnēs ar smagu attēlu.

Labais attēls pareizajā vietā

Galīgajam mērķim jābūt vienmēr izmantojiet atbilstošus attēla izmērus. Ja jums ir nepieciešams 440 × 380 attēls, tad no servera pieskarieties attēlam ar tādu precīzu izmēru. Ir divas galvenās vietas, kurās tiks izmantoti augšupielādētie attēli: attēlotie attēli un attēli pēc ievietošanas - es ieteiktu koncentrēties galvenokārt uz attēlotajiem attēliem.

Visās, izņemot visredzamākos rakstus, nav īsti svarīgi, vai attēls pēc attēla ir 220px vai 245px. Neatkarīgi no tā, kāda versija jums ir pieejama, būtu vienādi izmantojama. Tomēr ieteicamie attēli parasti tiek rādīti parastos izmēros. Rakstu sarakstiem var izmantot 178 × 178 sīktēlu, rakstu galvenēm varat izmantot 1200 × 600 plašu attēlu.

Bez tam jūs varat arī saglabāt atsevišķu sīktēlu / vidēju / lielu izmēru, kā noteikts iestatījumos nodrošina vieglu piekļuvi konkrētiem izmēriem pievienojot attēlus ziņām.

Tātad, ko tas viss nosaka, tas ir šāds: Vai nebūtu lieliski, ja mums būtu divi papildu attēlu izmēri, kurus mēs varētu izmantot attēlotajiem attēliem? Šie attēli tiks izveidoti līdzās pārējiem, kad attēls tiek augšupielādēts. Labā ziņa ir tāda, ka WordPress ir aptvērusi diezgan vienkāršu funkciju.

Attēla izmēru izveide

Izmantojot add_image_size () funkcija jūs varat definēt visus attēla izmērus, kas nepieciešami jūsu vietnei. Izveidosim divus iepriekš minētos piemērus. Tālāk ievietojiet kodu tēmas funkcijās.php vai spraudņa failā.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Kā redzat, šī funkcija ir četri parametri. Pirmais parametrs ļauj iestatīt lieluma nosaukumu. Otrais parametrs ir maksimālais platums, trešais - maksimālais augstums. Ceturtais parametrs nosaka cieto apgriešanu. Ja iestatīts uz true, attēls tiks izveidots atbilstoši norādītajam izmēram.

Kad tas ir pievienots jūsu tēmai vai spraudnim, WordPress izveidos divas jaunās katra augšupielādētā faila versijas.

Attēlu izmēru izmantošana

Šos attēla izmērus var izmantot vairākās funkcijās, kas saistītas ar multivides izgūšanu. Apskatīsim vispirms attēlus. the_post_thumbnail () parasti tiek izmantots, lai parādītu ziņas attēlojumu. Šādu kodu var ievietot WordPress cilpā:

 the_post_thumbnail ('featured_thumbnail'); 

Šīs funkcijas pirmais parametrs ļauj norādīt izmantojamā attēla izmēru. Tā kā esmu norādījis "featured_thumbnail", tiks izmantota šī faila 178 × 178 versija.

Ir vairākas citas funkcijas, piemēram, wp_get_attachment_image ()un wp_get_attachment_image_src () kas izmanto arī attēla lieluma parametru. Ikreiz, kad izmantojat šādu funkciju, vienmēr norādiet atbilstošu attēla izmēru.

Sīktēlu atjaunošana

Ja jums jau ir vietne, jūs nevarēsiet optimizēt savus rakstus retrospektīvi, tikai definējot attēla izmēru. Attēlu izmēri tiek ņemti vērā tikai tad, kad tiek augšupielādēts jauns attēls, tāpēc tie netiek izmantoti jau sistēmā esošajiem attēliem.

Nebīstieties, spraudņa atjaunošanas sīktēls padarīs lietas labāk! Šis spraudnis var atjaunot visu attēlu sīktēlus, ņemot vērā visus definētos attēla izmērus. Tas var arī mērķēt konkrētu attēlu, kas ir noderīgi, ja jums ir tikai daži, vai arī veicat dažas pārbaudes.

Kad jūsu sīktēli tiek atjaunoti, jums vajadzētu redzēt jūsu vietnē ievietotās optimizētās versijas. To var pārbaudīt, apskatot attēla avotu. Ja augšupielādējāt 'example.jpeg' un redzat 'example.jpeg' kā sava attēla avotu, kaut kas nav pareizi. Ja redzat “piemērs - 178 × 178.jpeg” tad viss ir labi; tiek parādīts optimizētais attēls.

Respektīvi attēli

Viena no grūtībām, lai uzturētu optimizētu vietu, ir reaktivitāte. Kad es aplūkoju rakstu iPad, liela izmēra attēla attēls tiks samazināts, jo maksimālais platums būs 786px.

Vienkāršākais risinājums ir izmantot spraudni, piemēram, Hammy. Hammy darbojas, balstoties uz jūsu tēmas satura platumu (atšķirībā no pārlūkprogrammas loga platuma) un var kalpot optimizētiem attēliem, pamatojoties uz to. Tas ir īpaši ērti mobilajiem lietotājiem, kur apstrādes jauda un joslas platums var būt problēma.

Turpmāka attēlu optimizācija

Kā es minēju ievadā, ir neskaitāmi veidi, kā optimizēt attēlus. No sprites līdz attēla saspiešanai var izmantot daudzas metodes, lai samazinātu slodzes laiku, kas nāk roku rokā ar attēliem. Ashutosh KS ir uzrakstījis lielisku rakstu, kas demonstrē 9 WordPress spraudņus, lai uzlabotu attēla veiktspēju, es iesaku to lasīt!

Es arī iesaku aplūkot bezmaksas atbildes attēlus, kas parāda, kā pievienot attēlu attēla elementam, ko vēlaties izmantot, ja vēlaties rakstīt savu kodu.