Optimizējiet attēlus programmā Photoshop tīmeklim WebP formātā

Arvien vairāk uzņēmumu lūdz savām dizaina komandām migrēt visus attēlus no savām tīmekļa vietnēm uz WebPatstājot aiz sevis klasiskos JPG un PNG formātus. Iemesls nav nejaušs: tam ir daudz sakara ar ielādes ātrums, SEO un lietotāja pieredzeProblēma ir tā, ka, ja strādājat ar Photoshop vai Lightroom Classic, iespējams, esat atklājis, ka no pirmā acu uzmetiena šīs programmas nešķiet īpaši labi darbojamies ar šo formātu.

Ja jums ir dota vesela mape ar Jums ir .png un .jpeg faili, un jums ir lūgts tos konvertēt uz WebP formātu.Ir normāli, ja rodas šaubas: kā tos pareizi eksportēt?, kādus iestatījumus izmantot, lai nezaudētu kvalitāti?, kā ir ar krāsu profilu? un ar pārlūkprogrammām, kas vēl neatbalsta WebPŠajā rokasgrāmatā es jums soli pa solim pastāstīšu, Kā optimizēt attēlus programmā Photoshop tīmeklim WebP formātāKam jāpievērš uzmanība svara, kvalitātes un SEO ziņā, un kā to integrēt savā tīmekļa vietnē vai e-komercijā, to nesabojājot.

Kas ir WebP un kāpēc visi par to runā?

WebP ir mūsdienīgs attēlu formāts, ko Google izstrādāja īpaši tīmekļa pārlūkošanai.Tas izmanto uzlabotas saspiešanas metodes (pamatojoties uz VP8 kadru kodēšanu un bloku prognozēšanu), lai samazinātu faila lielumu. saglabājot vizuālo kvalitāti, kas ir ļoti līdzīga JPG un PNG formātiemTāpēc Google PageSpeed, Lighthouse, Semrush un citi auditēšanas rīki to turpina ieteikt.

WebP lielā priekšrocība ir tā, ka Tas rada failus, kas ir līdz pat 30% vieglāki nekā to JPEG vai PNG ekvivalenti.gan ar zudumradošu, gan bezzudumu saspiešanu. Praksē tas nozīmē, ka Jūsu vietne ielādēsies ātrāk.Tas samazinās joslas platuma patēriņu un uzlabos lietotāja pieredzi, ko Google ļoti pozitīvi vērtē savā rangā.

Vēl viena no tās lielajām priekšrocībām ir tās daudzpusībaTas atbalsta zudumradošu un bezzudumu saspiešanu, caurspīdīgumu (alfa kanālu) kā PNG un animācijas kā GIF, bet ar daudz mazāku faila lielumu. Tāpēc WebP ir īpaši interesants tiešsaistes veikali, emuāri ar daudziem attēliem, produktu galvenās lapas un tīmekļa vietnes ar lielu vizuālo slodzi.

Lai sniegtu jums īstu priekšstatu, ir praktiski gadījumi, kad Attēls, kas PNG formātā svēra vairāk nekā 600 kB, WebP formātā ir samazināts līdz mazāk nekā 5 kB.bez lietotāja manāma kvalitātes zuduma. Mēs runājam par faila lieluma samazināšanu no aptuveni 80 reizēm, kas būtiski ietekmē lapas ielādes ātrumu.

WebP priekšrocības salīdzinājumā ar JPG, PNG, GIF un citiem formātiem

Pirms steidzaties konvertēt pusi sava servera uz WebP, ir labi to skaidri saprast. Ko šis formāts patiesībā piedāvā, salīdzinot ar tīmeklī visbiežāk izmantotajiem formātiem?Kopējais attēls ir šāds:

JPG (vai JPEG)Tas ir standarts fotogrāfijām. Tas darbojas ar zudumu saspiešanaTas ļauj ievērojami samazināt izmēru, upurējot daļu no sākotnējās attēla informācijas, parasti cilvēka acij to daudz nepamanot. Tas ļauj pielāgot kvalitāti un ir ideāli piemērots produktu fotoattēliem, portretiem vai sarežģītām ainām, taču Tam trūkst caurspīdīguma..

