Theory
એ poster જે ક્યારેય દેખાયું જ નહીં
FestConnect ના home page ની શરૂઆત ચમકતા event ના poster થી થવી જોઈએ. તમે એ ઉમેરો છો, refresh કરો છો, અને તૂટેલા ચિત્રનું નાનું નિશાન દેખાય છે, બીજું કશું નહીં. ધીમા phone પર બાકીનું પાનું પણ વસ્તુઓ load થતાં ઠેકડા મારે છે.
આ બધું એક જ tag નાં ચાર attributes નિયંત્રિત કરે છે. <img> tag ને કોઈ સામગ્રી નથી અને બંધ કરતું tag નથી, એને જે જોઈએ એ બધું એનાં attributes પર સવારી કરે છે: src, alt, width/height, અને style.
Theory
ફોટો આવે એ પહેલાં ટાંગેલી ચોકઠી
ચોકઠાવાળો ફોટો ટાંગતાં તમે ત્રણ વસ્તુ નક્કી કરો છો: અંદર કયો ફોટો જશે (src), જે જોઈ ન શકે એમના માટે એક વર્ણન (alt), અને ચોકઠી કેટલી મોટી છે (width/height). ચોકઠીનું માપ પહેલાં નક્કી કરવાનો અર્થ છે કે ફોટો છપાઈને અંદર સરકે એ પહેલાં જ દીવાલની ગોઠવણ નક્કી થઈ જાય છે. Web નું ચિત્ર એ જ રીતે કામ કરે છે: માપ અનામત રાખો, પછી ચિત્ર આવીને એ ભરી દે.
Theory
ચાર attributes
- src: ચિત્રની file નો રસ્તો. Links જેવો જ relative/absolute નો નિયમ: તમારી પોતાની file માટે
images/poster.jpg, કે પૂરુંhttps://...URL. - alt: વૈકલ્પિક લખાણ. ચિત્ર નિષ્ફળ જાય તો દેખાય છે, અને અંધ વાપરનારાઓને વાંચી સંભળાવાય છે. દરેક અર્થપૂર્ણ ચિત્રને ખરેખરું alt નું લખાણ આપો.
- width અને height: pixels માં માપ (ફક્ત આંકડો, attribute માં
pxની જરૂર નથી). બંને ગોઠવવાથી જગ્યા અનામત રહે છે અને પાનું ઠેકડા મારતું અટકે છે. - style: વધારાની વસ્તુઓ માટે inline CSS, જેમ કે
style="border-radius:8px".
Practical
FestConnect નું poster
<img
src="images/fest-poster.jpg"
alt="Ganpat University TechFest 2026, 12 to 14 March"
width="600"
height="300"
style="border-radius: 8px;">
<!-- Note: <img> is self-closing. There is no </img>. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
alt લખવાનું શા માટે?
તમારા પોતાના laptop પર ચિત્ર બરાબર દેખાતું હોવા છતાં 'Ganpat University TechFest 2026' નું alt નું લખાણ ખરેખર વપરાય એવી બે જુદી પરિસ્થિતિ આપો. વિચારો, પછી તપાસો.
Show the answer
1. ચિત્ર load થવામાં નિષ્ફળ જાય (ખોટો રસ્તો, ધીમું કે તૂટેલું network): browser એની જગ્યાએ alt નું લખાણ દેખાડે છે, જેથી મુલાકાતીને હજી ખબર પડે કે ત્યાં શું હોવાનું હતું. 2. Screen reader વાપરતો અંધ વ્યક્તિ: software એ alt મોટેથી વાંચે છે, કારણ કે એ ચિત્ર જોઈ શકતું નથી. (વધારામાં: search engines પણ alt વાંચે છે, જે પાનાના ક્રમમાં મદદ કરે છે.) એટલા માટે જ પરીક્ષાઓ ખૂટતા alt ને નાની નહીં પણ ખરેખરી accessibility ની ભૂલ ગણે છે.
Quiz
ધીમા phone પર, poster નું load થવાનું પૂરું થાય ત્યારે FestConnect ના પાનાની સામગ્રી અચાનક નીચે ઠેકડો મારે છે. કયો ઉકેલ આ ઠેકડો અટકાવે છે?
- <img> પર width અને height બંને ગોઠવો જેથી એની જગ્યા load થતાં પહેલાં અનામત રહે
- ચિત્ર ઝડપથી load થાય એ માટે alt attribute કાઢી નાખો
- </img> નું બંધ કરતું tag ઉમેરો
- src ને relative રસ્તાથી બદલીને absolute URL કરો
Show the answer
<img> પર width અને height બંને ગોઠવો જેથી એની જગ્યા load થતાં પહેલાં અનામત રહે
ચિત્રને નિશ્ચિત width અને height આપવાથી એની પેટી તરત જ અનામત થઈ જાય છે, એટલે ચિત્ર આવે ત્યારે કશું ખસતું નથી (A). alt (B) ની load થવાની ઝડપ પર શૂન્ય અસર છે. img ને બંધ કરતું tag હોતું જ નથી (C), એટલે </img> સાવ ખોટું છે. રસ્તાની શૈલી (D) બદલે છે કે file ક્યાંથી આવે છે, ગોઠવણનો ઠેકડો નહીં.
Watch out
img ની સામાન્ય ભૂલો
- alt ભૂલી જવું, કે
alt="image"લખવું. Alt એ ચિત્રનું વર્ણન કરવું જોઈએ ('event નું poster'), image શબ્દ દોહરાવવો નહીં. - `</img>` લખવું.
<img>એ void element છે: બંધ કરતું tag નહીં.<br>અને<hr>માટે પણ એ જ સાચું છે. - ફક્ત width ગોઠવવું. જો તમે width ગોઠવો પણ height નહીં (કે ઊલટું), તો browser બીજાનું અનુમાન કરે છે, જે ચિત્રને વિકૃત કરી શકે છે અને છતાં ગોઠવણને ઠેકડો મારવા દે છે. બંને ગોઠવો, કે એકેય નહીં અને CSS ને સંભાળવા દો.
Theory
આગળ: પોતાનું માપ જાતે બદલતાં ચિત્રો
નિશ્ચિત width="600" એ laptop પર સરસ લાગે છે પણ phone પર બહાર નીકળી જાય છે. Unit 2 માં Bootstrap નો img-fluid class ચિત્રને કોઈ પણ પડદામાં આપોઆપ સંકોચીને બેસાડે છે. તમે હમણાં શીખ્યા એ સાદા <img> નો એ responsive સુધારો છે; src અને alt તો તમારે અહીં છે એ જ રીતે જોઈશે.
Summary
Key takeaways
- <img> ચિત્ર મૂકે છે અને self-closing છે: </img> નહીં.
- src એ file નો રસ્તો છે (તમારી files માટે relative, બીજાની માટે absolute), links જેવો જ નિયમ.
- ચિત્ર નિષ્ફળ જાય ત્યારે alt દેખાય છે અને screen readers એને વાંચે છે: દરેક અર્થપૂર્ણ ચિત્રને ખરેખરું alt નું લખાણ આપો.
- width અને height (સાદા pixel ના આંકડા) માપ ગોઠવે છે; બંને ગોઠવવાથી જગ્યા અનામત રહે છે અને ગોઠવણનો ઠેકડો અટકે છે.
- style એ ગોળ ખૂણા જેવી વધારાની inline CSS ઉમેરે છે.
- Memory hook: ચોકઠી અનામત રાખો, પછી ફોટો અંદર સરકે.