Ebben a cikkben elmagyarázom hogyan lehet optimalizálni a képeket az internethez. Miből áll? Nos, hogy az egyes képek méretét a weboldalunk méretéhez igazítsuk (most meglátjuk, mi ez), és csökkentse a felbontását hogy a kép kevesebb "súlyú". Vagyis csökkentse méretét pixelben és bájtban. Most, hogy világos, Menjünk a rendetlenségbe!

A képek mérete befolyásolja weboldalunk sebességét és helyzetét

Bárki, aki használt mérési eszközöket betöltési sebesség a webhelyén, ezt észreveszed képek nagyon magas százalékáért felelősek betöltési idő és méret weboldalunkról. Ez az egyik első tényező, amelyet optimalizálnunk kell A Google megbünteti a magas betöltési időket.

Jesús AF barátom ebben a cikkében olyan eszközöket és tippeket találhat, amelyek segítenek Önnek javítsa webhelye sebességét.

A kép betöltési ideje alapvetően két tényezőtől függ:

  • A kép mérete bájtokban. Ez a méret annál nagyobb, minél nagyobb a kép (pixelben), és annál nagyobb a felbontása (dots per inch vagy dpi).
  • Ha a méret pixelben (szélesség és magasság) pontosan megegyezik a képtárolóval

Az első dolog az, hogy tisztázzuk, hogy a képpontok mérete és a kép felbontása különböző dolog. Ha itt mélyebbre akarunk menni, akkor (angolul).

NAK NEK gyakorlati hatások ami érdekel bennünket, az a tudat, hogy muszáj állítsa be a képet a tároló méretéhez, ahová be fogja helyezni és az a felbontást 72 dpi-re kell csökkenteni hogy egyensúlyt találjon a kép minősége és mérete között a weboldalunkon. Ha nem így csináljuk, két hatásunk van:

  1. A nagyobb méretű bájtokban teszi a böngésző hosszabb ideig tart letölteni. Majd meglátjuk azokat a konkrét számokat, amelyekről beszélünk.
  2. Ha ő a kép pixelben (szélességben és magasságban) való mérete nem egyezik meg a benne lévő elemet, a felhasználó böngészőjének (legyen az Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera vagy bármi más) számításokat kell végeznie a kép méretének csökkentése és megfelelő megjelenítése érdekében. Ez folyamatidővé változik, ami weboldalunk megjelenése hosszabb ideig tart.

Hogyan optimalizálhat egy képet az internethez

Sokfélét használhatunk eszközök a kép méretének és felbontásának megváltoztatásához, de a Facebookon folytatott beszélgetésnek köszönhetően felfedeztem egy nagyszerű eszközt, a FastStone Resizer nevet.

Ez az egyszerű program lehetővé teszi a képek webes optimalizálását nagyon egyszerű módon. És lehetővé teszi a kötegelt munkát is, vagyis ugyanazon beállítások alkalmazását egyszerre több képre.

Mekkora a kép a weboldalamon

Jól attól függ, hogy mely elem tartalmazza. Itt megtudhat egy kicsit többet a "div" címkéről, amely a legáltalánosabb tároló, amelyet találni fogunk, de technikai tény, hogy a legtöbb felhasználónak nem is kell tudnia 😉

Tudni a pontos méretadatokat Vannak eszközeink, vannak általánosabbak és mások specifikusabbak, de a legegyszerűbb módszer a elemellenőr ma szinte az összes nagyobb böngésző használja. Az elemellenőr segít nekünk programozóknak bizonyos technikai feladatokban.

Meg kell keresnünk (vagy a semmiből kell létrehoznunk) egy olyan képet, amelynek maximális szélessége érdekel minket a weboldalunkon. Esetemben általában a cikk oszlopának teljes szélességét használom, ami 795 pixel, de előfordulhat, hogy kisebb képet akarunk beilleszteni, és a folyamat ugyanaz lesz.

Hogyan lehet megismerni egy kép konténer méretét a weboldalunkon