PNGplaši izmanto logotipi, ikonas un grafika ar caurspīdīgām plēvēmTas izmanto bezzudumu saspiešanu, tāpēc saglabā visus attēla datus. Tas nozīmē faili ar labāku precizitāti, bet parasti lielākiPNG-24 saglabā visas krāsas un kvalitāti; PNG-8 samazina paleti un tādēļ var būt saistīts ar informācijas zudumu.

GIFVēsturiski karalis vienkāršas animācijas tīmeklīTas atbalsta samazinātu krāsu paleti un animāciju pa kadriem, bet Faila lielums parasti ir liels, ņemot vērā tā piedāvāto saturu.Mūsdienās WebP to pārspēj praktiski visos aspektos.

SVGTas ir vektora formāts, kas ir ļoti ieteicams logotipiem, ikonām un ilustrācijām, kurām jābūt kāpt, nezaudējot asumuProblēma ir tā, ka, ja to izmantojat kaut kam, kam tas nav paredzēts (piemēram, milzīga rastra attēla ievietošanai SVG), varat iegūt milzīgi faili, vairākas reizes smagāki nekā līdzvērtīgi PNG vai WebP faili.

WebPapvieno labāko no visa iepriekšminētā: Zaudējama vai bezzudumu saspiešana, caurspīdīguma atbalsts, animācijas, EXIF ​​un XMP metadati, kā arī izmēri, kas ir par 25–34 % mazāki nekā JPG un aptuveni par 26 % mazāki nekā PNG.Saskaņā ar Google pētījumiem, to plaši atbalsta arī tādas mūsdienu pārlūkprogrammas kā Chrome, Firefox, Edge un Safari (sākot ar 14. versiju).

Kāpēc optimizēt vietnes attēlus (ne tikai WebP)

Attēli parasti attēlo no 60% līdz 65% no kopējā tīmekļa lapas ielādes baitu skaitaJa jūs tos nekontrolējat, neatkarīgi no tā, cik labi ir iestatīta tehniskā puse, tīmekļa vietne vilksiesTam ir tieša ietekme praktiski uz visu:

Uzlabots iekraušanas ātrumssamazinot attēlu izmērus (izmantojot WebP, labu saspiešanas JPG vai optimizētu PNG), Lapas ielādējas daudz ātrākTas ir īpaši pamanāms mobilajās ierīcēs un lēnos savienojumos, kur katrs kilobaits ir svarīgs.

Mazāks joslas platuma patēriņšMazāks svars nozīmē mazāk resursu tiek patērēts jūsu serverī un lietotāja datu plānāE-komercijas vietnes mērogā ar tūkstošiem apmeklējumu dienā datplūsmas ietaupījums var būt ļoti ievērojams.

SEO un pozicionēšanaGoogle un citas meklētājprogrammas to ņem vērā. ielādes laiks un lietotāja pieredzeĀtrai vietnei parasti ir vieglāk ieņemt augstāku vietu meklēšanas rezultātos, palielināt organisko datplūsmu un galu galā ģenerēt vairāk klientu.

Konversija un pārdošanaE-komercijā katra ielādes aizkavēšanās sekunde nozīmē pacientu, potenciālo klientu vai pārdošanas apjomu zaudēšanaAsi un atsaucīgi attēli samazina berzi un palielina iespējamību, ka lietotājs veiks vēlamo darbību.

Turklāt, rūpējoties par attēliem, tiek sniegta informācija par labi izveidotas un profesionālas tīmekļa vietnes sajūtaIzplūduši, pikseļoti vai saraustīti attēli rada diezgan nekvalitatīvu iespaidu, kas var sabojāt pat visrūpīgāko dizaina un tekstu rakstīšanas darbu.

Pirms eksportēšanas izvēlieties pareizo formātu

Viena no biežākajām neveiksmēm ir augšupielādēt visus attēlus vienā formātā “ieraduma dēļ”Nepārtraucot domāt par to, kas katram gadījumam patiesībā ir nepieciešams. Pareizā formāta izvēle starp JPG, PNG, SVG vai WebP rada visu atšķirību. viegla tīmekļa vietne, kas sver tikpat daudz kā kravas automašīna.

Kopumā ieteikumi ir šādi:

