Png:n ja jpg:n, jpeg:n optimointi ja pakkaus ilman laadun heikkenemistä. Kuvan optimointi tärkeänä osana CRO-prosessia

Kuvan optimointi on tärkeä osa verkkosivuston mainostamista. Oikein optimoidut kuvat parantavat resurssin sijoitusta hakutuloksissa ja nopeuttavat sisällön latausnopeutta. Mitä kuvan optimointi on ja miten se tehdään?

Kuvan optimointi tarkoittaa verkkosivujen suunnittelussa ja artikkeleissa käytettävien kuvien koon pienentämistä laadun heikkenemättä.

Ennen kuin aloitamme kuvien "pakkausprosessin", arvioimme verkkosivujen latausnopeuden ja ymmärrämme, mitkä indikaattorit estävät meitä parantamasta tuloksia. PageSpeed ​​​​Insights -palvelu auttaa tässä. Jos sivu saa enemmän kuin 85 pistettä 100:sta, tämä on hyvä tulos ja juuri tällaiseen hahmoon sinun on pyrittävä.

Esimerkiksi nyt tulos on:

Ja optimoinnin jälkeen:

Tämä tulos oli mahdollista Googlen suositusten käytön ansiosta:

PNG-muodossa

Kuinka optimoida kuvat, jos niiden tallentamiseen käytetään PNG-muotoa? Voit tehdä tämän käyttämällä Googlen suosituksia:

Jos suunnittelet vain peruskuvan optimointia, voit käyttää mitä tahansa kuvankäsittelyohjelmaa: GIMP, Photoshop jne. Mutta kumpi on parempi? Pieni kokeilu auttaa sinua selvittämään. Otamme sisään optimoimattoman kuvan PNG-muodossa paino 293 KB:

Luo kaksi kansiota: "GIMP" ja "Photoshop" ja aseta niihin sama kuva.

Kuinka kuva pakataan ilman laadun heikkenemistä GIMP- ja Photoshop-editorien avulla?

Tulos on tällainen:

Bottom line: Photoshop suoritti paremman kuvanoptimoinnin kuin GIMP.

Mutta tämä ei tarkoita, että voit käyttää vain näitä vaihtoehtoja. On muita, yhtä tehokkaita apuohjelmia kuvien pakkaamiseen PNG-muotoon. Esimerkiksi ja PNGOUT. Heidän työnsä tulos on seuraava:

Huolimatta siitä, että OptiPNG menetti 1 kt Photoshopille, itse ohjelma painaa vain 96 kt, mikä on iso plussa. Mutta PNGOUT ylitti "kilpailijansa" kaikilta osin:

Työskentely ohjelmien kanssa

Ensinnäkin sinun on ladattava OptiPNG- tai PNGOUT-apuohjelma (tai ehkä molemmat) virallisista sivustoista. Kopioi sitten .exe-tiedostot kansioon: C: \ Windows.

Tehtävän "yksinkertaistamiseksi" kopioi nämä tiedostot Windows-kansiosta ja aseta niiden pikakuvakkeet työpöydälle. Mukavuuden vuoksi OptiPNG-pikakuvake voidaan heti nimetä opting-o7 (parametri suurin puristus jossa laatu säilyy). Jäljelle jää vain siirtää tarvittavat kuvat pikakuvakkeeseen ja odottaa, kun ohjelma optimoi ne.

Tämä menetelmä on yksinkertainen, mutta ei kovin kätevä. Joskus yritettäessä optimoida suurta määrää kuvia, virhe saattaa "ponnahtaa esiin". Kaikki eivät myöskään nauti tiedostojen vetämällä ja pudottamalla koko ajan.

Siksi on toinenkin vaihtoehto työskennellä apuohjelmien kanssa. Luomme testiasiakirjan, avaamme ja kirjoitamme siihen koodin (se toimii oikein vain Windows-käyttöjärjestelmässä):

Tallennamme tiedoston .reg-muodossa ja ANSI-koodauksella, suoritamme sen, hyväksymme kaikki toimet ja olet valmis. Apuohjelmat on integroitu Windowsin kuoreen.

Miten kuvat optimoidaan? Prosessi on seuraava: napsauta hiiren kakkospainikkeella kansiota, joka sisältää ei-optimoimattomat PNG-kuvat (apuohjelma ei vaihda toisen laajennuksen tiedostoja) ja valitse ohjelma, jolla pakkaamme kuvat. Voit tehdä tämän kahdella apuohjelmalla vuorollaan.

Sitten avautuu komentorivi, joka esittelee optimointiprosessin:

JPEG-muodossa

JPEG-kuvan pakkaamiseen tarvitset Jpegtran- tai Jpegoptim-työkalut. Tietysti voi käyttää GIMP-editorit ja Photoshop. Jpegtran tai Jpegoptim selviytyvät kuitenkin optimointitehtävästä tehokkaammin, joten lataa ja asenna molemmat ohjelmat.

Jpegtran-apuohjelman määrittäminen

Jpegtranin ottaminen käyttöön Windows Shell Embeddingin kanssa ei ole hyvä vaihtoehto apuohjelmalle. Se ei toimi oikein, koska koodi (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) on ​​suunniteltu pakkaamaan vain yhden kuvan paino, ei kaikkia kansion tiedostoja.

Tämä tarkoittaa, että sinun on käytettävä erilaista tapaa aktivoida apuohjelma. Jpegtranin ei tarvitse sijaita C: \ Windows -kansiossa, mutta voit tallentaa kopion tästä. Sijoita jpegtran.exe-ohjelma mihin tahansa kansioon ja nimeä (mukavuuden vuoksi) uudelleen Jpegtraniksi.

Luo sitten Notepad ++ -sovelluksella tiedosto UTF-8-koodauksella (ei tuoteluetteloa) .bat-tunnisteella ja nimellä! Aloita. Laitamme tähän koodin:

Kuvien optimoimiseksi sinun on asetettava sekä jpegtran.exe- että!Start.bat-tiedostot samaan kansioon ja aloitettava pakkausprosessi Start.bat-tiedostolla:

Jpegoptim-ohjelman määrittäminen

Jpegoptim-apuohjelma integroituu saumattomasti Windowsin kuoreen. Aktivoidaksesi sen, sinun on lisättävä koodi PMGoptim.reg-tiedoston loppuun (se luotiin jo aiemmin PNG-kuvien apuohjelmia varten):

Kuvien optimointi tällä ohjelmalla on yksinkertainen: napsauta hiiren vasemmalla painikkeella kuvien sisältävää kansiota ja valitse "Suorita jpegoptim".

Jpegtranin ja Jpegoptimin tulos:

Online-palvelut

Internetissä on monia palveluita, joiden avulla voit optimoida kuviasi tehokkaasti. Joskus heidän työnsä tulos on parempi kuin edellä käsitellyt apuohjelmat.

Verkkopalvelut kuitenkin heikentävät kuvanlaatua pakatessaan kuvaa. Joskus vain muutaman pikselin, mutta vääristymä on silti havaittavissa. Eli kuvien koko saattaa sopia meille, mutta laatu jättää paljon toivomisen varaa.

Mitä moduulimme tekee Päätehtävänä on optimoida kuvia mahdollisimman paljon, mutta käytännössä laatu ei heikkene. Mihin se on tarkoitettu? Syitä on useita: Vapaa tila isännöinnissä, koska pääsääntöisesti kuvat "syövät" suurimman osan siitä. PageSpeed ​​​​Insightsin vaatimusten noudattaminen - vaatimukset sivuston optimoimiseksi sen maksimaaliselle sijoitukselle hakukoneessa. päivittää mobiili-ensimmäisen indeksin. Osana näitä päivityksiä sivuston latausnopeudesta ja liikkuvuudesta tulee vakava sijoitustekijä. Voit tarkistaa, onko sivustollasi kuvakokoongelmia täältä ja täältä. OptiImg-moduulimme avulla voit pienentää sivustosi kuvien kokoa jopa 99:llä % ilman näkyvää laadun heikkenemistä. Automaattinen pakkaus. kuvat säästävät sinut pitkältä ja ikävältä uudelleentallennukselta kolmannen osapuolen sovelluksissa. Ei kiintiöitä ja rajoituksia, osta lisenssi ja muunna niin monta tiedostoa kuin tarvitset ilman saldon lataamista ja kaikenlaisia ​​lisämaksuja!Hyvät asiakkaat, huomioikaa tämä lisenssiavain mahdollistaa palvelumme käytön rajoituksetta, lisenssiavaimen umpeutuessa pääsy palveluun on mahdollista, mutta et voi vastaanottaa päivityksiä moduuliimme. Huomaa myös, että ostettaessa laajennusta, sinun ei tarvitse muuttaa CLBCH:ta moduulin asetuksissa, vaan moduuli toimii "aseta ja unohda" -periaatteella. Kaikki tietolohkoon ladatut kuvat pakataan automaattisesti! Kaikki kuvat optimoidaan yhdellä napsautuksella, kaikki tietolohkoihin, mediakirjastoon tai 1C:n kanssa vaihdettaessa ladatut kuvat pakataan automaattisesti. Tämä hetki JPEG ja PNG ovat tuettuja. HTTPS - protokolla on tuettu. PHP7 - tuettu Demojakson avulla voit käsitellä 1000 kuvaa. Joka päivä 1C - Bitrix -moduulillamme käsitellään jopa 500 tuhatta kuvaa! Voit tarkistaa pakkaustason moduulin verkkosivuilla. että moduuli on lähes kokonaan kirjoitettu D7:llä, 1C - Bitrix alle 16 -versioissa - se saattaa toimia väärin. Kuinka aloittaa käyttö? Elämäsi yksinkertaistamiseksi tiimimme on aina valmis asentamaan moduulin sivustollesi, jossa on 1C - Bitrix ja tekemään optimoinnin itse, tätä varten lähetä pyyntö sähköpostiimme - oston jälkeen - [sähköposti suojattu] otsikolla "Asennus", ilmoita kirjeen tekstiosassa kuponkikoodi ja pääsy sivustolle, jolla haluat työskennellä. Hyvät asiakkaat! Älä unohda jakaa kokemuksiasi tuotteidemme käytöstä, jättää palautetta, kirjoittaa osoitteeseen keskusteluun ja sähköpostiosoitteeseemme - [sähköposti suojattu], olemme aina iloisia voidessamme auttaa sinua ja saada palautetta!

