Ebben a cikkben szeretném megtanítani, hogyan kell levágni és kicsinyíteni a képet, hogy az bekerüljön a blogjába vagy a webhelyére.

weboldalon

Az első probléma, amellyel az ügyfeleim találkoznak, amikor elkezdik a weboldalukat dolgozni, az az, hogy hatalmas képeket illesztenek bele. Bár legtöbbször nincsenek tudatában, ez egy sor problémához vezet, amelyek hosszú távon az arcukat mutatják:

  • Lassú betöltés az internetről
  • A pozicionálás károsodása a keresőmotorokban
  • Webes forgalom fogyasztása a szerver
  • A legrosszabb felhasználói élmény mobil eszközök

Igaz, hogy azok, akik a weben dolgozunk, már teljesen beépítették a webes képek csökkentésének koncepcióját (vagy kellene), és néha nem vesszük figyelembe, hogy másoknak nem kell megérteniük. Ezért bár nagyon jó cikkek íródtak erről a témáról, megpróbálom összehasonlítani a különböző létező módszereket, és elmagyarázni, hogyan használják őket.

De először meg kell magyarázni néhány alap ez segít jobban megérteni ezt a folyamatot.

Tartalomjegyzék

  1. Fogalmak
  2. Mód
    1. Photoshop
    2. ZSINÓR
    3. Hálózatok a képek csökkentése érdekében
  3. Következtetések
    1. Alkalmazások, amelyek lehetővé teszik az átméretezést
    2. Olyan alkalmazások, amelyek nem engedélyezik az átméretezést
  4. Egyéb szempontok

Fogalmak

A felbontás nem azonos a képmérettel, az egyik és a másik méretezése egyértelműen befolyásolja a fájl súlyát, ezért meg kell értenünk, hogy mik és hogyan működnek.

Mód

Ezután elmagyarázom a képcsökkentés különféle módszereit, a tervező szakemberek által alkalmazott módszerektől másokig a tapasztalatlanabb felhasználók számára. Mindenesetre mindig szem előtt kell tartanunk, hogy egy képméretből indulunk ki pixelben (például 2000 x 3500 px), és hogy csökkenthetjük, de soha nem tágulhatunk mondta a kép. Más szóval, ha egy 200 x 450 képpontos képből indulunk ki, akkor keveset tehetünk. És ez az, hogy nem lehet onnan átvenni, ahol nincs.

Mint korábban mondtam, mást fogok megmagyarázni képcsökkentési módszerek, először is azzal fogok kezdeni Photoshop Y Zsinór. Az alábbiakban, miután kutattam és megnéztem más szakemberek ajánlásait, két cikkre bukkantam, amelyek viszonylag frissek voltak, és számos eszközt felsoroltak. Az elsőt a Hypertextual, a másodikat José Facchin készíti, ahol felsorolják néhány egyszerű webes és asztali eszköz a képek csökkentésére. A probléma az, hogy egy olyan felhasználása után, amely nem győzött meg, úgy döntöttem, hogy elkészítem a összehasonlító hogy a számok alapján válasszon.

Ennek a tesztnek a elvégzéséhez kettővel kezdtem általam készített fényképek normál kompakt kamerával (Canon Powershot SX220 HS). Ahogy letöltöttem őket a fényképezőgépről, elvégeztem a megfelelő kicsinyítéseket a különböző alkalmazásokban, és megkaptam a kicsinyítés százalékos arányát, amely a fényképek eredeti méretének 100% -át vette. Azokban az alkalmazásokban, ahol lehetséges volt, vágást hajtottak végre, amelyben nem figyelmeztetik, hogy ez nem teszi lehetővé a vágást.

Photoshop

Ez a módszer nem mindenki számára elérhető, bár a Photoshop az egyik program, amelyet a legtöbb ember telepített a számítógépére (érthetetlen módon). Nekem az a módszer, amelyet szívesebben használok, mivel itt van nagyobb kontroll a kép felett. Itt nem fogom elmagyarázni, hogyan csökkenthetők a képek a Photoshop alkalmazással, de ha ezt a módszert szeretné használni, akkor felkérem Önt, hogy kövesse a következő oktatóanyagot ebben a blogban, itt fogom összefoglalni a fogalmilag követendő lépéseket.

Amikor akarjuk zsugorítson egy képet a Photoshop alkalmazással, a folyamat szinte mindig ugyanaz:

  1. Kinyitjuk a képet az Adobe Photoshop alkalmazással
  2. Számos alkalommal szükségünk lesz rá bizonyos arányokat, vagyis szélességet egy bizonyos képmagassággal. Ehhez a Vágóeszköz. Itt definiáljuk a kép képarányait, és levágjuk a felesleges helyet.
  3. A kép kivágása után ideje exportálni azt a végleges méretre csökkentve, amelyet szeretnénk. Ezt meg fogjuk tenni két lehetséges eszköz, mindkettő a Photoshop Fájl menüjében található: Exportálás ..., melyik a jelenlegi és az Adobe által ajánlott módszer; Y Mentés webre (régi), amely a régi módszer, a cikk írása idején még mindig jelen van a programban, és amely még mindig a legjobban tetszik. Itt mindig szem előtt kell tartanunk, hogy a web kimeneti felbontása 72 dpi (pont per hüvelyk), míg a dokumentumoké sokkal nagyobb, 300 dpi. Ezáltal a nyomtatásra szánt képek óriási méretűek lesznek az internetes képekhez képest.