• Sarežģītas fotogrāfijas un foni: JPG vai WebP ar labi pielāgotu zudumradošo saspiešanu.
• Logotipi, ikonas un grafika ar caurspīdīgumu: PNG (ja nepieciešama maksimāla precizitāte) vai, vēl labāk, WebP ar caurspīdīgumu, lai samazinātu svaru.
• Tīra vektorgrafika: Labi sagatavots SVG, bez milzu rastra attēlu iegulšanas.
• Gaismas animācijas: Animēts WebP GIF vietā, ja mērķa pārlūkprogramma to atbalsta.

Ir gadījumi, kad vienkārša formāta maiņa maina spēles noteikumus. Vienā reālā projektā attēls tika atklāts SVG, kurā netika izmantoti vektori un kura svars bija vairāk nekā sešas reizes lielāks nekā citiem. Svarīgi attēli no vietnes. Pārveidojot to uz PNG, faila lielums samazinājās aptuveni 20 reizes, un, konvertējot to uz WebP, Galīgais faila lielums bija mazāks par 5 kBTā nav maģija, tā ir vienkārši pareizā formāta izvēle.

Līdzsvars starp attēla izmēru, izšķirtspēju un svaru

Runājot par attēlu optimizāciju tīmeklim, ir trīs faktori, kas vienmēr iet roku rokā: izmēri pikseļos, izšķirtspēja (PPI vai DPI) un lielums kilobaitosJebkura no tiem ignorēšana parasti noved pie pārāk liela izmēra vai sliktas kvalitātes attēliem.

Izmēri pikseļos un CSS platuma īpašībaNeatkarīgi no tā, kādu attēlu augšupielādējat, tam ir jābūt pielāgoties faktiskajai vietai, ko tas aizņems tīmeklīJa reklāmkarogs tiks parādīts ar izmēru 400x400 pikseļi, nav jēgas to augšupielādēt 800x800 izmērā "katram gadījumam", jo vizuāli tas izskatīsies 400x400 izmērā. tas turpinās svērt kā lielais attēlsNevajag arī būt pārāk mazam: ja augšupielādēsiet 200x200 attēlu 400x400 vietai, pārlūkprogramma to izstieps un attēls izskatīsies izplūdis.

Izšķirtspēja (PPP vai DPI)Tīmekļa dizainam drukas izšķirtspējas nav nepieciešamas. Tomēr drukāšanai tās parasti tiek izmantotas. 300 dpi vai vairāk, ekrānam 72 dpi ir pietiekamiPatiesībā daudzas platformas ignorē DPI vērtību un strādā tieši ar pikseļiem, taču, saglabājot to zemu tīmekļa lietošanai, var izvairīties no pārāk lielu drukāšanai gatavu failu vilkšanas.

Izmērs KBGalu galā veiktspēju nosaka faila lielums. Parasti Centieties atsevišķu attēlu izmēru saglabāt mazāku par 200 kBīpaši galvenajās lapās (sākums, produktu lapas, kampaņu galvenās lapas). Un pārliecinieties, ka Kopējais attēlu skaits vienā lapā nedrīkst pārsniegt 1 MB kad vien iespējams.

Photoshop un citi redaktori ļauj eksperimentēt ar šiem parametriem, lai sasniegt vislabāko kvalitātes/svara līdzsvaruKnifs ir pakāpeniski samazināt saspiešanas kvalitāti, līdz sākat pamanīt artefaktus vai detaļu zudumu, un pēc tam to palielināt par vienu punktu.

Kā optimizēt attēlus tīmekļa pārlūkošanai programmā Photoshop

Lai gan daudzi cilvēki joprojām augšupielādē fotoattēlus tieši no savas kameras vai mobilā tālruņa, profesionāla pieeja ir vienmēr izmantojiet redaktoru, piemēram, Photoshop lai pielāgotu izmēru, atrisinātu krāsu profilu un pareizi saspiestu. Photoshop jau gadiem ilgi ietver rīkus, kas īpaši izstrādāti šim nolūkam.

Viena no galvenajām funkcijām ir “Saglabāt tīmeklim” (klasiskajās versijās), kas ļauj Priekšskatiet, kā katrs saspiešanas līmenis ietekmē svaru un kvalitātiTo var piekļūt no izvēlnes “Fails” vai ar saīsni. Ctrl + Alt + Shift + S operētājsistēmā Windows (vai līdzvērtīgu versiju operētājsistēmā macOS). Tur jūs varat:

