Attēlu mērogošanas rīks

Modulis Image Resizer ir paredzēts ērtai attēlu izmēru maiņai pēc to augšupielādes vietnē. Tas ir īpaši noderīgs situācijās, kad viens un tas pats attēls tiek izmantots dažādās vietnes daļās, bet tam jāparādās dažādos izmēros.

Piemēram, pēc vietnes dizaina viens un tas pats attēls var tikt attēlots vairākos blokos: paziņojumā, materiālu sarakstā un raksta pilnajā versijā. Ja attēlu vienkārši samazina, izmantojot HTML vai CSS, attēls faktiski paliek lielā izmērā (piemēram, 500×400 px), aizņemot mazāku laukumu (300×250 px). Tas negatīvi ietekmē SEO, jo palielina lapas svaru un samazina tās ielādes ātrumu — parametrus, ko meklētājprogrammas ņem vērā ranžēšanā.

Moduļa galvenās iespējas

Image Resizer ir noderīgs ne tikai no SEO viedokļa, bet arī ievērojami vienkāršo izstrādātāju un vietņu administratoru darbu. Jaunumu un satura projektos bieži nepieciešams attēlot vienu attēlu dažādās proporcijās un izmēros. Standarta mērogošanā ar CSS var tikt izkropļota malu attiecība, kas pasliktina izskatu.

Pateicoties funkcijai Crop (apgriešana), modulis automātiski izgriež nepieciešamo attēla apgabalu un pielāgo to norādītajiem izmēriem, nezaudējot proporcijas. Jūs varat norādīt, kura attēla daļa jāizmanto — centrs, augša, apakša vai stūri.

Darbs ar ārējiem attēliem

Kā papildu iespēja modulis atbalsta darbu ar ārējiem attēliem. Ja materiālā tiek izmantots attēls, kas augšupielādēts trešās puses pakalpojumā (izmantojot tiešo saiti), Image Resizer var automātiski lejupielādēt to jūsu serverī un pēc tam veikt:

• izmēra maiņu;

• kvalitātes iestatīšanu;

• attēla apgriešanu.

Failu nosaukumu SEO optimizācija

Viena no DLE problēmām tiek uzskatīta Unix timestamp pievienošana attēla nosaukumam. Šādi gari un nesalasāmi failu nosaukumi nenes labumu SEO. Image Resizer atrisina šo problēmu, ļaujot izmantot alt-taga vērtību kā faila nosaukumu.

Tādējādi attēli var automātiski iegūt jēgpilnus, SEO draudzīgus nosaukumus bez liekiem prefiksiem.

Veiktspēja un kešošana

Attēlu izmēru maiņa netiek veikta katru reizi, kad lapa tiek atvērta. Apstrāde notiek tikai pirmajā attēla parādīšanas reizē, pēc kuras rezultāts tiek saglabāts kešatmiņā. Tas nozīmē, ka:

• slodze uz serveri ir minimāla;

• lapu ielādes ātrums nesamazinās;

• atkārtota apstrāde nav nepieciešama.

Īsi URL attēliem

Ja pat pēc pārsaukšanas attēlu URL paliek pārāk garš, varat aizstāt ceļu
/uploads/cache/
ar virtuālo direktoriju, piemēram, /resimler/.

⚠️ Svarīgi: norādītais virtuālais ceļš nedrīkst sakrist ar reāli izmantotajiem sistēmas direktorijiem vai kategoriju nosaukumiem.

Automātiska width un height pievienošana

Pēc attēla izmēra maiņas modulis var automātiski pievienot atribūtus width un height HTML kodā. Tas pozitīvi ietekmē SEO un izkārtojuma stabilitāti, jo pārlūkprogramma jau iepriekš zina attēla izmērus.

Lietošanas piemērs

TPL kods:

HTML bez moduļa
Attēla izmērs: standarta medium no administrācijas paneļa

HTML ar moduli
Izmērs: 140×100 px, kvalitāte: 90%

HTML ar moduli (bez automātiskās nosaukšanas):

Attēlu augšupielāde pēc ārējās saites

Jūs varat automātiski lejupielādēt attēlus no trešo pušu vietnēm, izmantojot parametru d:1:

Rezultāts:

Attēla izmērs tika samazināts no 94 KB līdz 12 KB, kas būtiski samazina kopējo lapas svaru.

Elastība lietošanā

Moduli var izmantot jebkurā .tpl failā. Tas ir saderīgs ar:

• image-tagiem;

• papildu laukiem;

• standarta DLE veidnēm.

Ja nepieciešams, moduli var ieslēgt un izslēgt jebkurā brīdī.

Ielādes ātruma optimizācija

Ja jūs neapmierina vietnes ielādes ātrums un jūs izmantojat dažāda izmēra attēlus, Image Resizer ļaus uzskatāmi redzēt atšķirību Google PageSpeed.

Vēl lielākai optimizācijai var:

• lejupielādēt attēlus no /uploads/cache/;

• papildus saspiest tos, izmantojot utilītas (piemēram, optipng);

• augšupielādēt atpakaļ serverī.

Parametru ierakstīšanas formāti

Apgriešana (Crop)

Pirms apgriešanas attēls automātiski tiek samazināts līdz minimāli pieļaujamajam izmēram, pēc tam tiek veikta kadrēšana.

Parametru apraksts

• w — platums

• h — augstums

• q — kvalitāte (0–100)

• f — platuma un augstuma pievienošana HTML

• d — ārējā attēla lejupielāde uz serveri

• e — mērogošanas orientācija:

  • 1 vai w — pēc platuma

  • 2 vai h — pēc augstuma

  • 0 vai tukšs — pēc garākās malas

Papildu iespējas

Administrācijas panelī var izvēlēties servera atbalstīto hash metodi. To izmanto, lai izveidotu unikālu faila nosaukuma sufiksu, piemēram:

Šis ir moduļa forks, kods ir labots, lai darbotos ar aktuālajām DLE 19.0 versijām (Oriģināls atrodas šeit: https://github.com/dlenettr/image-resizer).

Ja kopējat šo failu savā vietnē, norādiet saiti uz mūsu vietni kā uzlabojuma autoriem!