AlphaGroupista

Osta: 2 000 1 800 ruplaa.

Kuvakaappaukset

Kuvaus

Tekniset yksityiskohdat

Kuvaus

Mitä moduulimme tekee?

Päätehtävänä on optimoida kuvia mahdollisimman paljon, mutta käytännössä ei menetä laatua.

Mitä varten se on?

Syitä on useita:

1. Säästät vapaata tilaa isännöinnissä, koska yleensä kuvat "syövät" suurimman osan siitä.
2. Vaatimusten noudattaminen PageSpeed ​​​​Insights - vaatimukset sivuston optimoinnille ja sen maksimaaliselle sijoitukselle hakukoneessa.
3. Lisää sivujen latausnopeutta vähentämällä ladattua liikennettä

Meidän moduuli OptimiImg voit pienentää sivuston kuvien kokoa jopa 99 % ilman näkyvää laadun heikkenemistä.

Automaattinen kuvanpakkaus säästää sinut pitkältä ja ikävältä uudelleen säästämiseltä kolmannen osapuolen sovelluksissa.

Ei kiintiöitä tai rajoituksia, osta lisenssi ja muunna niin monta tiedostoa kuin tarvitset ilman lisäyksiä ja lisämaksuja!

Hyvät asiakkaat, kiinnitämme huomionne siihen, että lisenssiavaimella voit käyttää palveluamme rajoituksetta, lisenssiavaimen umpeutumisen jälkeen pääsy palveluun on mahdollista, mutta et voi vastaanottaa päivityksiä moduuli.

Huomaa myös, että laajennusta ostettaessa moduulin asetuksissa olevaa CLBCH:ta ei tarvitse muuttaa.

Moduuli toimii "aseta ja unohda" -periaatteella. Kaikki tietolohkoon ladatut kuvat pakataan automaattisesti!

Kaikki kuvat optimoidaan yhdellä napsautuksella, kaikki tietolohkoihin, mediakirjastoon tai 1C:n kanssa vaihdetut kuvat pakataan automaattisesti.

Tällä hetkellä tuetaan JPEG- ja PNG-muotoja.

HTTPS - protokolla tuettu.

PHP7 - Tuettu.

Demo - jakso mahdollistaa 1000 kuvan käsittelyn.

Joka päivä meidän avullamme moduuli 1C - Bitrixille, käsitelty jopa 500 tuhatta kuvia!

Voit tarkistaa pakkaustason moduulin verkkosivuilta.

Huomaa, että moduuli on melkein kokonaan valmis kirjoitettu D7:ssä, 1C - Bitrix alle 16 -versioissa - ei ehkä toimi oikein.

Kuinka aloittaa käyttö?

Elämäsi yksinkertaistamiseksi tiimimme on aina valmis asentamaan moduulin sivustollesi, jossa on 1C - Bitrix, ja suorittamaan optimoinnin itse, tätä varten lähetä pyyntö sähköpostiimme - oston jälkeen - [sähköposti suojattu] jonka aihe on "Asennus", ilmoita kirjeen tekstiosassa kuponkikoodi ja pääsy sivustolle, jolla haluat työskennellä.

Hyvät asiakkaat!

Älä unohda jakaa kokemuksiasi tuotteidemme käytöstä, jättää palautetta, kirjoittaa keskusteluihin ja sähköpostiosoitteeseemme - [sähköposti suojattu], autamme aina mielellämme ja saamme palautetta!

Arvostelut (10)

Kokonaispistemäärä: Arvosteluja yhteensä: 10

Hyvä ratkaisu kuvien optimointiin

Helmikuun 25. päivänä 2019 ratkaisu oli täysin toimimaton, jopa heidän verkkosivuillaan http://www.optiimg.ru/ et voi pakata kuvaa suoraan, se jäätyy latauksen jälkeen.

Pahoittelemme, ratkaisu toimii, mutta se ei toimi isännöinnissämme, ongelma ei ollut ratkaisussa, mutta kuten tekninen tukihenkilö selvensi, "ongelma piilee isännöintikeskusten verkkoviestinnän tasolla." Itse tekninen tuki osoittautui erittäin aktiiviseksi ongelmamme ratkaisemisessa ja neuvotteli henkilökohtaisesti sivustomme isännöinnin kanssa.

Moduuli on hieno!!!

Kuten he kirjoittivat alla, liityn mukaan, mutta tämä on ainoa päätös, jota en ole katunut! Moduuli toimii älykkäästi, ei jääty. Siivosin sivuston 3 Gt. Se oli 5 Gt, siitä tuli 2 Gt.
Super moduuli, hyvin tehty!) Suosittelen)

Erinomainen tekninen tuki ja siisti moduuli

Teknisen tuen välitön apu yllätti, sunnuntai-iltana he vastasivat heti.
Moduuli on erittäin siisti, olen etsinyt samanlaista ratkaisua pitkään. Suositella!

Hei

Tekninen tuki toimii välittömästi, 10 sekunnin kuluttua he vastasivat jo online-chat ja vastasi kysymyksiin! Sytytysohjelma, varsinkin kun kuvia on paljon! Suosittelen kaikille!

Erinomainen tekninen tuki

Moduulin toiminnassa oli ongelmia, otin heihin yhteyttä. Ratkaisimme ongelman erittäin nopeasti, kiitos.

Hyvä päätös

Täydellinen ratkaisu! Kaverit asensivat kaiken itse ja pakkaavat kuvat 40%. Kiitos!

Toistaiseksi ainoa ostopäätös, jota emme ole katuneet

Toistaiseksi ainoa ostopäätös, jota emme ole katuneet. Tyhjennetty 5 GB.

Erittäin hyödyllinen moduuli ja erinomainen tekninen tuki!

Moduulin ansiosta oli mahdollista kaksinkertaistaa sivuston nopeus, mikä on erittäin tärkeää verkkokaupalle, jossa on paljon kuvia. Tekninen tuki auttoi ratkaisemaan nopeasti ilmenneet ongelmat, selitti kärsivällisesti kaikki yksityiskohdat.

Upea moduuli, loistava tuki.

Ostimme moduulin, tuki kytkettiin välittömästi ja asensimme kaiken. Valokuvien optimoinnin ansiosta Google PageSpeed ​​antaa sivustolle yli 80 pistettä useimmilla sivuilla. Suosittelen tätä ratkaisua kaikille.

Hieno moduuli

Testasin sivustoa googlella, siellä oli isoja kuvia. Mietin kuinka optimoidaan. Yksinkertainen ja halpa ratkaisu löytyi. Noiden tukien tyypit asensivat itse, määräsivät kaiken, nyt kuvia ladattaessa se toimii automaattisesti ja pakkaa kaiken optimaaliset koot... Laitoin sen heti toiselle sivustolle, olen erittäin tyytyväinen. Suositella.

Palaute (76)

Palaute (76)

Ostin, maksoin, optimoin kuvat. Kaikki on siistiä, paitsi yksi häiriö, jota tämä moduuli kutsuu. Nimittäin kun yritän muokata tuotetta sivuston ulkopuolelta, tulee kohtalokas virhe

Yksityiskohtainen kuva:
Pääsy ilmoittamattomaan staattiseen omaisuuteen: Alfa1c \ Optiimg \ OptiImg :: $ _ 1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
# 0: OptiImgEvents :: CompressOnResize (taulukko, array, NULL, merkkijono, merkkijono, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
# 1: ExecuteModuleEventEx (taulukko, array)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
# 2: CAllFile :: ResizeImageGet (taulukko, taulukko, kokonaisluku, boolen arvo)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
# 3: Bitrix \ Main \ UI \ FileInputUnclouder :: getSrcWithResize (joukko, taulukko)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
# 4: Bitrix \ Main \ UI \ FileInput-> getFile (merkkijono, merkkijono, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
# 5: Bitrix \ Main \ UI \ FileInput-> show (taulukko, looginen)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
# 6: sisällytä (merkkijono)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

Se ei aina tule ulos, mutta niin usein. Samanaikaisesti joskus samassa tuotteessa on vika aluksi, mutta ei toisella tai kolmannella kerralla.

