Ma átfogóan áttekintjük a webes képekkel való munkát. Tudom, hogy erről a témáról minden meg van írva, de megpróbálom kiegészíteni nézetemet és összefoglalni a különféle információkat.
Mit kell követni a webes képek kiválasztásakor?
1) Szerzői jog
Mindenekelőtt tiszteletben kell tartani a képek szerzői jogait. A gyakorlatban ez azt jelenti, hogy ha nincs saját fényképe, akkor a fotóbankok fényképeit kell használnia. Vagy fizetős változat közül választhat: egyszerűen megvásárolhatja a képet, vagy választhat ingyenes fotóbankok közül, amelyeket szintén kereskedelmi célokra szánnak. Ez kereskedelmi célú felhasználás, amikor képet helyez el a hirdetésben az eladások növelése érdekében. Például nem ugyanaz a kép a blogodban.
Ingyenes stock fotók:
Az ingyenes fotóbankok további listáját itt találja: https://jurosko.sk/obrazky-zadarmo/
Fizetett fotóbankok:
Minden képnél ellenőrizze, hogy a licenc milyen típusú.
2) Fotóméret
A fényképeket át kell méretezni, mielőtt felvehetnék őket az internetre. Az alábbiakban megtalálja a fényképek átméretezésének módját, miután hozzáadta őket az internethez.
Nagy képek pixelben (a fekvő hely elegendő 2000px, kb Max. 600 képpont) max 200 - 300 kB-ig egynek.
A kisebb képek ideálisak 100kB-ig és kb 1000x1000px max.
Ügyeljen arra, hogy ne legyenek olyan képek a weboldalon, amelyek vannak náluk 1 MB és több. A nagy képek szintén lassítják a weboldal betöltését, legyen óvatos, különösen a mobiltelefonokkal.
Javaslom, hogy ugyanolyan méretű, feltétlenül magas és ideális szélességű képeket helyezzenek be diavetítésbe (mozgó képek, amelyek változnak, általában a kezdőlapon/képforgatón használják). Ha a diavetítés nincs különféle beállításokra hangolva, akkor valószínűleg nem fog magasra ugrani. Ez nemkívánatos hatást vált ki, amikor az internet a képek magasságának megfelelően "ugrik" felfelé és lefelé.
Szintén célszerű színes képeket használni egy diavetítés során, amelyek egyidejűleg harmonizálódnak a hálóval. A sokszínű képek, míg az egyik sötét lesz, a másik világos és hasonlók nem hozzák létre az oldal integritásának hatását, ezért jó belegondolni.
Típus: Ha a képek több változatát tölti fel az internetre, és másképp méretezi át őket, akkor érdemes azokat a képeket törölni a médiatárból, hogy azokat pótolja. Az is egyértelműbb lesz, ha valamit találni kell ott, amikor nincs egy 10. cikk. Ráadásul legalább nem fogja feleslegesen elárasztani a helyet a tárhelyen.
Képszerkesztő programok
Ha az Ön által használt képszerkesztő program rendelkezik a Mentés webre lehetőséggel, mindenképpen mentse el ebben a formátumban (például Photoshop).
A képek szerkesztésére fejlettebb lehetőségek is tartoznak Zsinór - https://www.gimp.org/ Alapvetően hasonló a Photoshophoz, és ingyenes.
A szakasz egyértelműsége miatt itt nem lehet elemezni a programokat, ezért csak valami egyszerűbbet és praktikusabbat mutatunk be.
IrfanView
Ezt az alkalmazást letöltheti: https://www.irfanview.com/
Ebben a programban könnyedén szerkeszthet több képet egy könyvtárban. Ez azt jelenti, hogy nem fogjuk manuálisan szerkeszteni a képeket egyenként, de úgy állítjuk be a szabályokat, hogy a program automatikusan beállítsa az összes kiválasztott képhez.
Először a szerkeszteni kívánt képeket egy könyvtárba tesszük a PC-n, és ott egy új kis könyvtárat készítünk (1. kép).
Kép 1 - Könyvtár előkészítése képekhez.
Nyissa meg az IrfanView alkalmazásban megjelenő bármely képet, nyomja meg a gombot - vagy válasszon a Fájl menüből - Kötegelt átalakítás/Átnevezés (2. kép).
Kép 2 - Kötegelt konverzió beállításai.
Ezután a sz. Kép szerint állítottuk be a dolgokat. 3:
Kép 3 - A kötegelt átalakítás egyes lépései.
1. pont - választjuk kötegelt átalakítás és fájlok átnevezése.
2. pont - jelölje meg a fájlokat az adott könyvtárban
3. pont - kattintson a gombra Az összes hozzáadása, automatikusan hozzáadja a fájlokat a listához.
4. pont - az Opciók gombra kattintva beállítjuk kötegelt átnevezési beállításokat és a Név minta
A 4. ábra szerint a mintát $ N_sm értékre állítottuk be, ami azt jelenti, hogy a kicsinyített fájlt eredeti nevével nevezzük el, és kiegészítjük "_sm" jellel. Fontos megőrizni eredeti nevét, ha így akar maradni. Természetesen hívhatod másként is.
Kép 4 - Képek átnevezése.
Aztán beállítottunk kimeneti formátum és jpg. Kattintson a gombra Lehetőségek, a kapott kép minőségét százalékban módosíthatja (5. ábra). 100% -ot hagyhatunk az elején, kevesebbet adnánk, ha állóképeket generálna.
Kép 5 - A kimeneti formátum beállítása.
Kattintson a Speciális beállítások gombra, és válassza ki a méretek csökkentésének módszerét (6. ábra). A méret változtatható százalékban vagy pixelenként (cm vagy hüvelyk). Ebben a példában átméretezzük a maximális méretet 900 × 900 px. Beállíthatjuk a képfelbontás értékét is - dpi. A DPI 72-es méret elegendő a weboldal számára, végül az OK gombra kattintva erősítjük meg.
Kép 6 - Képméret beállítások.
Még egyszer ellenőrizzük a könyvtárhoz vezető utat a kisebb fotókkal. Kattintson a Használja a currect look in directory alkalmazást - ez betölti a könyvtárat, ahol vannak ezek a fényképek, kattintson a Tallózás gombra, és kiválaszt egy előre elkészített könyvtárat a kis képek kiadásához (3. ábra, 5. pont).
Alternatív megoldásként játszhat a beállításokkal, és ellenőrizheti az 5. kép jelölőnégyzetét. A fájlméret beállítása 65,00 KB (RIOT). Ez szintén csökkenti a képek méretét az interneten. Meg kell próbálni, hogy mennyit kell változtatni, hogy a képek pixelekben elég nagyok és kB-ban elég kicsiek legyenek.
Ha minden be van állítva, a Start batch gombra kattintva megerősítjük az egész folyamatot.
A képen. 7, akkor látjuk, hogy a képek kb. 100kB. Így felkereshetik az internetet.
Kép 7 - Átméretezett képek.
Összegzésként szeretném hangsúlyozni, hogy egy nagyobb, körülbelül 1000 képpont méretű oldal mérete elegendő az internetes hétköznapi képekhez. A teljes területű diavetítésekhez kb. 1900 képpontos szélességet hagyunk.
A kivágás és átméretezés típusát a Windows Paint programban is nagyon egyszerűen módosíthatja. De már nem játszhat a dpi minőség beállításával és így tovább. De ez elég néhány képhez.
3) Képek leírása
Hívja be a képeket cím, alt a leírás Amint feltöltik őket az internet multimédiájába - SEO szempontjából a keresőmotoroknak jó.
A cím a kép neve, az alt az a leírás, amelyet a robot lát, amikor a webről van szó, és a leírás akkor jelenik meg, amikor a képet egy rákattintás után egy kibővített ablakban látja (ez, de a sablontól is függ, ill. használt galéria).
Ugyanakkor képzelje el, hogy webhelye olvas vak ember és számítógépes gépe elolvassa a képleírásokat. Mit gondolsz, mi fogja tudni, mi van a képen, ha a neve DSC1234.jpg, vagy amikor gyógynövény-on-recept.jpg-nek hívják?
Írja az Alt, a cím és a leírás szöveget, azaz ékezeteket. De a képek neve itt: fájl elnevezése ír diakritikusok és szóközök nélkül, csak ábécés karaktereket, számokat, aláhúzásokat vagy kötőjeleket használjon.
Ne használja egyszerre hosszú nevek (nem lehet hosszabb 30 karakternél). A hosszú névvel rendelkező fájlok áthelyezési problémája lehet.
Tipp neked: Somstrasnedlhynazov-obrazku-kterýynevie-kedysamaskoncit-acimaestepokracovat-niejeozajuplnefajn-napad.jpg.
A képaláírásokat be kell állítani Most felvételkor, mert ebben az esetben "majd később"jelentése"soha".
4) Optimalizálja a képeket közvetlenül az interneten
Ha már vannak feltöltött képei az internetre, optimalizálhatja azokat a JPEG és PNG képek tömörítése plugin segítségével is (https://wordpress.org/plugins/tiny-compress-images/)
Ehhez azonban rendelkeznie kell egy fiókkal a webhelyükön (https://tinypng.com), és össze kell kapcsolnia egy webhelyen található bővítménnyel.
Ha zavarja a bejelentkezés, akkor lehetséges a plugin használata Smush, amely bejelentkezés nélkül működik. (https://wordpress.org/plugins/resmushit-image-optimizer/)
A felajánlott bővítmények közül csak egyet válasszon. Nincs értelme, hogy egy művelethez különböző pluginok legyenek az interneten. Megint az az elv, hogy minél több van, és minél kevesebb plugin van, annál jobb.
Ma nem vázoljuk a pluginok beállításának témáját. Úgy gondolom, hogy a szükséges információkat - észrevételei és észrevételei alapján is - fokozatosan feldolgozom itt vagy a Facebook-on lévő csoportomban.
5) Képméretek - indexképek kivágása WordPress-ben
A különböző sablonok képmérete eltérő. Egyáltalán nem szabványosított, így minden tervező és fejlesztő eldöntheti, hogy a sablonokban milyen képméreteket használjon. Ugyanakkor kétféle módon lehet levágni őket, az egyiket nehéz pontosan a méretre vágni, a másikat pedig csak a nagyobb oldal szerint csökkentik az előnézet kívánt méretére.
E módszerek azonban egyikük sem adhatnak teljesen szép nézeteket, mint amire szükségünk lenne. Ezért vannak olyan beépülő modulok, amelyek elősegíthetik a felhasználót az indexképek szerkesztésében.
Az egyik a plugin Levágás-miniatűrök (https://en.wordpress.org/plugins/crop-thumbnails/)
Ebben a beépülő modulban szükség szerint beállíthatja és manuálisan kivághatja a használt képek egyes típusait. Nem mindig szükséges minden típusú méretet levágni. Csak annyit kell tennie, hogy csak annak a méretnek megfelelő kivágást válasszon, amely nem felel meg az oldalon.
Kép 8 - Crop-Thumbnails plugin és képbeállítások közvetlenül a wordpress-ben.
Ez közvetlenül a cikkben tehető meg a gombra kattintva Körbevág a kiemelt kép. Ha a multimédia listáján szerepel, akkor ezt minden képhez külön is megteheti (8. ábra). Megjelenik egy ablak, amelyben kiválaszthatja, hogy melyik dimenziótípust szeretné módosítani (9. ábra). Kiválasztása után szerkesztheti a dimenziót a jobb oldalon. Ezután kiválasztja a kép megfelelő részét a kivágáshoz. Kattintson a művelet megerősítéséhez Termés mentése és végül frissítse a cikket.
Kép 9 - Crop-Thumbnails plugin - képek kivágása
A változás életbe lépéséhez a webhely használatát tükröznie kell Ctrl + F5. Bonyolultabb esetben szükség van a gyorsítótár törlésére a gombok segítségével Ctrl + Shift + Del és törölje a gyorsítótárat is.
6) Galériák wordpress-ben
A galériákkal jó foglalkozni az Imagely https://www.imagely.com/ oldalon keresztül - az alapverzió egy ingyenes plugin a wp https://wordpress.org/plugins/nextgen-gallery webhelyen. Vagy használjon bátran egy másik galéria bővítményt.
A képek kérdése nagyon széles. Nem volt időnk olyan kérdéseket érinteni, mint például: hogyan lehet egyáltalán hozzáadni képeket a szerkesztőhöz, hogyan lehet linket hozzáadni egyetlen kép nagyításához, hogyan lehet galériákat létrehozni wordpress multimédia segítségével vagy külön könyvtárak szerint, például a Nextgen galéria segítségével plugin, hogyan lehet létrehozni egy lightbox effektust, ha a témád nem támogatja azt, és csak külön képre hivatkozik stb.
Ezeket a témákat a blogban fogom megvitatni.
A következő cikkekben olyan gyakori problémák megoldásait készítem elő, mint például: hogyan kell működni az ftp-vel, mit kell tenni, ha a weboldalon üres képernyő vagy végzetes hiba van, stb Alternatív megoldásként nyugodtan írjon nekem e-mailt, ami érdekli, és szívesen válaszolok.