Ofelia García del Castillo engedélyével mintául vettem néhány képet az ő blogjáról (http://castillomendia.blogspot.com.es/). Itt van a Facebook rajongói oldala, itt (http://www.castillomendiamadrid.com/) pedig a weboldala és az online áruház.

Például a felvételen feltüntetett képet választottam. A képre kattintva megtekintheti eredeti méretét.

képek

Ha a jobb gombbal kattintunk a web képére, és kiválasztjuk a "Elem vizsgálata", Hozzáférhetünk a HTML kódhoz. A képre kattintva megtekintheti eredeti méretét.

A következő képernyőképen ezt láthatjuk a kép tényleges mérete (1200 pixel x 899 pixel) és az interneten látható méret (320 pixel x 239 pixel) nem egyezik. A képre kattintva megtekintheti eredeti méretét.

És milyen hatásai vannak ennek a weboldalunkon?

Az a tény, hogy nem egyezik a tényleges méret a kép és az a méret, amellyel az interneten megjelenik megbüntet minket a Google szemében.

Ennek oka, hogy webböngészőnknek számításokat kell végeznie, hogy a kép tényleges méretét a képernyőn látható mérethez igazítsa., és ez időbe kerül.

Most, hogy tudjuk, mit akarunk, tegyük meg

A FastStone Resizer retusáló eszköz használata csökkentjük képeink méretét amíg megfelel méretig, amelyet az interneten fogunk látni.

Válassza ki a kicsinyíteni kívánt képeket

Miután a program megnyílt, az első lépés a retusálni kívánt képek kiválasztása.

Emlékeznünk kell arra, hogy a retusálandó képeknek lenniük kell a számítógépünkön.

Ezzel a programmal nem tudjuk szerkeszteni azokat a képeket, amelyek már szerepelnek a weboldalunkon.

A gombok használata "Hozzáadás"Y"Az összes hozzáadása”Kiválaszthatjuk a fotókat egyesével vagy egyszerre.

Nem szabad megfeledkeznünk arról sem, hogy a gombbal választjuk ki a kimeneti útvonalat (ahová menteni fogjuk).Tallózás".

A létrehozandó képek mentéséhez erősen ajánlott egy "csökkentett képek" vagy hasonló nevű mappa létrehozása.

Ezen a ponton megváltoztathatjuk a képkimeneti formátumot a leggyakrabban használtak, például a JPG között, de kiválaszthatunk másokat is, például PNG-t és akár BMP-t is (nem ajánlott 😉). Valójában Joaquín Villalón Bravo, a Social Beings munkatársa javasolta a PNG formátum használatát.

A következő lépés a "Haladó beállítások”Megmondani a programnak, hogy milyen méretet és felbontást szeretnénk a képeinkhez. A képre kattintva megtekintheti eredeti méretét.

Adja meg képeink szélességét

A gombra kattintva megnyíló ablakbanHaladó beállításokElőször ki kell választanunk a lapotÁtméretezés".

Itt több lehetőségünk van.

  • Választhatunk a kép szélességének és magasságának módosítása
  • Választhatunk átméretezés szélesség vagy magasság alapján, és kiszámítják a másik oldalt automatikusan. Ha a képet teljes oszlopra állítjuk (a leggyakoribb), akkor ez lesz a választási lehetőség. Például a webhelyemnél ez a szélesség körülbelül 795 pixel. A magasság közömbös, mert a kép lefelé kinyújtható nagyobb beállítási problémák nélkül.

A képre kattintva megtekintheti eredeti méretét.

Adja meg képeink pontjait hüvelykenként (dpi/dpi)

Miután eldöntötte a kép méretét meg kell változtatnunk a felbontást, amint megjegyeztük, a 72 pont hüvelykenként webes használatra.

Lehetőségünk van menteni a konfigurációt arra az esetre, ha több különbözőt használunk az igényeinknek megfelelően. A képre kattintva megtekintheti eredeti méretét.

Mennyivel csökkentettük a képeinket? Nos, nagyon, nagyon

Végül, miután megnyomta aoké"És a"Alakítani", A program konvertálni kezd.

Ha elkészült, láthatjuk az összefoglalóban az eredeti méretet, a végleges méretet, a kezdeti mérethez viszonyított százalékos arányt és a mentett KB-t. A képre kattintva megtekintheti eredeti méretét.

Mint látható, ez a százalék 2 és 10% között változik az eredeti mérethez képest.

Ez azt jelenti, hogy egy 1 MB-os fotó (kb. 1000 KB) 20 és 100 KB közé csökken.

És ez sok KB, és rengeteg idő, amelyet weboldalunk betöltésével nyertünk.

Hogyan tekinthető meg az eredeti méretre csökkentett kép?

Eddig a pontig jeleztük, hogyan lehet csökkenteni az interneten megjelenő képet, de Ahhoz, hogy a kép eredeti méretben és kiváló minőségben jelenjen meg, össze kell kapcsolnunk a nagy képet a kicsivel úgy, hogy az utóbbira kattintva megmutatja nekünk a képet teljes pompájában. Ezenkívül érdemes megjegyezni, hogy tartalmaznunk kell a target = "_ blank" attribútumot, hogy az új ablakban nyissa meg a képet.

Bármilyen javaslat? És ha tetszett, ossza meg!

Ha hibát talál a cikkben, vagy bármilyen javítandó pontot talál, vagy ha tetszett, kérjük, hagyjon megjegyzést. És megoszthatja a cikk alatti gombok segítségével.