Vigyázzon, nagyon fontos, hogy ne keveredjünk össze, mert bár a 2. lépésben arról beszéltünk, hogy az arányokat pixelben definiáljuk, pontosan azt definiáljuk, hogy az arányok. Ez a Kép szélesség/magasság arány, amelyet a végleges méretgel határozunk meg pixelben, de ez a kép eredeti méretében lesz hatásos. Ezt jobban meg fogja érteni, ha megnézi a képcsökkentés bemutatóját a Photoshop segítségével.

És ennyi, ezeket a lépéseket kell követni, hogy csökkentse a webkép méretét a Photoshop alkalmazással. Melyik volt az eredmény? Az 1. fényképből indulunk ki, eredeti súlyával 2 326 854 bájt (2,22 Mb), és a 2. fényképből, eredeti súlyával 3 919 094 bájt (3,74 Mb).

Mint már korábban említettük, a Photoshopban kétféleképpen lehet végrehajtani a végső exportálást, az elsőt az Export As ..., a másodikat pedig a Mentés webre. Az eredmény nem ugyanaz, ezért az alábbiakban bemutatom a súlyokat és a a képre csökkentett tömeg százalékos aránya különböző minőségi szinteken.

Amint azt a grafikonokból láthatjuk, amelyekben összehasonlítjuk az 1. és 2. fotónál kapott méreteket a két minőségi Photoshop módszerrel, azt látjuk, hogy a módszer "Mentés webre ”hatékonyabb és valamivel kisebb képet nyújt (kivéve azt a furcsa kivételt, amely a 100-as minőség nem valószínű eseteiben fordul elő).

A választandó minőség kissé függ az esetleg megszerzett végeredménytől el kellene végeznie pár tesztet és tartsa meg azt, amely nem befolyásolja az exportált fénykép vizuális aspektusát.

A GIMP 2 olyan, mint a Photoshop ingyenes, Más szóval, ez egy nyílt forráskódú képfeldolgozó szoftver, teljesen ingyenes. Ez mindenki számára elérhető, és nincs mit irigyelni a Photoshop számára (legalábbis olyan alapvető képkezelések elvégzéséhez, mint amilyenekkel itt foglalkozunk).

Ha követni szeretne egy oktatóanyagot, amelyben részletesen elmagyarázom, hogyan lehet a webes képet csökkenteni a GIMP segítségével, itt megtekintheti. Mindenesetre a folyamat pontosan ugyanaz, mint az Adobe Photoshopban, de enyhe eltéréssel:

  1. Nyissa meg a képet a GIMP-vel.
  2. Megadjuk a kép arányait pixelben a nyíró eszköz (ebben az esetben vágóval szimbolizálva).
  3. A képet méretezzük (Kép -> Kép méretaránya). Ez a kis eltérés a Photoshop vonatkozásában, ahol ezt a lépést az export folyamat során hajtottuk végre, a GIMP-ben pedig az exportálás előtt megtesszük.
  4. Exportáljuk a képet (Fájl -> Exportálás módja) azon a helyen, ahová szeretnénk, hogy feltöltse a weboldalunkra.

Néhány figyelembe veendő szempont mindig ugyanaz:

  • csökkenthetjük de a kép minőségének romlása nélkül nem nagyíthatunk képet.
  • Soha nem szabad összetévesztenünk és exportálnunk a kép felbontásával a nyomtatáshoz (300 dpi), mivel a kép mérete hatalmas lesz. Ezért, vigyáznunk kell arra, hogy a felbontás 72 dpi legyen.

Mint láthatjuk, a GIMP-vel a fájlok méretének csökkentése elég jó eredményeket hozott. Nyilvánvalóan azt látjuk, hogy eljön az idő, amikor a minőség csökkentése nem vezet arra, hogy sokkal jobban csökkentsük a fájlméretet, ezért, mint mindig, kényelmes egyensúlyt tartani a kicsinyítés és a kapott minőség között.

Hálózatok a képek csökkentése érdekében

