Vai jums nepatīk attēli?

Tie var pārvērst tekstu par saistošu pieredzi, kamēr lasāt. Attēli uzlabo emuāra ierakstu, padara to koplietojamāku un nosaka visas vietnes toni un zīmolu.

Un ziniet ko? Mēs esam radīti, lai reaģētu uz attēliem. Tāpēc attēlu iekļaušana saturā ir spēcīgs rīks, ko izmantot, tirgojot savu emuāru.

Taču, ja neesat uzmanīgs, attēli var veidot vairāk nekā pusi (vai pat vairāk) no jūsu tīmekļa lapas kopējā izmēra. Vēl pirms dažiem gadiem vidējais tīmekļa lapas izmērs bija 600-700 K. Tagad vidējais izmērs ir 2 MB, un tas katru gadu palielinās.

Tas ir milzīgi!

Galvenais iemesls, kāpēc tā notiek, ir tas, ka tīmekļa lapās arvien biežāk tiek izmantoti vairāki attēli, un šie attēli netiek pareizi izmērīti un optimizēti. Tas nozīmē, ka tie netiek saglabāti vai apkopoti tīmeklim draudzīgā veidā, un tā vietā tie uzpūš jūsu lapas.

Lielākā daļa no mums tomēr atstāj attēlu optimizēšanu kā pārdomu un labprātāk nodarbojas ar tādām jautrām lietām kā episkā ziņojuma izstrāde vai tīklošanās ar citiem savas nišas blogeriem.

Taču lapas uzpūšanās nozīmē, ka tiek ietekmēts lapas ielādes ātrums. Jums var šķist, ka tas nav būtiski, ja izmantojat ātrgaitas savienojumu, taču daudzi jūsu apmeklētāji to nedara. Turklāt Google nepatīk lēni ielādējamas lapas, un tas var negatīvi ietekmēt jūsu SEO.

Kāpēc nepieciešams optimizēt attēlus

Jūs smagi strādājat, lai radītu zvaigžņu saturu, un pavadāt neskaitāmas stundas, lai popularizētu savu emuāru un veidotu kontaktus ar citiem blogeriem, tāpēc pēdējais, ko vēlaties, ir, lai potenciālie apmeklētāji pamestu jūsu vietni, pirms tā pat tiek ielādēta!

Pētījumi liecina, ka līdz pat 40 % apmeklētāju noklikšķina uz pogas "atpakaļ", ja vietnes ielāde aizņem vairāk nekā trīs sekundes.

Es zinu, trīs sekundes patiešām nav tik ilgs laiks, taču, kad izmantojat mobilo savienojumu un gaidāt, kamēr ielādējas vietne, viena sekunde var šķist kā mūžība.

Tā kā daudzi jūsu apmeklētāji, iespējams, izmanto lēnākus mobilos savienojumus, kļūst skaidrs, ka jums ir jāsamazina lapas izmērs. Un mēs jau zinām, kas ir lielākais lapas izmēra palielināšanās vaininieks - tie ir jūsu attēli.

Nevajadzīgi lieli attēli arī aizņem vietu jūsu hostinga kontā. Lai gan dažiem no jums var būt hostings ar "neierobežotu" uzglabāšanas vietu, daudzi augstākās klases hostinga pakalpojumu sniedzēji zemāka līmeņa plānos ierobežo uzglabāšanas vietu līdz aptuveni 10 GB. Tas var ātri aizpildīties, īpaši, ja vienā kontā mitināt vairākas vietnes, kurās ir daudz attēlu.

Kā var noteikt, vai jūsu vietnes ātrums ir samazinājies? Pārbaudiet vietnes ātrumu, izmantojot Google PageSpeed Insights.

Ja Google ziņo par problēmu, kas saistīta ar neoptimizētiem attēliem, šeit ir aprakstīts, kas jums jāzina, lai to novērstu.

Attēlu optimizācijas pamati

Veicot attēlu optimizāciju jūsu emuārā, ir vairākas lietas, kas jums ir jāņem vērā: faila tips, attēla izmērs un izmēri, attēlu apkalpošanas veids un attēlu saspiešana.

Aplūkosim tuvāk katru no šīm jomām.

Faila tips