Sergey Zabotin, päätellen siitä, että toiminnon nimi on hämärtynyt - jatkat demoversion käyttöä, poistat moduulin kokonaan ja asennat sen uudelleen, jos virhe jatkuu - kirjoita meille osoitteeseen [sähköposti suojattu] me autamme sinua.

Mitkä ovat moduulin ominaisuudet, jos kuvat tallennetaan "pilviin"? Esimerkiksi, jos se on Selectel?
Ymmärtääkseni moduuli pakkaa sekä latauksen että koon muuttamisen yhteydessä, mutta ei pakkaa jos kuvat ovat jo "pilvissä"?
Mitä suunnittelet tähän suuntaan?

Gavril Scriabin, CMS lataa tiedostot suoraan kolmannen osapuolen pilviin, pilvipuolella moduulimme ei voi toimia ilmeisistä syistä vain, jos käsittelet tiedostot ensin ja siirrät ne sitten pilveen.

Se toimii bitrix-pilven kanssa, koska Bitrix-tiedostoja pilvessä päivitetään ajoittain.

hyvää päivää
Kuinka kauan lisenssiavain on voimassa? (päivitykset)

Ivan Prilepin, Päivitykset ovat saatavilla 1 vuoden, pääsyä palvelimeen ei ole rajoitettu ajallisesti.

1.2.8 versio.

Roman Petrov, kirjoita meille sähköpostitse, niin selvitämme asian.

Ostin optimoijan vuosi sitten, käytin sitten hyvin vähän, nyt halusin käyttää sitä uudelleen, mutta sain valtuutusvirheen ?! Pitäisikö minun ostaa se uudelleen?
Miksi minun pitäisi ostaa se joka vuosi 100 valokuvaa varten?

Roman Petrov, Voit ostaa laajennuksen, jos haluat päivittää moduulin, jos moduulin versio on vanhempi kuin 1.2.2, päivitys on tehtävä, koska tässä versiossa tehtiin iso refaktorointi; siinä vaihtui palvelin, johon moduulimme käyttää. Jos nykyinen versiosi on uudempi, kirjoita meille sähköpostiosoitteeseen, [sähköposti suojattu]- Selvitetään, miksi virhe tapahtuu.

Mikä on uutta

Asennus

Asennus on vakiona Marketplacesta.

Moduuliin pääsee osion kautta

Palvelu -> Image Optimizer tai seuraa linkkiä:
/bitrix/admin/optimiimg_admin.php

Moduulin asetukset:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Huomaa, että jotta moduuli toimisi, sinun on syötettävä "Avain"-kenttään sähköpostilla oston jälkeen saatu avain.

Ratkaisu käyttää cURL-kirjastoa, yleensä se sisältyy oletusarvoisesti, jos ei, ota yhteyttä isännöitsijään tai järjestelmänvalvojaan saadaksesi apua.

Kiinnitämme huomiosi myös siihen, että työn nopeus riippuu suoraan palvelimen tiedostoalijärjestelmän ja viestintäkanavan nopeudesta.

Moduuli osaa myös pakata lennossa kuvia esimerkiksi lisättynä infoblock-elementtiin. Voit tehdä tämän valitsemalla moduulin asetuksista vastakkaiset ruudut ja Pakkaa kuvat kokoa muuttaessa.

Tuki

Kuinka käyttää moduuliamme oikein:

1. Asenna moduuli kauppapaikalta.
2. Siirry osoitteeseen /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
3. Aseta pakkauslaatu, valitse valintaruudut Pakkaa kuvat latauksen yhteydessä ja Pakkaa kuvat, kun muutat kokoa, jos sivustosi on käynnissä https-protokolla kirjoita sitten porttikenttään 443 tai jätä se tyhjäksi.
4. Siirry tiedostonhallintaan ja poista / upload / resize_cache / kansio
5. Siirry moduulin /bitrix/admin/optiimg_admin.php käyttöliittymään
6. Paina nappia Optimoida

Joka vuosi hakukoneet kiristävät ulkoisen optimoinnin ruuveja yhä enemmän. Ja siihen kiinnitetään yhä enemmän huomiota sisäiset tekijät sivusto. Esimerkiksi sivustosi latausnopeus vaikuttaa myös asemasi kasvuun SERP:ssä.

Tietenkin on monia tapoja nopeuttaa sivustoasi, mutta tänään puhumme vain yhdestä niistä - tämä on sivuston kuvan optimointi. Ei, nämä eivät ole pahamaineisia sisällönkuvauskenttiä - ALT ja TITLE, puhumme teknisistä ongelmista.

Kerran en edes ajatellut sitä, että voit jotenkin optimoida kuvia. Ja miksi? Loppujen lopuksi laajakaista, rajoittamaton, kuvat sivustoilta ladataan välittömästi. Mikä pienentää kuvan kokoa 20 kilotavulla? Unohda koko juttu!

Mutta trendi mobiililiikenne sai minut miettimään optimointia. Jos katsot kaaviota mobiililiikenteen kasvusta, niin tilastojen mukaan vuonna 2014 joka 3. henkilö kirjautui Internetiin mobiililaitteista. Tämä tarkoittaa, että yhä useammat ihmiset vierailevat sivustoilla ja blogeissa gadgetien kautta.

Ja kuten tiedät, langattoman Internetin nopeus on satu. Ja jos sivustollasi on raskaita kuvia, käyttäjä ei välttämättä odota ollenkaan sivustosi latautumista. Siksi nyt sivuston kuvien optimoinnin aihe on erittäin tärkeä.

Ennen jokaista julkaisuani optimoin, ja uskokaa minua, kaikkien kuvien kokonaispaino pienenee 60 prosenttiin niiden laatua heikentämättä. Joten katsotaanpa käyttämiäni työkaluja.

Työkaluja sivuston kuvien optimointiin.

Yleisin ja monille helpoin on Photoshop. Todennäköisimmin, jos olet bloggaaja, verkkovastaava tai henkilö, joka liittyy läheisesti artikkelien julkaisemiseen sivustoillasi, sinulla on todennäköisesti tämä ohjelmisto asennettuna.

Kuvan optimoimiseksi Photoshopissa sinun on suoritettava useita yksinkertaisia ​​​​käsittelyjä. Siirry kohtaan Tiedosto -> Tallenna verkkoon.

Sitten näemme ikkunan, jossa on kaksi vaihtoehtoa kuville.

Yläosa on alkuperäinen kuva, alaosa on se, mitä saamme käsittelyn jälkeen.

Nyt näytän sinulle tempun. Katso kuvat ja niissä olevat nuolet.

Ensimmäinen kuva tallentaa 100 % laadulla. Sen paino on pudonnut 85 %.

Toinen kuva säästää 70 % laadulla. Sen painoa on vähennetty 95%, kun taas kuvat näyttävät identtisiltä.

Kuvittele nyt, kuinka paljon aikaa käyttäjä joutuisi käyttämään 2 megatavun kuvan lataamiseen mobiililaitteeseen. Ja jos artikkelissa on 5-10 tällaista kuvaa? Tästä syystä on tärkeää optimoida kuvat verkkosivustollesi.

Mutta Photoshop ei ole ihanteellinen massakuvan optimointiin. Siirrytään siis erikoistuneempiin ohjelmistoihin.

PictureBeaver on Windows-käyttäjän ystävä.

Olen jo vaihtanut macOS:ään kauan sitten ja käytän Windowsia harvinaisia ​​tapauksia... Tämä on pääasiassa tarkoitettu semanttisen ytimen keräämiseen KeyCollectorin avulla. Siksi minun piti tehdä vähän töitä löytääkseni todella kannattava ohjelma kuvien optimoimiseksi. Ja jotta se toimisi Windowsissa.

Kuten kävi ilmi, on olemassa upea PictureBeaver-ohjelma, joka ei ole oikeita resursseja ja toimii yllättävän nopeasti.

Ohjelman kanssa työskentely on erittäin helppoa. Avaa kansio, jossa on ladattu komentosarja, ja vedä kaikki optimoitavat kuvat Optime.wsf-tiedostoon

Kuvankäsittelyn jälkeen näkyviin tulee kansio, jossa on optimoidut kuvat ja raporttitiedosto jokaisesta niistä.

ImageOptim on omenanviljelijöiden ystävä.

Tämän ohjelmiston avulla MacOS-ongelmia ei. Tämä johtuu ensisijaisesti siitä, että suunnittelijat rakastivat ja rakastivat eniten omenatekniikkaa. Ja he todella rakastavat kuvilla leikkiä. Joten löydä tarvittavat ohjelmistot ei tule olemaan sinulle vaikeaa.

Lopetin valintani ilmainen apuohjelma ImageOptim, sillä se selviää päätehtävästä räjähdysmäisesti. Ja tämä on massakuvan optimointi sivustolle.

Se toimii eri tavalla kuin PictureBeaver. Se ei luo uusia kansioita valmiilla kuvilla. Se yksinkertaisesti korvaa alkuperäiset optimoiduilla kuvilla.

Se näyttää tältä:

Ikkuna, johon haluat vetää kuvan.

Ikkuna optimoinnin jälkeen.