A fent említett cikkekben tanulmányozott és felsorolt ​​weboldalak és kis asztali alkalmazások esetében röviden elmondjuk, hogy ez a csökkentési folyamat miből áll, kommentáljuk a megjelenítéseket, és számokat mutatunk, ami végül a legobjektívebb.

    Webresizer.com: Ez egy olyan webhely, amely lehetővé teszi különféle folyamatok végrehajtását, ideértve a kép kivágását, az optimalizálás mellett. Alapvetően csak annyit kell tennie, hogy feltölt egy fájlt az internetre (maximum 10 MB). Ezután beállíthatja a vágási arányt, ha akarja, majd az új méretet szélességben vagy magasságban. Hozzáadhat még néhány paramétert, például a képminőséget, sőt néhány módosítást is végezhet rajta.

És milyen teljesítményt nyújtott a Web Resizer a képek csökkentésében? Hát lássuk.
A webresizer végeredménye szintén elég optimális, anélkül, hogy túl sok lenne a különbség a 80 és 60 minőség között.

Az eredmény egy kissé furcsa is, mivel az egyik lehetőség (Losless) közvetlenül a képet hagyta úgy, ahogy volt.

A compressor.io esete nem volt semmi kielégítő. Egyrészt veszteségmentes üzemmódban nem tett semmit, míg veszteséges módban körülbelül 50% -kal tömörítette a képet.

Ami az eredményeket illeti, nézzük meg. Az eredmények a választott minőségtől függően meglehetősen eltérőek voltak, de úgy tűnik, hogy ez a program valamivel hatékonyabb volt, mint az előző.

Következtetések

Ezen a ponton, és ezzel a számok és összehasonlítások rendetlenségével úgy gondolom, hogy érdemes egy összefoglalót készíteni, amely lehetővé teszi számunkra a program kiválasztását. Ehhez, mivel másként nem lenne fair, először összehasonlítani fogjuk azokat a programokat, amelyek lehetővé teszik az átméretezést, majd azokat, amelyek megengedik a kép átméretezését. Nyilvánvaló, hogy az elsők jobb eredményhez vezetnek, ezért én ajánlom őket. Ez utóbbi érdekes lehet, ha először átméretezzük a képet, vagy ha már megvan a végleges mérete, amelyet az interneten megjeleníteni fog. Ebben az esetben az itt elemzettek közül is választhatunk egyet.

Alkalmazások, amelyek lehetővé teszik az átméretezést

Mint mondtuk, ebben az összehasonlításban azokat az alkalmazásokat vezettük be, amelyek lehetővé teszik a kép átméretezését, ami elengedhetetlen lépés, ha 4000 kép széles képünk van (ahogy ez az összehasonlításhoz használt példában is szerepel).

A következtetés meglehetősen furcsa, de úgy tűnik, hogy az asztali programok közül a GIMP tömörítésbe veszi a tortát, és legyőzi fizetett versenytársát, a Photoshopot. De a legjobb az A Kraken.io minden várakozást felülmúlt, szóval elveszi a tortát, és mindet megveri. Nekem személy szerint jobban tetszik a webresizer, és valószínűleg ezt ajánlom az ügyfeleimnek, de a kraken.io nagyon közel van, és nagyon jó eredményt ad.

Olyan alkalmazások, amelyek nem engedélyezik az átméretezést

Másrészt nézzük meg, mi lett az eredmény azoknál az alkalmazásoknál, amelyek nem teszik lehetővé a kép átméretezését. Mivel nem tudjuk átméretezni, számomra ezeket az alkalmazásokat kizárják, amikor ajánlom őket az ügyfeleimnek. Vessünk azonban egy pillantást rájuk minden esetre.

Ezen eredmények alapján egyértelműnek tűnik Az optimizilla a macskát a vízhez viszi, míg a compressor.io meglehetősen kiábrándító eredményt hozott. Ez az egyszerűségével együtt jó jelölt a képek csökkentésére., mindaddig, amíg nem kell átméreteznünk őket.

Ezért, ZSINÓR asztali számítógéphez, webresizer vagy kraken.io az összehasonlítás nyertes alkalmazásai.

Egyéb szempontok

Itt szeretnék adni pár tippet, amelyek szerintem érdekesek lehetnek:

  1. Kérem, ne írja be a képeket a fényképezőgép által közvetlenül megadott névvel fotókat, vagy amelyek az internetről származnak. Nagyon gyakran látni képeket az IMG_415.jpg fájlnévvel. Ez senkinek nem mond semmit, legkevésbé sem a Google-nak, amely számunkra a legfontosabb a felhasználóval együtt.
  2. Meg kell szoknunk mindig töltse ki képeink alternatív szövegét (Alt). Ez a szöveg segít megtalálni minket a keresőkben is. Itt mindig meg kell adnunk a kép rövid leírását, mivel a látási nehézségekkel küzdő emberek számára készült, akik elolvashatják azt, akik egy adaptált eszköz segítségével böngésznek a weboldalunkon.

Végül, ha le akarja tölteni az általam használt eredeti fényképeket, és megismétli a teszteket, akkor a következő linkről teheti meg.