Attēli tīmeklī parasti tiek saglabāti PNG vai JPEG faila formātā, bet animācijas gadījumā - GIF formātā. Kurš gan nemīl šos jautros animētos GIF failus, kas klejo tīmeklī!

Tagad tas ir tehniski labi ja attēlus saglabāsiet jebkurā no šiem formātiem, jūsu tīmekļa lapas apmeklētāja pārlūkprogrammai nebūs problēmu ar to parādīšanu, taču, lai iegūtu vislabāko kvalitāti un optimizāciju, ievērojiet šādus noteikumus:

• JPEG - izmantojiet fotogrāfijām un dizainparaugiem, kuros attēlotas personas, vietas vai lietas.
• PNG - vislabāk piemērots grafikām, logotipiem, tekstizētiem dizainparaugiem, ekrānšāviņiem un gadījumos, kad nepieciešami attēli ar caurspīdīgu fonu.
• GIF - ja nepieciešama animācija, citādi izmantojiet PNG.

Kāpēc ir dažādi formāti?

PNG tradicionāli izmanto logotipu un grafikas saglabāšanai, jo tas saglabā sākotnējā attēla kvalitāti - neviens nevēlas izplūdušu tekstu un pikseļu formas. Taču, ja mēģināsiet saglabāt fotoattēlu kā PNG, tas izskatīsies lieliski, taču iegūtais faila lielums būs ne tik liels.

JPEG formātā tradicionāli tiek saglabāti fotoattēli. Lai iegūtu krasi mazāku faila izmēru, daļa attēla datu tiek izmesti, taču, tā kā fotoattēlos ir daudz dažādu krāsu un dabisku variāciju, kvalitātes zaudējums parasti cilvēka acīm nav pamanāms.

Vēlāk mēs sīkāk aplūkosim saspiešanu, bet tagad, ja atceraties tikai divas lietas, atcerieties: JPEG - fotogrāfijām un PNG - tekstam/grafikām.

Attēlu izmēri

Vai esat kādreiz ielādējis tīmekļa lapu un pamanījis, ka neliela attēla (varbūt, piemēram, galvas attēla) lejupielāde ilgst f-o-r-e-v-e-r? Piemēram, tik lēni, ka var redzēt katru ienākošo rindu? Jūs domājat sev, kā var tik mazu attēlu lejuplādēt tik ilgi?

Ja tas notiek ar lielu galvenes attēlu, ir vēl sliktāk, jo tas var aizkavēt visas lapas ielādi.

Tas notiek tāpēc, ka emuāru autors nav pareizi mainījis un optimizējis sava attēla izmēru, un mūsu galvas fotogrāfijas piemēra gadījumā, iespējams, ir augšupielādējis pilnas izšķirtspējas JPEG attēlu tieši no savas DSLR kameras.

Un tas ir milzīgs fails!

Redziet, tīmekļa pārlūkprogramma (parasti) mērogo attēlu no tā sākotnējiem izmēriem, lai tas labi iederētos savā vietā tīmekļa lapā. Tas, kas ekrānā izskatās kā mazs attēls, patiesībā varētu būt milzīgs 10 megapikseļu fotoattēls, ko pārlūkprogramma reāllaikā samazinājusi.

Dažas tīmekļa publicēšanas platformas automātiski izveidos vairākus jūsu pilnas izšķirtspējas attēla variantus dažādos izmēros, bet, ja tā nav, jums iepriekš jāmaina attēlu izmērs attēlu redaktorā, piemēram, Photoshop, Lightroom, Pixlr vai pat MS Paint. Tas var nozīmēt atšķirību starp 50 kB lielu un 5 MB lielu failu.

Piemēram, WordPress automātiski izveidos trīs (vai vairāk, atkarībā no tēmas) augšupielādētā attēla kopijas - visas ar dažādiem izmēriem -, kuras varēsiet izmantot emuāra ierakstos, nevis vienmēr izmantot pilna izmēra attēlu.

Ja jums ir ieradums augšupielādēt milzīgus krājuma fotoattēlus un vēlaties ietaupīt vietu savā hostinga kontā, WordPress spraudnis Imsanity jums palīdzēs.