Kuten näette, ohjelma pystyi vähentämään kokonaispainoa 24,8%.

Ensimmäinen kuva on jo optimoitu Photoshopissa. Toinen ei ole.

P.S. Mobiili-internet kasvaa, joten harkitse käyttäjiesi mukavuutta.

Tällä vuosisadalla mobiiliteknologiat kuvien optimointi PNG- ja JPG-muodoissa, JPEG on tullut jälleen ajankohtainen, kuten se oli niinä päivinä, kun Internet oli juuri saapumassa elämäämme ja oli kaikkialla hidas ja puhelinverkkoyhteys. Mobiili-internet ei tietenkään ole täysin oikein verrattavissa puhelinverkkoon, mutta paikoissa, joissa yhteys on huono, pääsynopeus on melko alhainen. Jopa noina aikoina käyttäjällä ei ollut minne mennä, ja hänen oli odotettava sivun latautumista. Nyt Internet on kasvanut, sivustojen valikoima on suuri. Käyttäjä muuttui mielialaiseksi ja kärsimättömäksi, ja keskimääräinen odotusaika sivun lataamiseen lyheni dramaattisesti. Käyttäjän on helpompi löytää toinen nopeampi sivusto.
Ja hakujättiläiset, kuten Google tai Yandex, ovat alkaneet kiinnittää huomiota siihen, kuinka nopeasti sivustot latautuvat, ja suosivat niitä, jotka ovat nopeampia tuloksissa. Ei vähäisimpänä roolia tässä sivun painolla, joka puolestaan ​​​​riippuu voimakkaasti siinä olevien kuvien painosta. On melko selvää, että sillä on kompakti pakatut kuvat hyödyllistä kaikille. Siksi tässä haluan puhua PNG- ja JPG-, JPEG-tiedostojen valmistelemisesta isännöintiin lataamista varten.

Peruskuvan optimointi

Tämä tarkoittaa tarpeettomien marginaalien rajaamista, värisyvyyden vähentämistä, kommenttien poistamista ja kuvan tallentamista sopivaan muotoon. Voit tehdä tämän käyttämällä Adobe photoshop, tai jos sinulla ei ole sellaista, MS Paint tai GIMP.
Jopa yksinkertainen kuvan rajaus vähentää sen painoa.

Kuinka pienentää kuvaa MS Paintissa

Käytän MS Paintia esimerkkinä, ja näytän kuinka pienennät kuvan haluttuun kokoon.
Otetaan esimerkiksi NGINX-logo ja sen nginx.png-kuva, jonka koko on 2000 × 417 pikseliä, jonka leveys on rajattava 1024:ään, koska tämä on sivun asettelun leveys, eikä sitä kannata enää tehdä.

Tuloksena saamme kuvan, joka on läpäissyt vähimmäisperusoptimoinnin. On aika siirtyä painon puristamiseen.

Tiedoston optimointi PNG- ja JPG-, JPEG-pakkauksille

Helpoin ja nopein tapa saada optimaalinen kuvanpakkaus ilman laadun heikkenemistä on käyttää File Optimizer -työkalua.

Virallinen verkkosivusto ja ohjelman kuvaus :

Lataa File Optimizer voit kanssa

Kuvaus ... Se on tehokas optimoija ei vain kuville, vaan myös .pdf-, .docx-, txt- ja muille teksti-, ääni- ja videotiedostoille sekä arkistoille. Täysi lista Tuetut laajennukset löytyvät osoitteesta virallinen sivu hanke.
Tässä on joitain työssä käytettyjä apuohjelmia: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngrewquant5, pngrewlfeng,... Mielestäni jopa tämä epätäydellinen luettelo on melko vaikuttava.

Tiedoston optimoijan asentaminen ja käyttäminen

Lataa ensin uusin versio ohjelmia joko asennusohjelman tai tiedostojen arkiston muodossa. Muuten, arkisto sisältää version 32- ja 64-bittisille Windows-versioille.

Käyttöliittymä on melko yksinkertainen ja intuitiivinen.
Sitä ei tarvitse määrittää, mutta voit mukauttaa joitain muotoja itsellesi käyttämällä Asetukset...-painiketta.
Käyttö ... Joko vedät vaaditut tiedostot ja jopa kansiot (hakemistot) ohjelmaikkunassa tai valitse tarvitsemasi Lisää tiedostoja -valikosta ...
Voit optimoida tiedostoja napsauttamalla Optimoi kaikki tiedostot

Optimoidut tiedostot korvaavat lähdetiedostot, myös luokkien hierarkia säilyy. Jokaisen tiedoston edessä näytetään tilastot, kuinka paljon prosentteina alkuperäisestä tiedostokoosta optimoitu versio painaa.
Työn päätyttyä tilastot käsiteltyjen tiedostojen määrästä sekä kuinka paljon olet säästänyt, näytetään alareunassa tilarivillä.

Mielestäni File Optimizer tekee työnsä erittäin hyvin.
Ainoa haittapuoli on, että jos tiedostoluettelo on suuri, voit odottaa tuloksia pitkään, mutta se on sen arvoista.

Jos olet kiinnostunut optimointimenetelmien yksityiskohdista, joita voit muokata omalla tavallasi, puhumme apuohjelmien asettamisesta ja käytöstä kuvien pakkaamiseen.

Häviötön PNG-pakkaus

Harkitse 3 ohjelmaa PNG-optimointi:

• Adobe photoshop
• OptiPNG
• PNGOUT

Verrataanpa niitä kuvan pakkauslaadun suhteen. Pakkaamme nginx.png:n edellisestä osiosta. Alkuperäinen paino 27,5Kb.

Pakkaa PNG Adobe Photoshopilla

Ensimmäinen listalla on tunnettu Photoshop. Monitoiminen harvesteri suunnittelijalle, joka osaa tehdä melkein kaiken, myös kuvien pakkaamisen.
Avaa Photoshopissa Tiedosto-Tallenna verkkoon tai käytä yhdistelmää Alt + Vaihto + Ctrl + S

Tuloksena saamme 22,7 KB, ts. puristettu 17,5 %

Valitettavasti useimmat grafiikkaohjelmat eivät pysty vapauttamaan PNG:n pakkaamiseen käytettyjen algoritmien koko potentiaalia. pääsyy siinä tosiasiassa, että optimaalisen pakkausstrategian määrittämiseksi he käyttävät heuristisia algoritmeja, jotka sallivat ilman pakkausta arvioida tiettyjen parametrien tehokkuutta, mikä sen seurauksena antaa suuri prosenttiosuus virheitä. Siksi PNG-pakkaukseen käytämme erityisesti tätä varten luotuja apuohjelmia, nimittäin OptiPNG ja PNGOUT.

OptiPNG:n käyttäminen PNG:n pakkaamiseen

OptiPNG:n asentaminen ja käyttö

Downloaded.exe, latasi sen C: \ Windowsiin, otti vaaditun PNG-tiedoston, laitoi sen johonkin kansioon. Nyt käyttämällä FAR Manageria tai muuta tiedostonhallintaa konsolituella, menimme tähän kansioon ja kirjoitimme komennon konsoliin

Optio -o7 nginx.png

Komento pakottaa sinut pakkaamaan kansion PNG-tiedoston. Myöhemmin harkitsemme yksinkertaista vaihtoehtoa, kuinka yhden napsautuksen pakkaus tehdään.
Mutta ensin katsotaan tulosta.

18,8 KB, ts. 31,6 %, lähes kolmannes. Ei aivan huono, eikö? Photoshop teki paljon huonommin.

PNGOUT:n käyttäminen PNG:n pakkaamiseen

Kuinka asentaa ja käyttää PNGOUT

Kaikki on täsmälleen sama kuin OptiPNG:ssä. Lataa PNGOUT.exe, pudota se C: \ Windowsiin, avaa se Tiedostonhallinta, esimerkiksi, Kaukainen manageri kansio PNG:llä ja sisään komentorivi kirjoittaa

Pngout nginx.png

Tulos alla

Tuloksena on 23,4 KB, ts. onnistui puristamaan 15%. Oikein hyvä.

Yleisesti ottaen sanon heti, että minulla oli erilaisia ​​tuloksia eri tiedostoilla, jossain PNGOUT toimi tehokkaammin, jossain OptiPNG, joten suosittelen ajamaan kuvat vuorotellen molempien apuohjelmien kautta.

Kuinka pakata PNG nopeasti OptiPNG- ja PNGOUT-muotoon

Luo png.reg-tiedosto ja kirjoita siihen rekisterin tiedot

Windows Rekisterieditori Versio 5.00 @ = "Suorita OptiPNG kansiossa" @ = "cmd.exe / c \" TITLE Käynnissä OptiPNG % 1 && FOR / r \ "% 1 \" %% f IN (* .png) DO optipng -o7 \ "%% f \" \ "" @ = "Suorita PNGOUT kansiossa" @ = "cmd.exe / c \" TITLE Suoritetaan PNGOUT:ta % 1 && FOR / r \ "% 1 \" %% f IN (*. png) DO pngout \ "%% f \" \ ""