• Izvēlieties izvades formātu: JPG, PNG-8, PNG-24, GIF utt., un pielāgojiet katru no tiem atbilstoši savām īpašajām iespējām.
• Pielāgojiet JPG kvalitāti: Vērtības 70–80 parasti ir pietiekamas lietošanai tīmeklī, kur acs tik tikko uztver atšķirību ar 100, bet svars ievērojami samazinās.
• Paletes kontrole PNG-8 un GIF formātā: krāsu samazināšana, ja dizains to atļauj.
• Attēla mērogošana tieši dialoglodziņā, iepriekš nemainot tā izmēru uz audekla.

Turklāt Photoshop piedāvā optimizāciju. krāsu palete, metadatu iekļaušana vai izslēgšana un citas saspiešanas metodes kas, pareizi noregulēti, palīdz maksimāli izmantot katru attēlu pirms tā konvertēšanas uz WebP.

Eksportēt uz WebP no Photoshop un Lightroom Classic

Lai gan diezgan ilgu laiku Photoshop un Lightroom Classic nenodrošināja WebP iebūvēto atbalstu.Mūsdienās ir vairāki veidi, kā strādāt ar šo formātu, neizejot no ierastās darbplūsmas, izmantojot jaunākajās versijās iekļautās funkcijas vai pievienojot īpašu spraudni.

Ja strādājat ar versiju, kurā WebP opcija vēl nav redzama sadaļā “Eksportēt”, Varat instalēt oficiālu spraudni, lai iespējotu eksportēšanu uz šo formātu tieši no Photoshop.Pēc instalēšanas, eksportējot vai saglabājot tīmeklim, WebP būs pieejams formāts, un varēsiet pielāgot tādus parametrus kā:

• Kompresijas veids: ar zudumiem vai bez zudumiem.
• Kalidad: Starpvērtība (aptuveni 70–80) parasti dod lielisku rezultātu lielākajā daļā fotogrāfiju.
• Caurspīdīgums: vai saglabāt alfa kanālu gadījumos, kad tas ir nepieciešams.
• Metadati: izlemt, vai saglabāt EXIF ​​un XMP vai dzēst tos, lai ietaupītu dažus KB.

Lightroom Classic tipiskā darbplūsma sastāv no attīstīt un pielāgot fotoattēlu kā vienmēr, un pēc tam eksportēt tradicionālā formātā (piemēram, JPG ar labu saspiešanas spēju) uz to, Konvertējiet šo JPG failu uz WebP failu, izmantojot ārēju rīku vai skriptu.Tas nav tik vienkārši kā spraudņa izmantošana Photoshop, taču tas ļauj visu izstrādes darbu saglabāt LrC.

Ja jums tas ir jādara konvertēt lielu attēlu apjomuĻoti ieteicama iespēja ir izveidot [attēlu/attēlu] programmā Photoshop. piliensTas ir, neliels izpildāmais fails, uz kura velkat fotoattēlu mapes un kurš Automatizējiet masveida konvertēšanu uz WebP, izmantojot jūsu definētos iestatījumus.Tas pasargās jūs no viena un tā paša procesa atkārtošanas simtiem reižu.

Ja nevēlaties izmantot Photoshop vai dodat priekšroku citai vieglai alternatīvai, varat izmēģināt pārnēsājamus redaktorus, piemēram, PhotoDemon kas arī atvieglo ātras darbplūsmas partiju apstrādei.

Tiešsaistes pārveidotāji un automatizācija lielām partijām

Ja nevēlaties izmantot Photoshop vai nevarat instalēt spraudņus, varat izmantot arī citu iespēju. tiešsaistes pārveidotāji, lai pārietu no PNG/JPG uz WebPDaži no visbiežāk izmantotajiem ļauj jums:

• Izvēlieties saspiešanas līmeni (kaut kas būtisks kvalitātes kontrolei).
• Augšupielādējiet vairākus failus vienlaikus, nepārsniedzot noteiktu partijas ierobežojumu.
• Arī GIF animāciju konvertēšana uz animētu WebP.

Šo pakalpojumu trūkums ir tāds, ka Tie parasti ierobežo failu skaitu vienā partijā, maksimālo svaru vai lejupielādes ātrumu, un lielu attēlu augšupielādei ir nepieciešams arī stabils savienojums.