Tas maina sākotnējā attēla izmēru un aizstāj to ar ērtāku, tāpēc, pat ja ievietojat pilna izmēra attēlu savā ziņojumā, tas nebūs tik slikti.

Pēc aktivizēšanas Imsanity var arī meklēt jūsu esošos attēlus un attiecīgi mainīt to izmērus.

Attēlu apkalpošana

Tas, kā jūs piedāvājat savus attēlus apmeklētājiem, pats par sevi nav tieši saistīts ar to optimizāciju, taču tas var būtiski ietekmēt lapas ielādes laiku.

Lielākā daļa emuāru autoru attēlus izvieto tieši no sava hostinga konta, un tas parasti ir labi, taču, ja patiešām vēlaties no savas vietnes izspiest visu iespējamo veiktspēju, tad attēlu izvietošana satura piegādes tīklā (CDN) var ievērojami uzlabot situāciju.

CDN sastāv no stratēģiski izvietotiem tīmekļa serveriem, kas atrodas datu centros visā pasaulē. Šajos serveros tiek izvietotas jūsu attēlu kopijas, un, kad apmeklētāja pārlūkprogramma pieprasa attēlu no jūsu vietnes, CDN automātiski novirza pārlūkprogrammu uz serveri, kas ģeogrāfiski atrodas vistuvāk.

Tas nozīmē, ka, piemēram, apmeklētāji no Eiropas saņems attēlus, kas tiek apkalpoti no vietējā Eiropas servera, nevis no servera ASV vai citur. Tā kā tiek samazināts atbildes laiks un tīkla aizture, attēli tiek lejupielādēti daudz ātrāk, tādējādi samazinot lapas ielādes laiku.

Blogošanas vednis izmanto Sucuri (tas ietver ugunsmūri drošībai, kā arī CDN), taču ir arī citi kvalitatīvi pakalpojumu sniedzēji, piemēram, Amazon Cloudfront vai KeyCDN. Pat populārais CloudFlare, kas nav gluži CDN, piedāvā CDN bez maksas un ir viegli konfigurējams vairumā koplietojamā hostinga pakotņu.

Attēlu saspiešana

Kad runa ir par attēlu optimizēšanu, nekas nesamazina faila lielumu vairāk par uzlabotu attēlu saspiešanu ar zudumiem.

Lielākā daļa attēlu rediģēšanas rīku, piemēram, Visme vai Photoshop, saglabā failus, izmantojot zudumu JPEG saspiešanu, jo tā nodrošina vislabāko faila izmēra samazinājumu. Tādējādi, lai gan attēla kvalitāte ir nedaudz samazināta, izmantojot zudumu attēlu saspiešanu, milzīgi attēli tiek samazināti līdz tīmekļa vietnei draudzīgam izmēram.

Es esmu pārliecināts, ka daudzi, kas izmanto Photoshop, varētu uzskatīt, ka tā Saglabāt tīmeklī Un pat tādi tiešsaistes attēlu rediģēšanas rīki kā PicMonkey vai Visme arī optimizē jūsu attēlus.

Bet vai zinājāt, ka ir rīki, ar kuriem var ņemt jūsu "optimizēto" attēlu no programmas Photoshop vai citiem rediģēšanas rīkiem, saspiest to vēl par 40 % (vai vairāk) un... joprojām vai tā izskatās gandrīz identiska cilvēka acij?

Šeit ir daži bezmaksas un maksas rīki, kas palīdzēs jums apstrādāt attēlus līdz tīmekļa vietnei piemērotam statusam.

Darbvirsmas rīki

ImageAlpha / ImageOptim

Mac lietotājiem ImageOptim ir bezmaksas darbvirsmas rīks, ko izmantoju katru dienu, lai optimizētu PNG attēlus - galvenokārt ekrānšāviņus - pirms to augšupielādes. Šos rīkus ir viegli lietot, jūs vienkārši velkat un nometat failus, taču tas jādara pa vienam attēlam.

Profesionāļu padoms : Tehnoloģiski zinošajiem ir ImageOptim-CLI, ar kuru varat optimizēt visu attēlu mapi uzreiz.