Suorita sitten tämä tiedosto ja kirjoita tiedot Windowsin rekisteriin.
Nyt kun napsautat kansiota, jossa on pakattavat PNG-tiedostot, valitse tarvitsemasi komennot, pakkaus tapahtuu automaattisesti ja kaikille kuville kerralla.

Poistaaksesi kaiken kontekstivalikko, kirjoita alla oleva koodi png.reg-tiedostoon ja suorita se

Windowsin rekisterieditorin versio 5.00 [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ Shell \ OptiPNG \ HKEY_ll -SOOFTWCHALINECHARE \ LOOCH_KOMMENTO] [-HKEY_LOCAL_MACHINE \ Kansio \ komentotulkki \ PNGOUT \ komento]

Pakkaus JPG, JPEG ilman laadun heikkenemistä

JPG:n ja JPEG:n optimoimiseksi analogisesti PNG:n kanssa on apuohjelmia: jpegtran ja jpegoptim. Tietysti voit käyttää Photoshopia, mutta JPG- ja JPEG-pakkauksessa suosittelen niiden käyttöä.

Kuinka asentaa, määrittää ja käyttää jpegtran

jpegtran on tehokas apuohjelma, jonka avulla voit suorittaa sekä yksinkertaisen JPG-pakkauksen ilman laadun heikkenemistä että pakkaamisen tietyllä antialiasing-tasolla ja jopa muuntamisen progressiiviseksi JPEG:ksi.
Voit ladata jpegtranin täältä http://jpegclub.org/jpegtran/ (hae ja lataa jpegtran.exe).

Kuinka pakata JPG, JPEG jpegtranilla

Täytä jpegtran.exe kohtaan C: \ Windows
Avaa sitten haluamasi JPEG-kansio Far Managerissa ja kirjoita

Jpegtran -kopioi ei mitään -optimoi -outfile min.1.jpg 1.jpg # Perusoptimointi 1.jpg # -copy none poistaa metatiedot JPG:stä # -optimize optimoi kuvan

Progressiivinen JPG, JPEG

Tämä on eräänlainen JPG, joka sivua ladatessaan näyttää ensin yleiset ääriviivat, sitten se latautuu ja nostaa kuvanlaadun maksimiin. Erittäin kätevä hitaalle mobiili-internetille ja siksi sitä on käytettävä.

Jpegtran -progressiivinen -outfile 1.jpg 1.jpg # Muuntaa 1.jpg-muodon progressiiviseksi

Kuinka tarkistaa, onko kuva progressiivinen JPEG

Edistyneet jpegtran-ominaisuudet

Kaikki on katettu täällä mahdollisia vaihtoehtoja jpegtranilla

Jpegtran --apua käyttö: jpegtran-syöttötiedosto tulostiedosto Kytkimet (nimet voivat olla lyhennettyjä): -kopioi ei mitään Kopioi ei ylimääräisiä merkkejä lähdetiedostosta -kopioi kommentit Kopioi vain kommenttimerkit (oletus) -kopioi kaikki Kopioi kaikki ylimääräiset merkit -optimoi Huffman-taulukko ( pienempi tiedosto, mutta hidas pakkaus) -progressiivinen Luo progressiivinen JPEG-tiedosto Kytkimet kuvan muokkaamiseen: -rajaa LxK + X + Y Rajaa suorakaiteen muotoiseksi osa-alueeksi -flip Peilikuva (vasen-oikea tai ylhäältä alas) -harmaasävy Pienennä harmaasävyksi ( jättää väritiedot pois) -täydellinen Epäonnistui, jos on ei-muunnettavia reunalohkoja -kierrä Kierrä kuvaa (astetta myötäpäivään) -skaalaus M / N Skaalaa tulostuskuva murto-osalla M / N, esim. 1/8 -transposoi Transposoi kuva -poikittainen Transpositio kuva -leikkaus Pudota ei-muuntuvat reunalohkot -pyyhi LxK + X + Y Pyyhi (harmaa) suorakulmainen alialue Kytkimet edistyneille käyttäjille: -aritmetiikka Käytä aritmeettista koodausta -restart N Aseta uudelleenkäynnistysväli riveihin tai lohkoihin, joissa on B -max-muisti N Käytettävän muistin enimmäismäärä (ktavuina) -lähtötiedoston nimi Määritä tulostiedoston nimi -verbose tai -debug Lähetä virheenkorjaustuloste Ohjattujen toimintojen kytkimet: -skannaa tiedosto Luo moniskannainen JPEG komentosarjatiedostoa kohden

Kuinka nopeasti pakata JPEG automaattisesti jpegtranilla Windowsissa

Pakkaaminen kontekstivalikon kautta ei ole mahdollista apuohjelman ominaisuuksien vuoksi, mutta voit kuitenkin määrittää useiden JPEG-tiedostojen pakkaamisen automaattisesti koneella kerralla.
Tätä varten meidän on luotava tiedosto .bat-tunnisteella (apua varten) ja kirjoitettava siihen

CD / d. %% j in (* .jpg) soita: sheensay "%% ~ nxj" "%% ~ nj.jpg" goto: eof: sheensay jpegtran -kopioi none -optimize -progressive "% ~ 1" "% ~ 2" "

Kuinka asentaa, määrittää ja käyttää jpegoptimia

Kuinka pakata JPG, JPEG käyttämällä jpegoptimia

Täytä jpegoptim.exe kohtaan C: \ Windows. Sitten avaamme kansion kanssa Jpg kuvia käyttämällä Far Manageria ja siirry konsoliin

Jpegoptim * .jpg -- strip-all -- all-progressive

Kuinka optimoida useita JPG-kuvia, JPEG-tiedostoja kerralla käyttämällä jpegoptimia

Toisin kuin jpegtran, jpegoptim-apuohjelma antaa sinun työskennellä sen kanssa melko mukavasti kontekstivalikosta.
Luodaan jpegoptim.reg-tiedosto esimerkiksi Far Managerilla ja kirjoitetaan sinne

Windowsin rekisterieditorin versio 5.00 @ = "Suorita jpegoptim kansiossa" @ = "cmd.exe / c \" TITLE Käynnissä jpegoptim on% 1 && FOR / r \ "% 1 \" %% f IN (* .jpg) DO jpegoptim * .jpg --strip-all --all-progressive \ "%% f \" \ ""

Käynnistetty, syötetty tiedot rekisteriin. Nyt voit pakata monia JPEG-tiedostoja pikavalikon avulla, laita haluamasi kuvat yhteen kansioon, napsauta hiiren kakkospainikkeella ja "Suorita jpegoptim kansiossa".

Jos haluat poistaa jpegoptimin rekisteristä ja kontekstivalikosta, kirjoita jpegoptim.reg

Windowsin rekisterieditorin versio 5.00 [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim \ command]

Tallenna, suorita, tee muutoksia rekisteriin.

Kuinka hyvin jpegtran ja jpegoptim pakkaavat jpg, jpeg

Jatketaan testaukseen. Otetaan esimerkiksi tiedosto caching.jpg. Alkuperäisessä se painaa 29,5 KB

JPG, JPEG-pakkauksen laatu testaa jpegtran

Lähtö oli 29,1 kt, pakkaussäästö 1,36 %

Testataan jpegoptimia JPG, JPEG-pakkauksen laadun suhteen

V Windowsin Resurssienhallinta tämä ei ole näkyvissä, pakkaus oli useita satoja tavuja.

Hyvin, alkuperäinen tiedosto oli hyvin valmistettu, joten pakkaamisella ei ollut näkyvää vaikutusta, mutta kun käsittelet optimoimattomia kuviasi, saatat joskus ihmetellä, kuinka hyvin koon säästö voi olla.

Kuinka määrittää png- ja jpg-, jpeg-pakkaus automaattisesti

Jos olet lukenut tämän osion, mutta olet edelleen tyytymätön ehdotettuihin vaihtoehtoihin, suosittelen, että kokoat kannettavan harvesterin itse - palvelu kuvien, valokuvien ja kuvien pakkaamiseen, joka toimii tarpeen mukaan suoraan työpöydälläsi.

On asennettava etukäteen jpegtran, jpegoptim, optpng, pngout NS
Asennusohjeet ovat yllä.