Ja esat izstrādātājs vai tuvumā ir kāds IT speciālists, vēl viena ļoti efektīva iespēja ir Automatizējiet konvertēšanu, izmantojot Node.js ar tādiem moduļiem kā imagemin un spraudnis imagemin-webpTādā veidā jūs varat integrēt konvertēšanu savos veidošanas skriptos, CI/CD cauruļvados vai nakts procesos, lai sistēma automātiski konvertētu jūsu projektam pievienotos jaunos attēlus uz WebP.

WebP saspiešana: ar zudumiem vai bez zudumiem

Viens no galvenajiem jautājumiem, eksportējot uz WebP, ir, vai izmantot zudumradoša vai bezzudumu saspiešanaIzvēle ir atkarīga no jūsu prioritātēm. absolūtā kvalitāte vai veiktspēja.

Zaudēta kompresija: Tā ir ieteicamā opcija, kad Vietnes veiktspēja ir prioritāteLossy WebP izmanto algoritmus, kas, pamatojoties uz prognozēm un matemātiskām transformācijām, novērš lieku vai tik tikko uztveramu informāciju. Saskaņā ar Google teikto, WebP attēli ar zudumiem var būt par 25–34 % mazāki nekā to JPG ekvivalenti., vairumā gadījumu saglabājot ļoti līdzīgu vizuālo kvalitāti.

Bezzudumu kompresija: Tā ir alternatīva, ja nepieciešams saglabāt visas detaļas neskartasPiemēram, korporatīvajā grafikā, kas ir ļoti jutīga pret krāsām, vai līdzekļos, kas vēlāk ir jārediģē. Šādās situācijās bezzudumu WebP joprojām ir pievilcīgs, jo vidēji Tas nodrošina failus, kas ir par aptuveni 26% mazāki nekā PNG., ar izskatu, kas identisks oriģinālam.

Praksē lielākā daļa tīmekļa vietņu un tiešsaistes veikalu izvēlas saspiešana ar labi noregulētiem zudumiem produktu fotoattēliem, reklāmkarogiem un lieliem vizuālajiem resursiem, un viņi patur tiesības bezzudumu saspiešana ļoti specifiskiem elementiem kur katrs pikselis ir svarīgs.

Pielāgojiet attēlus atsaucīgai versijai un dažādām ierīcēm.

Attēlu optimizēšana nav tikai formāts un saspiešana; jums ir jādomā arī par kā tie tiks piegādāti atkarībā no ierīcesNav jēgas sūtīt uz mobilo tālruni tādu pašu 2.000 pikseļu platu attēlu kā uz 4K monitoru.

Ideālā gadījumā vajadzētu ģenerēt dažādas katra attēla versijas, kas pielāgotas mobilajiem tālruņiem, planšetdatoriem un galddatoriemun likt pārlūkam izvēlēties vispiemērotāko, izmantojot atsaucīgu attēlu tehnoloģijas. Tas novērš nepieciešamību mobilajai ierīcei lejupielādēt milzīgu attēlu, kas pēc tam tiek parādīts samazinātā izmērā.

Turklāt adaptīvajā versijā ieteicams izvairieties rādīt nevajadzīgus attēlusDaudzām galvenajām lapām un sadaļām ir papildu dekorācijas, kas labi izskatās galddatorā, bet mobilajā ierīcē tās kalpo tikai bezgalīgai ritināšanai un datu patēriņam. Šādos gadījumos apgriezt, aizstāt vai noņemt “aizpildošos” attēlus Tas ievērojami atvieglo pieredzi mazos ekrānos.

WebP izmantošana HTML valodā: kā nesabojāt vietni vecākās pārlūkprogrammās

Viens no satraucošākajiem aspektiem, pārejot uz WebP, ir saderība ar pārlūkprogrammām, kas to vēl neatbalstaLai gan atbalsts jau ir ļoti plašs (Chrome, Firefox, Edge, modernais Safari utt.), joprojām var būt lietotāji ar vecākām pārlūkprogrammām.

Ieteicamais veids, kā ieviest WebP, neatstājot malā nevienu, ir mainīt klasiskā marķēšana par a jūsu HTML kodā. Pamata modelis ir šāds:

