1. Predpogoji
2. Uporabljamo priporočila za slike
3. Arhivska struktura
4. Kratka navodila za delo
5. Dodatki
6. x64 (alias)

Stran brez slik - anahronizem. Tako veliko ljudi misli, in ni brez slehernega zdrave pameti. Ne pozabite, kako dolgo ste bili na mestu zadnjega časa in kako dolgo ste na njem?

Podatki z besedilom so veliko manjši od slike. Znano je, da ljudje ljubijo svoje oči. Slike bodo torej nedvomna prednost zgodbe.

Na splošno, če govorimo o besedilu, mislimo tako na njegovo vsebino kot na priročno vizualno predstavitev, vključno z odstavki, seznami, kotacijami, tabelami. Vendar pa to ni dovolj, in celo spletna mesta z novicami poskušajo zagotoviti podobe novinarjev.

Začnimo iz predpostavke, da so slike potrebne. To so lahko fotografije, diagrami, preprosto razlaga slik.

Pred časom, ko se Putin ni zdel večen, sem naredil svoj prvi medicinski spletni portal. Potrebno je bilo postaviti slike v atlas. Očitno je, da si je težko predstavljati anatomsko strukturo telesa brez slik, še toliko bolj, da bi ga opisali z besedami. In brez nadaljnjega odlašanja, sem naložil slike v bmp (nestisnjeni format). Moram reči, da so tehtali testo? Poleg tega nekateri brskalniki niso vedeli, kako prikazati take slike.

Zakaj torej optimizirati slike? Preprost primer je fotografija. Sodobni telefoni imajo kamere v 8, 12 in še več megapikslov. 12 MP ustreza sliki 4000 × 3000 slikovnih pik. Glede na kompleksnost prizora to ustreza velikosti 2-5 megabajtov in še več. Ducat fotografij - in velikost strani se zelo poveča. Slika se prilega vsebini, kar pomeni, da mora brskalnik najprej vse prenesti, spremeniti in samo nato prikazati. Za šibke procesorjev ali z majhno količino RAM - nesreča.

Zdaj pa si zamislite, da uporabnik gleda stran s telefona. V tem primeru lahko nalaganje strani preprosto ne čaka. Zato je treba slike prednastaviti.

Nekdo bo trdil, da v tem ni smiselno, moderni CMS samodejno ustvarja sličice pri prenosu slik. Ampak ali imajo vsi svoje spletne strani na VPS ali VIP-stopnjah? Prenesite eno sliko 12 MP lahko pride ven, ampak za obdelavo, PHP bo moral dodeliti 35+ megabajtov (v teoriji, v resnici več) za shranjevanje, in potem še vedno ve, koliko ustvariti manjšo kopijo. Poceni tarife takoj potopite v presežek virov. Dober gostitelj bo od uporabnika zahteval, da tega ne stori več, slab pa ga bo ignoriral, ker je zanj pomemben samo denar, ne pa storitve.

In tako smo se odločili, da bomo ravnali pravilno. Slike smo predhodno zmanjšali in jih naložili na spletno mesto. Torej je motor lažji in ljudje. Je vse Ne res.

Mnogi uredniki ohranijo izvirne kose (metapodatke, ne-slikovne dele datoteke), ki vsebujejo dodatne informacije. Na primer, če posnamete sliko na telefonu, prenesete datoteko v računalnik, jo kliknete z desno tipko in izberete »Lastnosti → Podrobnosti«, na napravi boste videli podatke: katera kamera ste fotografirali, hitrost zaklopa, ISO in tako naprej. Za uporabnika je ta informacija neuporabna, zato jo lahko znebite.

Razmisli o tem, en kos. Kaj je tam, veliko informacij, ki jih vsebuje? Predstavljajte si. Včasih dobite slike, v katerih je na stotine kilobajtov takih podatkov. Šele danes so poslali logotip velikosti 584 KB, da bi se prilagodili. Hkrati so bile koristne informacije le 14 KB! Kar se mene tiče, ni povsem pravilno, da prisilite obiskovalca, da prenese 570 KB od zgoraj.

Povzemimo vmesne vsote. Da bi uporabniki spletnega mesta dobro delali, potrebujete:

1. Zmanjšajte velikost slike. Za pomoč vsakemu grafičnemu urejevalniku.
2. Odmetavanje delov datotek ni potrebno. Dejansko potrebuje uporabnik samo sliko.
3. Poskusite še bolj zmanjšati velikost slike.

Prvi odstavek vključuje individualno delo za vsako datoteko. Je dolgotrajen, vendar prinaša najboljši rezultat. Odpremo vsako datoteko, izrežemo, zmanjšamo, nato shranimo s sprejemljivo kakovostjo.

Toda odstavka 2 in 3 se lahko podelita na milost in nemilost posebnih programov. Programska oprema za delo s slikami. Google priporoča naslednje programe:

• jpegtran za jpg format slike.
• optipng in pngout za slike PNG.

Malo o str. 3. Grafični uredniki se ponavadi ne ukvarjajo z njim. Preprosto shranijo sliko, izberejo vnaprej pripravljene algoritme kompresije z enakimi nastavitvami, kvantizacijskimi koeficienti in drugimi stvarmi. Poleg tega mnogi pošteno prenesejo razpoložljive meta-informacije in dodajo svoje, s čimer dodatno povečajo velikost datoteke.

Predpogoji

