1. preduvjeti
2. Koristimo preporuke za slike
3. Struktura arhive
4. Kratke upute za rad
5. Dodaci
6. x64 (zv. andi)

Stranica bez slika - anakronizam. Mnogi ljudi misle, i to nije lišeno zdravog razuma. Zapamtite, koliko dugo ste bili na mjestu posljednjeg puta i koliko dugo ste na njemu?

Tekstualni podaci mnogo su manji od slike. Međutim, poznato je da ljudi vole svoje oči. Stoga će slike biti nesumnjiva prednost priče.

Općenito govoreći, kada govorimo o tekstu, mislimo na njegov sadržaj i prikladan vizualni prikaz, uključujući paragrafe, popise, citate, tablice. Međutim, to nije dovoljno, pa čak i stranice s vijestima pokušavaju pružiti slike novinara.

Počnimo od pretpostavke da su slike potrebne. To mogu biti fotografije, dijagrami, jednostavno objašnjavanje slika.

Davno, kad Putin nije izgledao vječno, napravio sam svoj prvi medicinski web portal. Bilo je potrebno staviti slike u atlas. Očigledno je da je teško zamisliti anatomsku strukturu tijela bez slika, tim više da se opiše riječima. I bez daljnjih poteškoća, prenio sam slike na bmp (nekomprimirani format). Moram li reći da su mjerili tijesto? Štoviše, neki preglednici nisu znali pokazati takve slike.

Zašto onda optimizirati slike? Jednostavan primjer je fotografija. Moderni telefoni imaju kamere od 8, 12 i više megapiksela. 12 MP odgovara slici od 4000 × 3000 piksela. Ovisno o složenosti scene, to odgovara veličini od 2-5 megabajta, pa čak i više. Desetak fotografija - a veličina stranice se uvećava. Slika se uklapa u područje sadržaja, što znači da preglednik mora najprije sve preuzeti, razmjeriti i tek onda prikazati. Za slabe procesora ili s malom količinom RAM-a - katastrofom.

Sada zamislite da korisnik gleda web-lokaciju s telefona. U tom slučaju učitavanje stranice jednostavno ne može čekati. Dakle, slike moraju biti unaprijed smanjene.

Netko će tvrditi da nema smisla u tome, moderni CMS automatski pravi sličice prilikom preuzimanja slika. No, je li svatko ima svoje web stranice na VPS ili VIP-stope? Preuzimanje jedne 12 MP slike može izaći, ali za obradu, PHP će morati dodijeliti 35+ megabajta (u teoriji, zapravo više) za pohranu, a zatim još uvijek zna koliko će napraviti manju kopiju. Jeftini tarife odmah uronite u višak resursa. Dobar domaćin će od korisnika tražiti da to više ne čini, loše će ga ignorirati, jer mu je važan samo novac, a ne usluge.

I tako smo odlučili djelovati ispravno. Prethodno smanjili smo slike, a zatim ih prenijeli na web-lokaciju. Tako je motor lakši i ljudima. To je sve Ne baš.

Mnogi urednici zadržavaju izvorne dijelove (meta-informacije, ne-slikovne dijelove datoteke) koji sadrže dodatne informacije. Primjerice, ako fotografirate nešto na telefonu, prebacite datoteku na računalo, kliknite na nju desnom tipkom i odaberite "Svojstva → Detalji", vidjet ćete podatke na uređaju: koju ste kameru snimili, brzinu zatvarača, ISO i tako dalje. Za korisnika je ova informacija beskorisna, tako da je se možete riješiti.

Razmisli o tome, jedan komad. Što je to, gomila informacija koja je sadržana? Zamislite. Ponekad dobivate slike u kojima je na stotine kilobajta takvih podataka. Upravo danas, poslali su logo veličine 584 KB za smještaj. Istodobno, korisne informacije bile su samo 14 KB! Što se mene tiče, nije posve točno prisiliti posjetitelja da preuzme 570 KB odozgo.

Sažetak suma. Da bi korisnici web-lokacije bili uspješni, morate:

1. Smanjite veličinu slike. Da biste pomogli bilo kojem grafičkom uređivaču.
2. Izbacivanje dijelova datoteke nije potrebno. Zapravo, korisniku je potrebna samo slika.
3. Pokušajte dodatno smanjiti veličinu slike.

Prvi stavak uključuje individualni rad na svakom dosjeu. To je dugotrajno, ali donosi najbolji rezultat. Otvorimo svaku datoteku, izrežemo, smanjimo, a zatim spremimo prihvatljivu kvalitetu.

Međutim, stavci 2. i 3. mogu se dati na milost i nemilost posebnim programima. Postavljen softver za rad s slikama. Google preporučuje sljedeće programe:

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

Malo o tome 3. Grafički urednici obično se ne muče s tim. Oni jednostavno spremaju sliku, birajući ranije postavljene algoritme kompresije s istim postavkama, koeficijentima kvantizacije i drugim stvarima. Osim toga, mnogi iskreno prenose dostupne meta-informacije i dodaju svoje, dodatno povećavajući veličinu datoteke.

preduvjeti