Tādā veidā Pārlūkprogrammas, kas atbalsta WebP, ielādēs moderno versiju.Tie, kas to nedara, automātiski izmantos rezerves JPG attēlu. Varat pievienot vairākas atzīmes. ar dažādām izšķirtspējām vai pat ar nosacījumiem tā lietošanai mediju vaicājumi kalpot, piemēram, WebP tikai mobilajās ierīcēs vai atkarībā no ekrāna platuma.

Šī tehnika ļauj Izmantojiet WebP priekšrocības, nepārtraucot saderībuUn tas ir īpaši noderīgi, strādājot pie lieliem projektiem, kuros nevar precīzi kontrolēt lietotāja pārlūkprogrammu.

WebP izmantošana CSS un Modernizr

CSS gadījumā jautājums ir nedaudz delikātāks, jo Nav tik ērta vietējā mehānisma kā Lai pārbaudītu WebP atbalstu fona attēliem, parasti tiek izmantotas JavaScript bibliotēkas, piemēram, [bibliotēku saraksts]. Modernizēt.

Modernizr ir atbildīgs par noteikt, vai pārlūkprogramma atbalsta WebP vai nē un, atkarībā no rezultāta, elementam pievieno noteiktas klases No turienes jūs varat rakstīt nosacītus CSS noteikumus, piemēram:

.webp .hero { fona attēls: url(«hero-attēls.webp»); }
.no-webp .hero { fona attēls: url(«varoņa attēls.jpg»); }

Izmantojot šo pieeju, Mūsdienu pārlūkprogrammas lejupielādēs fonu WebP formātā.Un vecākās versijas turpinās izmantot JPG vai PNG formātu, un jums nebūs jādublē HTML. Tas ir ļoti noderīgs risinājums, ja izmantojat daudzus attēli kā fona attēli CSS valodā.

WebP un WordPress: vietējais atbalsts un spraudņi

Ja jūsu vietne ir veidota, izmantojot WordPress, labā ziņa ir tā, ka Sākot ar 5.8 versiju, CMS sākotnēji atbalsta WebP attēlus.Citiem vārdiem sakot, jūs varat augšupielādēt WebP failus multivides bibliotēkā tā, it kā tie būtu JPG vai PNG faili, un WordPress ģenerēs atbilstošos sīktēlus.

Ja strādājat ar vecāku versiju vai kāda iemesla dēļ nevarat veikt atjaunināšanu, Ir vairāki spraudņi, kas pievieno atbalstu WebPŠie spraudņi parasti apstrādā:

• Atļaut WebP failu augšupielādi mediju vadītājam.
• Automātiski konvertēt esošos JPG un PNG failus uz WebP, saglabājot rezerves risinājumu neatbalstītām pārlūkprogrammām.
• Pārrakstiet attēlu URL lai piegādātu WebP ikreiz, kad pārlūkprogramma to atbalsta.

Turklāt jūs to varat apvienot ar optimizācijas spraudņi, piemēram, Imagify vai citi kompresori kas vēl vairāk samazina attēla izmēru (ieskaitot WebP), precizē kvalitātes parametrus un noņem nevajadzīgus metadatus. Tādējādi WordPress praktiski kļūst par automatizētu sistēmu Attēlu optimizācija un inteliģenta piegāde.

Produktu fotoattēlu augšupielāde e-komercijas vietnē: svarīgs kontrolsaraksts

Runājot par tiešsaistes veikalu, produktu attēli ir viens no galvenajiem pārdošanas elementiemTaču tie var kļūt arī par lielāko veiktspējas vājo vietu, ja tos pareizi nepārvaldāt. Pirms jebkādu materiālu augšupielādes savā e-komercijas vietnē vienmēr pārskatiet šos punktus:

1. Piemērots izmērsNeaugšupielādēt fotoattēlus lielāks nekā absolūti nepieciešamsDefinējiet izmērus, ko izmantosiet produktu lapām, sīktēliem, sarakstiem utt., un eksportējiet šajā izmērā. Neaugšupielādējiet 6.000 pikseļu attēlu, ja plānojat parādīt tikai 1.200 pikseļus.

2. Optimizēts faila nosaukums: tā vietā, lai atstātu klasiku IMG_1234.webpIzmantojiet aprakstošus nosaukumus ar atslēgvārdiem, piemēram, melnas-kedas-vīriešiem.webpTas palīdz attēlu SEO un sniedz kontekstu Google.

