Ekitabo ky’okulongoosa ebifaananyi ku mukutu

Okutegeera Enkola z’Ebifaananyi bya Web

Okulonda ensengeka y’ebifaananyi entuufu gwe musingi gw’okulongoosa omukutu. Buli nkola ekola ebigendererwa eby’enjawulo era erimu ebirungi eby’enjawulo. JPEG nnungi nnyo ku bifaananyi n’ebifaananyi ebizibu ebirina langi nnyingi, ng’ewa emigerageranyo gy’okunyigiriza emirungi ennyo naye ku muwendo gw’okufiirwa. PNG esukkulumye ku bifaananyi ebirina obwerufu, empenda ezisongovu, n’embala za langi entono, ekigifuula etuukiridde ku bubonero n’ebifaananyi, wadde nga sayizi za fayiro zitera okuba ennene. WebP ekiikirira omulembe oguddako ogw’ebifaananyi by’omukutu, egaba okunyigirizibwa okw’ekika ekya waggulu bw’ogeraageranya ne JPEG ne PNG zombi ate nga ekuuma omutindo ogwa waggulu. Ewagira byombi okunyigiriza okufiirwa n’okufiirwa, obwerufu, n’okulaga ebifaananyi ebirina obulamu. Wabula, obuwagizi bwa browser, wadde nga bugazi, si bwa bonna. AVIF mpya n’okusingawo, ng’ewa emiwendo egy’enjawulo egy’okunyigiriza okutuuka ku bitundu 50% ebitono okusinga JPEG, naye okwettanira browser kukyakula. Ku bifaananyi bya vector nga logos, icons, n’ebifaananyi ebyangu, SVG tewangulwa. Nga ensengeka ya vekita, ebifaananyi bya SVG bikula obutasalako awatali kufiirwa mutindo era bitera okuba n’obunene bwa fayiro obutonotono. Era zikyusibwakyusibwa nga zirina koodi n’okuwagira enkolagana, ekizifuula ezitali za bulijjo ez’enjawulo mu kukola omukutu ogw’omulembe.

• JPEG: Esinga kukwata bifaananyi n’ebifaananyi ebizibu
• PNG: Kirungi nnyo ku bifaananyi ebirina obwerufu n’empenda ezisongovu
• WebP: Enkola ey’omulembe ng’erina okunyigirizibwa okw’ekika ekya waggulu
• AVIF: Enkola empya nga erina okunyigirizibwa okw’enjawulo
• SVG: Etuukiridde ku bifaananyi bya vector ebisobola okulinnyisibwa n’ebifaananyi

Obukodyo bw’okunyigiriza ebifaananyi n’okuteekawo omutindo

Okutegeera okunyigiriza kikulu nnyo mu kugeraageranya omutindo gw’ebifaananyi n’obunene bwa fayiro. Okunyigiriza okufiirwa, okukozesebwa ensengeka nga JPEG, kuggyawo data y’ebifaananyi enkalakkalira okukendeeza ku sayizi ya fayiro. Ekikulu kwe kuzuula ekifo ekiwooma nga okunyigirizibwa kusinga ate nga kukuuma omutindo gw’okulaba ogukkirizibwa. Ku bifaananyi ebisinga ku mukutu, okuteekawo omutindo gwa JPEG wakati wa 75-85% kiwa bbalansi ennungi ennyo, wadde nga kino kiyinza okwawukana okusinziira ku biri mu bifaananyi. Okunyigiriza okutaliimu kufiirwa, okukozesebwa PNG n’ebifaananyi ebimu ebya WebP, kukendeeza ku sayizi ya fayiro awatali kufiirwa kwonna kwa mutindo. Wadde nga kino kiwulikika nga kirungi nnyo, fayiro ezitaliimu kufiirwa zitera okuba ennene nnyo okusinga bannaabwe abafiirwa. Kino kifuula okunyigirizibwa okutaliimu kufiirwa okusinga okutuukagana n’ebifaananyi omutindo we gusinga, gamba ng’ebifaananyi by’ebintu eby’obusuubuzi ku yintaneeti oba ebifaananyi ebigenda okwongera okulongoosebwa. Obukodyo obw’omulembe obw’okunyigiriza mulimu okutikka JPEG okugenda mu maaso, okulaga ebifaananyi mu kuyita okw’omutindo okweyongera, ne chroma subsampling, ekikendeeza ku mawulire ga langi amaaso g’abantu ge gatakwata nnyo. Ebikozesebwa eby’omulembe nabyo biwa okulongoosa mu kutegeera, okutereeza okunyigirizibwa okusinziira ku eriiso ly’omuntu kye lisinga okwetegereza, emirundi mingi ne bituuka ku bivaamu ebirungi okusinga ensengeka z’omutindo ez’ennono.

Okulongoosa n’okulongoosa ebifaananyi mu ngeri ey’okuddamu