ImageAlpha ir zaudējumu PNG kompresors, un tas var darīt brīnumus, samazinot PNG failus, savukārt ImageOptim veic uzlabotu kompresiju bez zudumiem (ar iespēju izmantot zudumus) - un no PNG, JPEG un GIF failiem tiek noņemti nevajadzīgie metadati.

PNG attēliem vispirms izmantoju ImageAlpha:

Šeit tas samazināja manu ekrānšāviņu attēlu no 103 000 līdz 28 000.

Pēc tam izmantoju ImageOptim un ietaupīju papildu 10 %.

JPEGmini

JPEG failus optimizēju, izmantojot darbvirsmas lietojumprogrammu JPEGmini, kas pieejama gan Mac, gan Windows.

Lite versija ļauj optimizēt līdz 20 attēliem dienā bez maksas, bet, lai noņemtu ierobežojumu, tā maksā 19,99 $.

Profesionāļu padoms : Uzlabotie lietotāji, kas vēlas integrēt JPEGmini Photoshop vai Lightroom, izmantojot spraudni, var iegādāties Pro versiju par 99,99 $.

Tiešsaistes / mākoņa / SaaS rīki

TinyPNG

Ja meklējat augstas kvalitātes tiešsaistes attēlu saspiešanas rīku, TinyPNG (neskatoties uz nosaukumu, tas optimizē arī JPEG failus) ir tīmekļa lietotne, kas ļauj pārlūkprogrammā ievietot līdz 20 5 MB vai mazākiem attēliem un optimizēt tos visus uzreiz.

Tiem ir arī izstrādātāju API un ir pieejams WordPress spraudnis, kas var automātiski optimizēt attēlus pēc augšupielādes.

TinyPNG sniedz 500 bezmaksas attēlu optimizācijas mēnesī, bet pēc tam atkarībā no apjoma iekasē no 0,002-0,009 $ par attēlu.

Tagad 500 attēlu mēnesī var šķist daudz, taču, ja ņem vērā, ka WordPress bieži vien izveido trīs līdz piecas katra attēla variācijas dažādos izmēros, 500 attēli nešķiet pārāk daudz. ka daudzi Par laimi, viena attēla izmaksas ir budžetam draudzīgas.

EWWW attēlu optimizētājs

Ja neesat gatavs tērēt naudu un nevēlaties nodarboties ar attēlu manuālu optimizēšanu, bezmaksas EWWW Image Optimizer spraudnis WordPress var automātiski optimizēt augšupielādētos attēlus.

Varat izvēlēties prēmijas abonementu, kas nodrošina saspiešanu bez zudumiem, bet bezmaksas versija nodrošina tikai saspiešanu bez zudumiem, tāpēc ietaupījums nav tik ievērojams. Tomēr tas ietaupīs jūsu laiku un ir labāk nekā nekas.

Piezīme: Lai iegūtu pilnīgu pārskatu, skatiet mūsu ziņu par attēlu saspiešanas rīkiem.

Pabeigšana

Daži cilvēki prognozē, ka līdz 2017. gadam vidējais tīmekļa lapas izmērs tuvosies 3 MB, tāpēc tagad ir īstais laiks sākt optimizēt attēlus.

Atcerieties, ka ne visi jūsu apmeklētāji izmantos ātrgaitas savienojumus, un lapas uzpūšanās un lēna lapas ielādēšanās var ietekmēt jūsu vietu Google reitingā. Lai atvieglotu slodzi, jau šodien sāciet optimizēt attēlus.

Pievērsiet uzmanību attēlu izmēriem un mainiet pārāk lielu krājuma fotoattēlu vai no digitālās kameras uzņemtu attēlu izmērus, lai tie būtu atbilstošā izmērā.

Tālāk izmantojiet priekšrocības, ko sniedz mūsdienīga attēlu saspiešana, izmantojot datora lietotnes, piemēram, JPEGmini, vai mākoņa rīkus, piemēram, TinyPNG vai Kraken, un, ja iespējams, integrējiet tos WordPress, izmantojot spraudni.

Visbeidzot, ja jūsu publicēšanas platforma automātiski izveido oriģinālā attēla variācijas, izvēlieties vienu no tām savam emuāra ierakstam, nevis oriģinālo, pilna izmēra attēlu.

Saistītā lasīšana: 7 veidi, kā samazināt PDF failu izmēru.