3. ALT atribūts un aprakstiVienmēr aizpildiet alternatīvais teksts (ALT) ar skaidru un atbilstošu aprakstu. Tas ne tikai uzlabo pieejamību, bet arī palīdz SEO, jo Google saprot, par ko ir attēls.

4. CDN attēliemJa jūsu veikalam ir starptautiska datplūsma, apsveriet iespēju rādīt attēlus, izmantojot [platform name missing] platformu. satura piegādes tīkls (CDN)Tādā veidā WebP un pārējie resursi tiek piegādāti no lietotājam vistuvākā servera, samazinot latentumu.

Ko darīt, ja jau ir augšupielādēti daudzi attēli

Jūsu vietne, iespējams, jau ir iestatīta un tajā ir simtiem vai tūkstošiem neoptimizētu attēluTo atkārtota pa vienam ir murgs, taču ir īsceļi, it īpaši, ja izmantojat WordPress.

Spraudņi, piemēram, WP Smush (un citi līdzīgi viņiem) atļauj Optimizējiet lielu attēlu daudzumu vairumāAr vienu klikšķi bezmaksas versijā varat apstrādāt līdz 50 attēliem vienā paketē, samazinot to izmēru bez nepieciešamības tos lejupielādēt, rediģēt programmā Photoshop un atkārtoti augšupielādēt.

Apvienojumā ar spraudņiem, kas konvertē uz WebP un pārvalda rezerves versijas, Jūs varat pārveidot lielāko daļu savas vietnes multivides bibliotēkas praktiski bez roku darba. Pēc tam jums atliek tikai Saglabājiet labu eksportēšanas un nosaukumu piešķiršanas rutīnu jaunajiem attēliem.

Ārējie rīki un papildinošas darbplūsmas

Pat ja jūsu galvenā darbplūsma ir saistīta ar Photoshop, tā ir ļoti ieteicama. Pievienojiet papildu saspiešanas slāni, izmantojot tiešsaistes rīkus, piemēram, TinyPNG vai TinyJPG. (un to WebP ekvivalenti). Tie darbojas ļoti vienkārši: jūs augšupielādējat attēlu, sistēma piemēro inteliģentu saspiešanu, un jūs gandrīz vienmēr lejupielādējat nedaudz mazāku failu. bez ievērojama kvalitātes zuduma.

Sarežģītākās vidēs šīs optimizācijas var integrēt automatizēti uzdevumi jūsu projekta versijā (piemēram, ar gulp, webpack vai npm skriptiem), lai katru reizi, kad repozitorijam pievienojat jaunu attēlu, tas tiktu saspiests un caurspīdīgi konvertēts uz WebP, bez manuālas iejaukšanās.

Pārbaudiet, vai jūsu attēli ir pareizi optimizēti

Visbeidzot, lai noskaidrotu, vai visas šīs pūles atmaksājas, Varat izmantot tādus rīkus kā Google PageSpeed ​​​​InsightsVienkārši ievadiet analizējamās lapas URL un noklikšķiniet uz “Analizēt”.

Ziņojumā redzēsiet dažādas sadaļas, kas saistītas ar Attēlu optimizācija, nākamās paaudzes formātu (piemēram, WebP) izmantošana un uzlabošanas iespējasJa viss ir zaļš, jūs esat uz pareizā ceļa. Ja tas ir sarkanā vai dzeltenā krāsā, PageSpeed ​​​​parasti norāda... Kuri konkrēti attēli rada problēmas? un kā to atrisināt.

Attēlu formāta, saspiešanas, izmēra un piegādes regulēšana ar tādiem rīkiem kā Photoshop, WebP, WordPress spraudņiem un adaptīvām metodēm ne tikai padara vietni “vieglāku”, bet arī Tas uzlabo SEO, samazina resursu patēriņu un rada profesionālas sajūtas. ko lietotāji uztver no pirmā acu uzmetiena; ja jūs arī automatizējat konvertēšanu un periodisku pārskatīšanu ar atbilstošiem rīkiem, vizuāli jaudīgas un vienlaikus ātras vietnes uzturēšana pārstāj būt galvassāpes un kļūst par dabisku jūsu darbplūsmas sastāvdaļu.