Pred letom dni so začeli množično govoriti o storitvi. PageSpeed ​​Vpogled iz Googla. Pravzaprav so to priporočila preiskovalnega velikana o tem, kako dobro delati. Samo vnesite naslov spletnega mesta in dobite seznam predlogov za optimizacijo. Tam lahko prenesete že optimizirane vire, vključno s slikami, za vaše spletno mesto. Res je, da je to relevantno samo za preverjeno stran.

Če imate spletno mesto, ne pozabite pogledati ta članek . Še posebej uporabno za tiste, ki uporabljajo WordPress.

Uporabljamo priporočila za slike

Zdi se preprosto: prenesite programe, ki jih je določil Google, in z njimi poganjajte vse datoteke na strežniku. Problem je v tem, da so ti pripomočki konzolni. Vzamejo le eno datoteko naenkrat. Toda nismo zaman zadnji članek si vzel čas za paketne datoteke, kajne?

Informacije iz članka so povsem zadostne, da masovno ustvarite lastne datoteke, zato ne bom slikal tam, kjer je to. Predlagam, da prenesem pripravljeno pripravo, ki jo uporabljam sama.

Prenos arhiva (212 KB)

Arhivska struktura

Arhiv vsebuje mapo [ OptimizeImg ]. Če želite začeti, ga nekje razpakirajte. Nahajam se v c: emp, ni pa pomembno. Glavna stvar je, da pot ne vsebuje klicaj.

Naprej. Ta mapa vsebuje podimenik [ uploads ]. Tukaj morate postaviti datoteke, ki zahtevajo obdelavo. Najboljši del je, da lahko potisnete vsaj strukturo mape / datoteke.

Obstaja še 3 programov: jpegtran.exe | optipng.exe | pngout.exe je zelo koristen, ki ga priporoča Google. Preneseno iz ustreznih uradnih strani / repozitorijev. Če ste v dvomih ali želite le nadgraditi, prenesite iz zaupanja vrednega vira in zamenjajte obstoječe.

In končno, srce tulze. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-do-out.bat
• 3-out-to-opti.bat

Prva datoteka, 1.bat, ponovno ustvari strukturo iz [uploads]. Ustvarijo se 3 dodatne mape: [jpg_jpegtran] [png_optipng] [png_pngout] z obdelanimi minimiziranimi datotekami njihovega tipa (jpg - samo * .jpg-datoteke, enake s png).

3.bat zaporedoma zažene tri paketne datoteke za izvedbo:

• 3-go.bat je skoraj enak kot 1.bat. Preskočite jpg / png datoteke preko minimizers. Rezultat dela bodo 3 mape (glej zgoraj) z ustreznimi slikami.
• 3-opti-to-out.bat ustvari mapo [png_optipng-to-pngout], v katero so zapisane datoteke, obdelane z optipng + pngout (natančno v tem zaporedju).
• 3-out-to-opti.bat ustvari mapo [png_pngout-to-optipng], v katero so zapisane datoteke, ki jih obdeluje pngout + optipng. Podobno kot prejšnji, samo v drugačnem zaporedju.

Načeloma zadostuje samo 1.bat za naše potrebe. 3x vrečke so nastale kot rezultat raziskav in napak v prejšnji različici paketne datoteke. Tako se je zgodilo, da so bile med napako datoteke za pngout vzete iz imenika optipng. In kaj je bilo moje presenečenje, ko je lansiranje stare različice dalo 1,5-krat manjšo velikost kot v posodobljeni paketni datoteki. Posledično se je izkazalo, da lahko dvojna obdelava dobro "dohiti" slike. Ampak traja skoraj 2-krat več časa. Zato se odločite sami, če je to potrebno.

Kratka navodila za delo

1. Prenos arhiva .
2. Razpakirajte ga.
3. Pojdite v novo odprto mapo [OptimizeImg].
4. Vse datoteke, ki zahtevajo peko, kopirajte mapo [upload].
5. Zaženi 1.bat in počakaj. Če je veliko datotek in so png, počakajte dolgo.
6. Ko se v črnem oknu prikaže sporočilo o potrebi po pritisku na tipko za nadaljevanje, je vse pripravljeno. Še vedno je potrebno prevzeti vsebino ustvarjenih map in kopirati na gostovanje prek FTP, prepisati stare datoteke.

Za primer. Naj bo vaš blog na WordPress. Vse slike so shranjene v [ / wp-content / uploads / ]. Pojdite v mapo mesta (preko ftp), pojdite na [ wp-content ] in preprosto kopirajte [ uploads ] v mapo OptimizeImg z istim imenom. Zaženi 1.bat in počakaj. Po končanem delu je na strežnik naložena vsebina [jpg_jpegtran] (greva tja!). Na zahteve za obstoječe datoteke je mogoče odgovoriti s prepisovanjem. Podoben trik za png, vendar najprej pogledamo, katera mapa - [png_optipng] ali [png_pngout] - zavzema manj prostora, izpolnite z njeno vsebino.

Ne bojte se poškodovati drugih datotek. Batniki delajo samo z jpg / png, v novo ustvarjene mape pa so zapisane samo slike teh vrst.

Upam, da bo nekdo koristen. Uspehi!

Dodatki

1. Pot do [OptimizeImg] ne sme vsebovati klicaj ! in odstotek %
2. Zaženi skripte kot skrbnik ni potrebno. Poleg tega v tem primeru morda ne bodo delovali!
3. ...

Založnik

ni na spletu 13 ur

x64 (alias)

Komentarji: 2846 Publikacije: 395 Registracija: 02-04-2009