Joten tätä varten meidän on koottava kansioarkkitehtuuri oikein. Oletetaan, että sinulla on kuvakansio, jossa on oma PNG- ja JPG-kansioiden hierarkia, joka sinun on käsiteltävä.
Luo optimus-kansio, pudota siihen kuvat-kansio kaikkine alikansioineen ja tiedostoineen.
Avaa se, avaa optimus siinä, luo go.bat-tiedosto ja kirjoita sinne

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path =% ~ dp0 :: Sen kansion nimi, jossa raakakuvat sijaitsevat set folder = kuvat echo Käsittely * .JPG-tiedostoja jpegtranin kautta :: Luo kansio, johon tallennat pakattu jpg... Meidän tapauksessamme tämä on jpeg_images xcopy / y / t / c / i "% folder%" "jpg_% folder%" :: Jokaiselle .jpg-tiedostolle optimoimme jpegtranilla. Tulos.jpg kirjoitetaan tiedostoon jpeg_images for / r% folder% %% a in (* .jpg) do (set fn = %% a & jpegtran -copy none -optimize -progressive -outfile% home_path% jpg_! Fn: % ~ dp0 =!% home_path%! fn:% ~ dp0 =!) echo Käsittely * .JPG-tiedostot jpegtranin kautta on valmis :: Ilmoita, että nyt sinun on suoritettava se uudessa kansiossa jpeg_images set folder = jpg_% kansio% echo Käsitellään * .JPG-tiedostoja jpegoptimin kautta / r% kansio% %% a in (* .jpg) do (set fn = %% a & jpegoptim %% ~ a --strip-all) echo Käsittely * .JPG-tiedostoja jpegoptimin kautta valmis kaiku Käsittely *. PNG-tiedostoja kautta optipng xcopy / y / t / c / i "% folder%" "png_% folder%" for / r% folder% %% a in (* .png) do (set fn = %% a & optipng -o7 % % ~ a -out% home_path% png_! fn:% ~ dp0 =!) echo Käsittely * .PNG-tiedostot optipng:n kautta suoritettu set folder = png_% kansio% echo Käsittely * .PNG-tiedostot pngout:n kautta for / r% kansio% %% a in (* .png) do (set fn = %% a & pngout %% ~ a) echo Käsitellään * .PNG-tiedostoja pngoutin kautta suoritettu tauko

Koodi on kommentoitu sisään tärkeitä osia... Itse asiassa ei mitään monimutkaista, ota selvää, jos tarvitset sitä.

Tallenna nyt go.bat ja suorita se.

Jos tiedostoja on paljon, kuvien pakkaaminen kestää jonkin aikaa. Odota, kunnes konsoli ilmoittaa prosessin päättymisestä.

Pakkaus suoritetaan erottamalla tiedostot erikseen JPG, jotka nyt sijaitsevat jpg_images-muodossa, ja PNG erikseen, jotka sijaitsevat png_images-muodossa.

Jos sinun on muutettava laatua tai muita parametreja, katso yllä oleva apuohjelmien kuvaus ja muuta koodi tarpeidesi mukaan.

Kuinka optimoida ja pakata GIF-tiedostoja

Lopulta

Tässä artikkelissa yritin käsitellä mahdollisimman laajasti tapoja optimoida PNG ja JPG. Jos sinulla on kysyttävää, lisäyksiä, kirjoita kommentteihin, keskustelemme

Ilja on kehittäjien puolestapuhuja ja Web Perf Guru

Kuvat ovat resursseja, jotka vievät usein paljon tilaa sivulla ja painavat eniten. Optimoimalla ne voimme merkittävästi vähentää ladattavien tietojen määrää ja parantaa sivuston suorituskykyä. Mitä enemmän kuva on pakattu, sitä vähemmän kaistanleveys kanava latautuu ja nopeampi selain voi näyttää sivun käyttäjälle.

Kuvan optimointi on sekä tiedettä että taidetta. Voimme kutsua sitä taiteeksi, koska kukaan ei voi antaa varmaa vastausta siihen, kuinka tietty kuva parhaiten pakataan. Tämä on kuitenkin myös tiedettä, koska olemme kehittäneet käytössämme olevia tekniikoita ja algoritmeja, joilla voidaan merkittävästi pienentää resurssin kokoa. On monia tekijöitä, jotka on otettava huomioon valittaessa optimaalisia asetuksia kuvalle: muotoominaisuudet, koodatut tiedot, laatu, pikselimäärä jne.

Kuvien poistaminen ja vaihtaminen

TL; DR

• Poista tarpeettomat kuvat.
• Käytä CSS3-tehosteita aina kun mahdollista.
• Käytä verkkofontteja kuvien tekstin koodaamisen sijaan.

Ensinnäkin kysy itseltäsi kysymys: onko tämä kuva todella tarpeellinen? Kiva muotoilu sen tulee olla yksinkertainen eikä heikentää suorituskykyä. Paras vaihtoehto on yksinkertaisesti poistaa tarpeeton kuva, koska se on kooltaan paljon enemmän tavuja verrattuna HTML-, CSS-, JavaScript- ja muihin sivun resursseihin. Samalla yksi kuva oikeassa paikassa voi korvata pitkän tekstin, joten sinun on löydettävä tasapaino itse ja tehtävä oikea päätös.

Tämän jälkeen sinun tulee tarkistaa, voitko saavuttaa halutun tuloksen tehokkaammin:

• Kiitokset CSS-tehosteet(gradientit, varjot jne.) ja CSS-animaatiot, voit luoda resursseja, jotka näyttävät teräviltä missä tahansa resoluutiossa ja mittakaavassa ja painavat paljon vähemmän kuin kuvat.
• Web-fontit Voit käyttää kauniita tekstiruutuja säilyttäen samalla mahdollisuuden valita, etsiä ja muuttaa tekstin kokoa. Tämän ansiosta resurssien kanssa työskentelemisestä tulee entistä kätevämpää.

Vältä tekstin koodaamista kuvaan. Kauniit kirjaimet ovat välttämättömiä laadukkaalle suunnittelulle, brändin edistämiselle ja mukavaa työtä resurssilla, mutta kuvan teksti vain estää kaiken tämän. Sitä ei voi valita, löytää, suurentaa, kopioida, eikä se näytä hyvältä korkearesoluutioisissa laitteissa. Tietysti myös verkkofontit tarvitsevat optimointia, mutta ne voivat auttaa välttämään yllä mainitut ongelmat. Valitse ne aina näyttääksesi tekstiä.

Vektori ja bittikartat

TL; DR

• Vektorimuoto sopii erinomaisesti geometristen muotojen kuviin.
• Vektorikuvien laatu on mittakaavasta ja resoluutiosta riippumaton.
• Käytä rasterimuotoa monimutkaisiin kuviin, joissa on useita epätyypilliset lomakkeet ja yksityiskohdat.

Jos päätät käyttää kuvaa tuloksen saavuttamiseksi, valitse sille sopiva muoto:

Vektorikuva

Bittikartta

• Vektorigrafiikka käyttää viivoja, pisteitä ja polygoneja kuvan näyttämiseen.
• Rasterigrafiikassa suorakaiteen muotoisen ruudukon jokaisen pikselin yksittäiset arvot koodataan ja niiden perusteella näytetään kuva.

Jokaisella formaatilla on omat etunsa ja haittansa. Vektorimuoto on ihanteellinen kuville, jotka on tehty yksinkertaisista geometrisista muodoista (kuten logot, teksti, kuvakkeet jne.). Ne pysyvät terävinä missä tahansa resoluutiossa ja mittakaavassa, joten käytä tätä muotoa suuret näytöt ja resurssit näytettäväksi eri kokoisina.

Vektorimuodot eivät kuitenkaan sovellu monimutkaisille kuville (kuten valokuville). SVG-merkintöjä voi olla liikaa kuvaamaan kaikkia muotoja, mutta tuloksena oleva kuva näyttää silti epärealistiselta. Tässä tapauksessa sinun tulee käyttää bittikarttakuvamuotoa, kuten GIF, PNG, JPEG tai uudempia JPEG-XR- ja WebP-muotoja.

Bittikarttojen laatu riippuu resoluutiosta ja mittakaavasta: suurennettuna se muuttuu epäselväksi ja hajoaa pikseleiksi. Tämän seurauksena saatat joutua tallentamaan useita bittikartan versioita eri resoluutioilla.

Optimoitu korkearesoluutioisille näytöille

TL; DR

• Korkearesoluutioisilla näytöillä yksi CSS-pikseli koostuu useista näytön pikseleistä.
• Korkearesoluutioisissa kuvissa on paljon enemmän pikseleitä ja tavuja kuin tavallisissa kuvissa.
• Optimointitekniikoita voidaan soveltaa minkä tahansa resoluution kuviin.

Kun puhutaan pikseleistä, sinun tulee erottaa näytön pikselit ja CSS-pikselit. CSS-pikseli voi vastata yhtä tai useampaa näytön pikseliä. Tämä tehdään niin, että laitteissa, joissa on suuri määrä näytön pikseleitä, kuva on selkeämpi ja yksityiskohtaisempi.

Tietenkin näytöillä korkea DPI(HiDPI) -grafiikka näyttää erittäin hyvältä. Kuvien on kuitenkin oltava yksityiskohtaisempia, jotta ne näyttävät hyvältä teräväpiirtona. Mutta meillä on ratkaisu: vektorimuodot sopivat täydellisesti tähän tehtävään. Ne pysyvät terävinä millä tahansa resoluutiolla. Vaikka hienojen yksityiskohtien renderöinnin kustannukset nousevat, käytämme silti yhtä näytöstä riippumatonta resurssia.

Toisaalta bittikartat ovat paljon monimutkaisempia, koska ne koodaavat kuvadatan jokaisessa pikselissä. Siten mitä suurempi on pikselien määrä, sitä suurempi on tällaisen resurssin koko. Harkitse esimerkiksi eroa 100 x 100 CSS-pikselikuvan välillä:

Kun tuplaamme näytön resoluution, pikselien kokonaismäärä nelinkertaistuu kerralla: kahdesti pystysuunnassa ja kahdesti vaakasuunnassa.