Prije godinu dana, počeli su masovno govoriti o usluzi. PageSpeed ​​Uvidi iz Googlea. Zapravo, to su preporuke potrage za gigantom o tome kako “činiti dobro”. Samo utipkajte adresu web-mjesta i dobit ćete popis prijedloga za optimizaciju. Tamo također možete preuzeti već optimizirane resurse, uključujući slike, za vašu web-lokaciju. Istina, ovo je relevantno samo za označenu stranicu.

Ako imate web-lokaciju, svakako pogledajte ovog članka , Osobito korisno za one koji koriste WordPress.

Koristimo preporuke za slike

Čini se jednostavnim: preuzmite programe koje je odredio Google i pokrenite sve datoteke na poslužitelju. Problem je u tome što su ti programi konzole. Uzimaju samo jednu datoteku odjednom. Ali mi nismo uzalud posljednji članak uzeo vremena za skupne datoteke, zar ne?

Informacije iz članka sasvim su dovoljne za masovno kreiranje vlastitog rukovatelja datoteka, tako da neću slikati gdje je to. Ja samo predlažem da preuzmete spremnu skupštinu, koju sam koristim.

Preuzmi arhivu (212 KB)

Struktura arhive

Arhiva sadrži mapu [ OptimizeImg ]. Da biste započeli, raspakirajte ga negdje. Nalazim se u c: emp, ali to nije važno. Glavno je da staza ne sadrži uskličnike.

Dalje. Ova mapa sadrži poddirektorij [ uploads ]. Ovdje trebate staviti datoteke koje zahtijevaju obradu. Najbolji dio je da možete gurnuti barem strukturu mape / datoteke.

Postoji još 3 programa: jpegtran.exe | optipng.exe | pngout.exe je vrlo uslužni program koji preporučuje Google. Preuzeto s odgovarajućih službenih web-lokacija / spremišta. Ako niste sigurni, ili samo želite nadograditi, preuzmite s pouzdanog izvora i zamijenite postojeće.

I na kraju, srce tulze. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti za out.bat
• 3-out za opti.bat

Prva datoteka, 1.bat, ponovno stvara strukturu iz [učitavanja]. Stvaraju se 3 dodatne mape: [jpg_jpegtran] [png_optipng] [png_pngout] s obrađenim minimiziranim datotekama njihovog tipa (jpg - samo * .jpg-datoteke, isto s png).

3.bat sekvencijalno pokreće tri batch datoteke za izvršenje:

• 3-go.bat je gotovo isti kao i 1.bat. Preskočite jpg / png datoteke putem minimizers. Rezultat rada bit će 3 mape (vidi gore) s odgovarajućim slikama.
• 3-opti-to-out.bat stvara mapu [png_optipng-to-pngout] u koju se upisuju datoteke obrađene optipng + pngout (upravo u tom nizu).
• 3-out-to-opti.bat stvara mapu [png_pngout-to-optipng] u koju su napisane datoteke obrađene u pngout + optipng. Slično prethodnom, samo u drugom nizu.

U principu, samo 1.bat je dovoljan za naše potrebe. 3x vrećice pojavile su se kao rezultat istraživanja i pogrešaka u prethodnoj inačici skupne datoteke. Tako se dogodilo da su tijekom pogreške datoteke za pngout preuzete iz direktorija optipng. I što je moje iznenađenje kada je lansiranje stare verzije dalo 1,5 puta manju veličinu nego u ažuriranoj batch datoteci. Kao rezultat, pokazalo se da dvostruka obrada može dobro uhvatiti slike. Ali to traje gotovo 2 puta više vremena. Zato odlučite sami ako je to potrebno.

Kratke upute za rad

1. Preuzimanje arhive ,
2. Otpakirajte ga.
3. Idite u novootvorenu mapu [OptimizeImg].
4. Sve datoteke koje zahtijevaju peckanje, kopirajte mapu [upload].
5. Pokrenite 1.bat i pričekajte. Ako postoji mnogo datoteka i one su png, pričekajte dugo.
6. Kada se u crnom prozoru pojavi poruka o potrebi pritiska tipke za nastavak, sve je spremno. Ostaje da se sadržaj kreiranih mapa i kopirati na hosting putem FTP-a, prepisujući stare datoteke.

Za primjer. Dopustite da imate blog na WordPressu. Sve slike su pohranjene u [ / wp-content / uploads / ]. Idite na mapu web-mjesta (putem ftp-a), idite na [ wp-content ] i jednostavno kopirajte [ uploads ] u mapu OptimizeImg istog imena. Pokrenite 1.bat i pričekajte. Nakon završetka rada, sadržaj [jpg_jpegtran] (idemo tamo!) Se učitava na poslužitelj. Na zahtjeve za postojećim datotekama odgovara se prepisivanjem. Sličan trik za png, ali najprije pogledamo u koju mapu - [png_optipng] ili [png_pngout] - zauzima manje prostora, ispunite ga svojim sadržajem.

Nemojte se bojati oštetiti druge datoteke. Batniki rade samo s jpg / png-om, a samo se slike tih tipova pišu u novostvorene mape.

Nadam se da će netko biti koristan. Sretno!

Dodaci

1. Put do [OptimizeImg] ne smije sadržavati uskličnike ! i postotak %
2. Nije potrebno pokretati skripte kao administrator. Štoviše, u ovom slučaju, oni svibanj neće raditi!
3. ...

autori

nije online 13 sati

x64 (zv. andi)

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