Web design ey’omulembe yeetaaga ebifaananyi ebirabika obulungi ku buli kimu okuva ku ssimu ez’amaanyi okutuuka ku monitor za 4K. Ekikulu kwe kutegeera pixel density n’obusobozi bw’ekyuma. Ekifaananyi ekigazi 1200px kiyinza okuba ekituufu okulaba ku desktop, naye kisukkiridde ku screen y’essimu eya 375px, kwonoona bandwidth n’okukendeeza ku biseera by’okutikka. Okukola sayizi z’ebifaananyi eziwera kikakasa nti buli kyuma kifuna ekifaananyi ekituufu. Ebifaananyi ebiddamu bikozesa HTML’s srcset attribute ne picture element okuweereza ebifaananyi eby’enjawulo okusinziira ku sayizi ya screen n’obulungi. Enkola eno esobola okukendeeza ku muwendo gw’ebifaananyi ebitundu 50% oba okusingawo eri abakozesa essimu. Okugeza, oyinza okuweereza ekifaananyi kya 400px ku byuma ebikozesebwa ku ssimu, 800px ku tabuleti, ne 1200px ku screen za desktop. Ebintu ebiraga ebifaananyi ebinene nga Retina screens byetaaga ebifaananyi eby’obulungi bwa 2x okusobola okulabika obulungi. Okugerageranya obunene bw’ebifaananyi nakyo kirina okulowooza ku bipimo byennyini eby’okwolesebwa ku mukutu gwo. Ekifaananyi ekiragibwa ku bugazi bwa 300px tekyetaagisa kuba na bugazi bwa 1200px, awatali kulowooza ku screen y’omukozesa. Bulijjo longoosa ebifaananyi okusinziira ku sayizi yabyo entuufu ey’okulaga, era lowooza ku kukozesa CSS okukwata okupima okutono okusinga okuweereza ebifaananyi ebinene ennyo.

Enkola z’okukosa enkola y’emirimu n’okutikka

Ebifaananyi bikwata nnyo ku nkola y’omukutu, ebiseera ebisinga bikiikirira 50-70% ku buzito bw’olupapula bwonna. Ebifaananyi ebinene ebitali birongooseddwa bye bimu ku bikulu ebivunaanibwa emikutu gy’empuliziganya okutikka mpola, ekikosa butereevu obumanyirivu bw’abakozesa n’ensengeka y’emikutu gy’okunoonya. Buli sikonda ey’okwongerako ey’obudde bw’okutikka esobola okwongera ku miwendo gy’okubuuka okutuuka ku bitundu 32%, ekifuula okulongoosa ebifaananyi ekintu ekikulu ennyo mu bizinensi. Lazy loading nkola ya maanyi elwawo okutikka ebifaananyi okutuusa nga banaatera okuyingira mu viewport. Kino kitereeza nnyo ebiseera by’okutikka empapula mu kusooka, naddala ku mpapula ezizitowa ebifaananyi. Browser ez’omulembe ziwagira okutikka kwa lazy enzaaliranwa n’ekintu loading=”lazy”, ate amaterekero ga JavaScript gawa okufuga okw’omulembe n’obuyambi bwa browser obugazi. Enkola z’okutikka ebifaananyi nga tezinnabaawo nazo zisobola okutumbula obumanyirivu bw’omukozesa. Ebifaananyi ebikulu waggulu w’ekifo birina okulongoosebwa okusobola okutikka amangu, ate ebifaananyi wansi w’okubikka bisobola okutikkibwa mu ngeri ey’obugayaavu. Lowooza ku kukozesa ebifo eby’ebifaananyi eby’omutindo ogwa wansi (LQIP) oba ebikolwa eby’okufuukuuka okutuuka ku bitangaavu okusobola okuwa okuddamu okw’amangu okulabika ng’ebifaananyi eby’obulungi obujjuvu bitikka. Enkodi ya JPEG egenda mu maaso esobozesa ebifaananyi okulabika amangu mu mutindo ogwa wansi, olwo ne bisongovu nga data etikka.

SEO n’okulowooza ku kutuuka ku bantu

Yingini z’okunoonya zitwala sipiidi y’olupapula ng’ensonga ekwata ku nsengeka, ekifuula okulongoosa ebifaananyi okuba ekikulu ennyo mu buwanguzi bwa SEO. Ebifaananyi ebirongooseddwa obulungi biyamba empapula okutikka amangu, ekiyamba mu nsengeka ennungi ey’okunoonya n’obumanyirivu bw’abakozesa. Okugatta ku ekyo, amannya ga fayiro z’ebifaananyi n’ebiwandiiko bya alt biwa ensonga ey’omuwendo eri emikutu gy’okunoonya, okuyamba ebirimu byo okulabika mu bivudde mu kunoonya ebifaananyi. Okutuuka ku bantu kyetaagisa ebiwandiiko bya alt ebilowoozebwako ebinnyonnyola ebirimu mu bifaananyi eri abasoma ku ssirini n’abakozesa abatalaba bulungi. Ebiwandiiko bya Alt birina okuba nga binnyonnyola naye nga bimpimpi, nga binnyonnyola ebiri mu kifaananyi n’ekigendererwa kyakyo mu nsonga. Ku bifaananyi eby’okwolesa ebitayongera muwendo gwa mawulire, kozesa ebifaananyi bya alt empty (alt=””) okulemesa abasomi ba screen okubilangirira mu ngeri eteetaagisa. Structured data ne schema markup bisobola okutumbula engeri emikutu gy’okunoonya gye gitegeeramu n’okulaga ebifaananyi byo. Sitemaps z’ebifaananyi entuufu ziyamba emikutu gy’okunoonya okuzuula n’okuwandiika ebifaananyi byo mu ngeri ennungi. Enkola z’okutuuma fayiro amannya zirina okuba ez’ennyonnyola era nga zirimu ebigambo ebikulu nga zikwatagana, okwewala amannya ag’enjawulo nga “image1.jpg” nga tuwagira amannya agannyonnyola nga “red-running-shoes-front-view.jpg”.