Tee yhteenveto. Grafiikka näyttää erittäin houkuttelevalta korkearesoluutioisilla näytöillä, joten voit luoda hyvä vaikutelma sivustostasi. Nämä näytöt vaativat kuitenkin korkearesoluutioisia kuvia. Valitse vektorimuodot, koska ne näyttävät teräviltä kaikilla laitteilla. Jos sinun on käytettävä bittikarttaa, lisää joitain optimoituja resurssimuunnelmia (katso alla).

Vektorikuvien optimointi

TL; DR

• SVG on käytössä oleva kuvamuoto XML-pohjainen
• SVG-tiedostot on pienennettävä niiden koon pienentämiseksi.
• Pakkaa SVG-tiedostot GZIP:llä.

Kaikki nykyaikaiset selaimet tukevat SVG-muoto(Skaalautuva vektorigrafiikka). Se on XML-pohjainen kuvamuoto 2D-grafiikkaa varten. SVG-merkinnät voidaan upottaa suoraan sivulle tai ulkoiseen resurssiin. SVG-tiedosto puolestaan ​​voidaan luoda millä tahansa vektoripiirustusohjelmistolla tai manuaalisesti tekstieditorissa.

Yllä oleva esimerkki on yksinkertainen pyöreä muoto mustalla reunuksella ja punaisella taustalla. Se vietiin Adobe Illustratorista. Kuten arvata saattaa, se sisältää paljon metatietoja, kuten kerrostietoja, kommentteja ja XML-nimiavaruuksia, joita ei usein tarvita resurssin hahmontamiseen selaimessa. Tämän seurauksena SVG-tiedostot tulee pienentää svgo-työkalulla.

Esimerkiksi svgo pienentää yllä olevan SVG-tiedoston kokoa 58 % 470:stä 199 B:iin. Lisäksi, koska SVG on XML-pohjainen muoto, voimme pienentää sen kokoa siirron aikana GZIP-pakkauksella. Varmista, että palvelimesi on määritetty pakkaamaan SVG-sisältöä.

Bittikarttojen optimointi

TL; DR

• Bittikartta on pikseleiden ruudukko.
• Jokaiseen pikseliin on koodattu väri- ja läpinäkyvyystiedot.
• Kuvan koon pienentämiseksi kompressorit käyttävät erilaisia ​​tekniikoita pienentämään bittien määrää pikseliä kohden.

Bittikartta on yksinkertaisesti yksittäisten pikselien kaksiulotteinen ruudukko. Esimerkiksi 100 x 100 pikselin kuva on peräkkäin 10 000 pikseliä. Jokainen pikseli sisältää punaisen (R), vihreän (G) ja sinisen (B) kanavan sekä alfa- tai läpinäkyvyyskanavan (A) RGBA-arvot.

Selain asettaa kullekin kanavalle 256 arvoa (sävyä), jotka ovat 8 bittiä kanavaa kohden (2 ^ 8 = 256) ja 4 tavua pikseliä kohden (4 kanavaa x 8 bittiä = 32 bittiä = 4 tavua). Näin ollen, kun tiedämme ruudukon mitat, voimme helposti laskea tiedoston koon:

• Kuva 100 x 100 px koostuu 10 000 pikselistä
• 10 000 px x 4 B = 40 000 B
• 40 000 B / 1 024 = 39 kt

Saattaa vaikuttaa siltä, ​​että 39 kt ei ole paljon 100x100 pikselin kuvalle. Kuitenkin, kun tiedostokoko kasvaa, tiedostokoko on paljon suurempi, ja joudut käyttämään paljon aikaa ja resursseja sen lataamiseen. Tämä kuva on tällä hetkellä pakkaamaton. Mitä voidaan tehdä sen koon pienentämiseksi?

Yksi helppo tapa optimoida kuva on alentaa värisyvyyttä 8 bitistä kanavaa kohden valitsemalla paletti pienempi... Asettamalla syvyydeksi 8 bittiä kanavaa kohti, saamme kanavalle 256 arvoa ja 16 777 216 (2563) väriä. Ehkä sinun pitäisi pienentää paletti 256 väriin? Silloin tarvitsemme vain 8 bittiä kaikille RGB-kanaville ja vain 2 tavua pikseliä kohden, ei 4:ää kuten ennen. Onnistuimme pakkaamaan kuvat puoliksi!

Kun tiedot on optimoitu yksittäisinä pikseleinä, kiinnitetään huomiota viereisiin pikseleihin. Osoittautuu, että tällaisten pikselien väri monissa kuvissa, erityisesti valokuvissa, on usein samanlainen. Tämä sallii kompressorin soveltaa deltakoodausta. Säästämisen sijaan yksittäisiä arvoja kullekin pikselille voit määrittää vain vierekkäisten pikselien välisen eron. Jos ne ovat samat, delta on nolla ja meidän tarvitsee tallentaa vain yksi bitti. Mutta ei siinä vielä kaikki!

Emme usein huomaa eroa joissakin sävyissä, joten voimme optimoida kuvan pienentämällä tai lisäämällä näiden värien palettia. Jokaisella 2D-ruudukon pikselillä on useita naapureita, joten voimme parantaa deltakoodausta. Älä keskity pikselin välittömiin naapureihin, vaan kokonaisiin samanvärisiin lohkoihin ja koodaa ne eri asetuksilla.

Kuten näette, kuvien optimointi on tulossa yhä haastavammaksi. Aiheesta on tieteellistä ja kaupallista tutkimusta, koska kuvat ovat monta tavua ja on kannattavaa kehittää uusia pakkaustekniikoita. Jos haluat oppia lisää, lue tai katso konkreettisia esimerkkejä.

Joten kuinka kaikki tämä monimutkainen asia auttaa meitä optimoimaan kuvamme? Jälleen, meidän ei tarvitse keksiä uusia pakkausmenetelmiä. Meidän on kuitenkin oltava tietoisia kysymyksen tärkeimmistä näkökohdista: RGBA-pikselit, värisyvyys ja erilaisia ​​tekniikoita optimointi. Tämä on välttämätöntä keskustelun jatkamiseksi bittikarttamuodoista.

Häviöllinen ja häviötön tietojen pakkaus

TL; DR

• Ominaisuudet huomioon ottaen ihmisen näkemys, kuviin voidaan käyttää häviöllisten tietojen pakkausta.
• Häviöllistä ja häviötöntä tietojen pakkausta käytetään kuvan optimointiin.
• Kuvamuotojen ero on ero siinä, miten ja mitä algoritmeja näiden pakkausten kanssa käytetään pienentämään resurssin kokoa.
• Ei ole olemassa parasta muoto- tai laatuasetusta, joka toimisi kaikille kuville. Kun yhdistämme erilaisia ​​kompressoreja ja resursseja, emme koskaan saa samaa tulosta.

Tietyntyyppisille tiedoille, kuten sivun lähdekoodille tai suoritettava tiedosto, on välttämätöntä, että kompressori ei poista tai muuta alkuperäisiä tietoja. Puuttuva tai virheellinen databitti voi täysin vääristää tai tuhota tiedoston sisältöarvon. Muun tyyppistä dataa voidaan kuitenkin välittää likimääräisellä tavalla.

Ihmisen näön erityispiirteistä johtuen emme välttämättä huomaa tiedon puutetta jokaisesta pikselistä, esimerkiksi emme näe eroa joidenkin värisävyjen välillä. Siksi voimme käyttää vähemmän bittejä joidenkin värien koodaamiseen ja siten pienentää resurssin kokoa. Näin ollen vakiokuvan optimoinnissa on kaksi päävaihetta:

1. Kuvan pakkaus [lossy] (http://ru.wikipedia.org/wiki/Lossy_data_compression), joka poistaa osan pikselitiedoista.
2. [Lossless] Image Compression (http://en.wikipedia.org/wiki/Lossless_compression), jossa pikselitiedot pakataan.

Ensimmäinen vaihe on valinnainen. Tarkka algoritmi riippuu tietystä kuvasuhteesta, mutta huomioi, että jokainen kuva voidaan pakata tietojen menettäen. Itse asiassa ero kuvamuotojen, kuten GIF, PNG, JPEG jne., välillä on juuri yhdistelmä erilaisia ​​algoritmeja häviöllinen ja häviötön tietojen pakkaus.

Mikä on paras tapa yhdistää häviöllinen ja häviötön pakkaus? Se riippuu itse kuvasta ja muista olosuhteista, kuten tiedoston koon ja kohinan välisestä tasapainosta. Jotta saat terävän ja yksityiskohtaisen kuvan, sinun ei tarvitse käyttää häviöllistä pakkausta. Jos tiedoston koko on sinulle tärkeämpi, voit käyttää tätä optimointimenetelmää. Kaikille kuville ei ole yhtä asetusta. Sinun on itse määritettävä haluttu tulos ja tehtävä päätös.

Kun käytät häviöllistä pakkausta, kuten JPEG:tä, voit valita laatuasetukset (kuten Adobe Photoshopin Save for Web -liukusäätimen). Tyypillisesti tämä on arvo välillä 1-100, joka määrittää, käytetäänkö häviöllisiä vai häviöllisiä pakkausalgoritmeja. Älä pelkää heikentää laatua: usein kuva näyttää silti hyvältä ja tiedostokoko pienenee huomattavasti.

Kuvasuhteen valinta

TL; DR

• Valitse sopiva vakiomuoto: GIF, PNG tai JPEG.
• Kokeile eri asetuksia jokaiselle muodolle (laatu, paletin koko jne.) ja valitse sopivin.
• Lisää nykyaikaisille asiakkaille WebP- ja JPEG XR -muotoisia resursseja skaalattuihin kuviin:
• Kuvan skaalaus on yksi yksinkertaisimmista ja tehokkaimmista optimointitekniikoista.
• Jos käytät suuria kuvia, käyttäjä voi ladata tarpeettomia tietoja.
• Vähennä tarpeettomien pikselien määrää skaalaamalla kuvat niiden näyttökokoon. Vähennä tarpeettomien pikselien määrää pienentämällä kuva sen näyttökokoon.

Häviöllisten ja häviöttömän pakkausalgoritmien lisäksi kuvamuodot tukevat muita ominaisuuksia, kuten animaatiota ja läpinäkyvyyskanavaa (alfa-kanava). Siksi, kun valitset sopivaa muotoa, sinun on otettava huomioon haluttu visuaalinen tehoste ja sivuston tai sovelluksen vaatimukset.

On kolme vakiomuoto kuvat: GIF, PNG ja JPEG. Lisäksi jotkin selaimet tukevat uusia WebP- ja JPEG XR -muotoja, joihin on saatavilla enemmän pakkausta ja lisäominaisuuksia. Joten mikä formaatti sinun pitäisi valita?

1. Pitäisikö kuva animoida? Valitse sitten GIF-muoto.
2. GIF-väripaletissa on vain 256 väriä. Tämä ei riitä useimmille kuville. Lisäksi PNG-8 on parempi pakkaamaan kuvia pienellä paletilla. Valitse siis GIF vain, jos tarvitset animaatiota.
3. Haluatko tallentaa kaikki pienet yksityiskohdat korkeimmalla mahdollisella resoluutiolla? Käytä PNG.
4. PNG-muoto ei käytä häviöllistä pakkausta paletin koon valinnan lisäksi. Tämän ansiosta kuva tallennetaan hyvin korkealaatuinen, mutta painaa paljon enemmän kuin muut tiedostomuodot. Käytä tätä muotoa vain tarvittaessa.
5. Jos kuva koostuu geometrisista muodoista, muunna se vektorimuotoon (SVG-)!
6. Vältä tekstiä kuvissa. Sitä ei voi valita, löytää tai suurentaa. Jos suunnittelun luomiseen tarvitaan tekstiä, käytä verkkofontteja.
7. Optimoitko valokuvaa, kuvakaappausta tai vastaavaa kuvaa? Käytä JPEG.
8. JPEG käyttää häviöllisen ja häviöttömän pakkauksen yhdistelmää pienentääkseen tiedostokokoa. Löytääksesi parhaan kuvanlaadun ja kuvakoon yhdistelmän, yritä asettaa useita JPEG-laadun tasoja.

Kun olet tunnistanut sopivan muodon ja asetukset kaikille resursseille, lisää lisävaihtoehto WebP- ja JPEG XR -tiedostoihin. Nämä ovat uusia muotoja, joita ei vielä tueta kaikissa selaimissa. Niiden käyttö voi kuitenkin pienentää tiedostokokoa merkittävästi. Esimerkiksi WebP pakkaa kuvan enemmän kuin JPEG.

Koska WebP:tä ja JPEG XR:ää ei tueta kaikissa selaimissa, sinun on lisättävä lisälogiikkaa sovelluksiin tai palvelimiin oikean resurssin lähettämiseksi käyttäjälle.

• Useat sisällönjakeluverkot tarjoavat kuvien optimointipalveluita, mukaan lukien JPEG XR- ja WebP-tiedostot.
• Jotkut avoimen lähdekoodin työkalut, kuten PageSpeed ​​​​for Apache ja Nginx, optimoivat, muuntavat ja toimittavat automaattisesti asianmukaiset resurssit.
• Voit lisätä ylimääräistä sovelluslogiikkaa määrittääksesi asiakkaan ja sen tuetut muodot ja lähettää sen sitten paras vaihtoehto resurssi.

Huomaa, että jos käytät Webviewa sisällön hahmontamiseen alkuperäisessä sovelluksessa, voit hallita asiakasta täysin ja käyttää vain WebP:tä. V Facebook-sovellukset, Google+ ja niin edelleen, WebP:tä käytetään, koska se todella parantaa suorituskykyä. Saat lisätietoja tästä muodosta katsomalla esityksen WebP: Nopeampien, pienempien ja kauniimpien kuvien käyttöönotto Google I / O 2013:sta.

Työkalut ja vaihtoehdot

Ei ole olemassa yhtä täydellistä muotoa, työkalua tai optimointialgoritmia, joka toimisi kaikille kuville. Saada haltuunsa paras tulos, sinun tulee valita muoto ja sen asetukset sisällön sekä visuaalisten ja teknisten vaatimusten mukaan.

Voit vapaasti kokeilla kompressorin asetuksia. Aseta eri laatuasetukset, valitse sopiva vaihtoehto ja käytä sitä muissa samankaltaisissa sivuston kuvissa. Mutta muista: kaikkia graafisia resursseja ei tarvitse pakata samalla menetelmällä!

Lähetettyjen kuvien skaalaus

TL; DR

Kuvan koko on pikselien summa kerrottuna kunkin pikselin koodaamiseen käytettyjen tavujen määrällä. Kuvan optimointi tiivistyy näiden kahden komponentin vähentämiseen.

Näin ollen yksi yksinkertaisimmista ja tehokkaimmista optimointitekniikoista on varmistaa, että ladatun kuvan koko ei ole suurempi kuin sen selaimessa näkyvä koko. Ei mitään hienoa, mutta monet sivustot tekevät vakava virhe... Ne isännöivät suuria resursseja, ja selaimen itsensä on skaalattava ja näytettävä ne pienemmällä resoluutiolla. Tämä muun muassa lisää käyttäjän prosessorin kuormitusta.

Lähettämällä ylimääräisiä pikseleitä ja antamalla selaimen skaalata itse resurssia, menetämme mahdollisuuden optimoida sivun hahmontamiseen tarvittavien tavujen määrä. Huomaa, että skaalaus ei ainoastaan ​​vähennä pikselien määrää, vaan myös muuttaa alkuperäisen kuvan kokoa.

Huomaa, että kaikissa kolmessa tapauksessa näytettävä koko on vain 10 pikseliä pienempi kuin alkuperäinen. Mitä suurempi kuvan alkuperäinen koko on, sitä enemmän tarpeetonta dataa on kuitenkin koodattava ja lähetettävä. Vaikka et pystyisi löytämään täydellistä vastaavuutta alkuperäisen ja näytetyn koon välillä, sinun on vähennettävä tarpeettomien pikselien määrää mahdollisimman paljon.

Luettelo optimointimenetelmistä

Kuvan optimointi on sekä tiedettä että taidetta. Voimme kutsua sitä taiteeksi, koska kukaan ei voi antaa varmaa vastausta siihen, kuinka tietty kuva parhaiten pakataan. Tämä on kuitenkin myös tiedettä, koska olemme kehittäneet käytössämme olevia tekniikoita ja algoritmeja, joilla voidaan merkittävästi pienentää resurssin kokoa.

Muista muutamia vinkkejä ja tekniikoita kuvien optimoimiseksi:

• Valitse kuvat vektorimuodossa. Niiden laatu on resoluutiosta ja mittakaavasta riippumaton, joten ne sopivat suurille näytöille ja erilaisille laitteille.
• Pienennä ja pakkaa SVG-sisältöä. monet grafiikkasovelluksia lisää XML-merkinnät, jotka sisältävät usein tarpeettomia metatietoja. Voit poistaa sen. Varmista, että palvelimesi on määritetty GZIP-pakkauksella SVG-sisällölle.
• Valitse sopivimmat bittikarttamuodot. Määritä vaadittavat kuvavaatimukset ja valitse haluttu muoto jokaiselle resurssille.
• Kokeile erilaisia ​​laatuasetuksia bittikarttamuodoille.Älä pelkää heikentää laatua: usein kuva näyttää silti hyvältä ja tiedostokoko pienenee huomattavasti.
• Poista tarpeettomat metatiedot. monet bittikartat sisältää Lisätieto resurssitiedot: paikkatiedot, kameratiedot jne. Poista ne käyttämällä asianmukaisia ​​työkaluja.
• Skaalaa kuvia. Pienennä palvelimella olevia tiedostoja niin, että alkuperäinen ja näytettävä koko ovat lähes samat. Kiinnitä erityistä huomiota suuria kuvia... Jos selain skaalaa niitä, sivustosi suorituskyky heikkenee merkittävästi.
• Automatisoida. Käytä luotettavia työkaluja ja ohjelmistoja, jotka optimoivat automaattisesti sivustosi kuvat.

Ellei toisin mainita, tämän sivun sisältö on lisensoitu Creative Commons Attribution 3.0 -lisenssillä ja koodinäytteet Apache 2.0 -lisenssillä. Katso lisätietoja. Java on Oraclen ja/tai sen tytäryhtiöiden rekisteröity tavaramerkki.

Päivitetty 8. elokuuta 2018