html માં ઇમેજનું કદ જુદી જુદી રીતે કેવી રીતે ગોઠવવું

શું તમે તમારા વેબ પેજ પર એક છબી દાખલ કરવા માંગો છો, પરંતુ તમે નથી જાણતા કે ડિઝાઇનને ફિટ કરવા માટે તેનું કદ કેવી રીતે ગોઠવવું? શું તમે ઈમેજની પહોળાઈ અને ઊંચાઈને સંશોધિત કરવા માટે HTML ટૅગ્સ અને લક્ષણોનો ઉપયોગ કેવી રીતે કરવો તે શીખવા માંગો છો? શું તમે દરેક પદ્ધતિના ફાયદા અને ગેરફાયદા જાણો છો? જો જવાબ હા છે, તો આ લેખ તમારા માટે છે.

આ લેખમાં, અમે તમને html માં ઈમેજની સાઈઝ કેવી રીતે એડજસ્ટ કરવી તે શીખવવા જઈ રહ્યા છીએ, વિવિધ વિકલ્પો અને સંસાધનોનો ઉપયોગ કરીને જે તમને તમારી વેબસાઇટ માટે આકર્ષક અને ઑપ્ટિમાઇઝ છબીઓ બનાવવાની મંજૂરી આપશે. અમે તમને દરેક વિકલ્પના ફાયદા અને ગેરફાયદા તેમજ તમારા કાર્યને સુધારવા માટે કેટલીક ટિપ્સ અને સારી પદ્ધતિઓ પણ બતાવવા જઈ રહ્યા છીએ.

html માં ઇમેજ શું છે અને તેને કેવી રીતે દાખલ કરવી

html માં ઇમેજ એ એક તત્વ છે જે તમને પ્રદર્શિત કરવાની મંજૂરી આપે છે ઑબ્જેક્ટનું દ્રશ્ય પ્રતિનિધિત્વ, વ્યક્તિ, લેન્ડસ્કેપ અથવા બીજું કંઈપણ. html માં ઇમેજ દાખલ કરવા માટે ટેગનો ઉપયોગ થાય છે , જે ખાલી ટેગ છે, એટલે કે. જેનો કોઈ બંધ નથી.

લેબલ તેમાં ઘણી વિશેષતાઓ છે જે તમને છબીની માહિતી અને લાક્ષણિકતાઓનો ઉલ્લેખ કરવાની મંજૂરી આપે છે. સૌથી મહત્વપૂર્ણ છે:

• src: એ એટ્રીબ્યુટ છે જે ઈમેજ ફાઈલનો પાથ અથવા સરનામું દર્શાવે છે. તે સંબંધિત માર્ગ હોઈ શકે છે (સમાન વેબસાઇટની અંદર) અથવા સંપૂર્ણ પાથ (બીજી વેબસાઇટ પર). દાખ્લા તરીકે: ક્યાં તો .
• Alt: એ એટ્રિબ્યુટ છે જે ઇમેજના વૈકલ્પિક ટેક્સ્ટને સૂચવે છે, એટલે કે, જ્યારે ઇમેજ લોડ કરી શકાતી નથી અથવા સ્ક્રીન રીડરનો ઉપયોગ કરવામાં આવે છે ત્યારે તે ટેક્સ્ટ પ્રદર્શિત થાય છે. તે ફરજિયાત લક્ષણ છે અને છબીની સામગ્રી અથવા કાર્યનું વર્ણન કરવું આવશ્યક છે. દાખ્લા તરીકે: .
• શીર્ષક: એ એટ્રીબ્યુટ છે જે ઈમેજનું શીર્ષક દર્શાવે છે, એટલે કે, જ્યારે કર્સર હોવર કરવામાં આવે ત્યારે ટેક્સ્ટ પ્રદર્શિત થાય છે છબી વિશે. તે વૈકલ્પિક લક્ષણ છે અને વૈકલ્પિક ટેક્સ્ટ કરતાં અલગ હોઈ શકે છે. દાખ્લા તરીકે: .

પહોળાઈ અને ઊંચાઈના લક્ષણોનો ઉપયોગ કરીને કદને કેવી રીતે સમાયોજિત કરવું

html માં ઇમેજના કદને સમાયોજિત કરવાની સૌથી સરળ રીતોમાંની એક પહોળાઈ અને ઊંચાઈના લક્ષણોનો ઉપયોગ કરવાનો છે) જે તમને પિક્સેલ્સમાં ઇમેજની પહોળાઈ અને ઊંચાઈનો ઉલ્લેખ કરવાની મંજૂરી આપે છે. દાખ્લા તરીકે:

આ લક્ષણોમાં કેટલાક ફાયદા અને ગેરફાયદા છે:

• ફાયદા:
  • તેઓ ઉપયોગમાં સરળ છે અને કોઈપણ વધારાના જ્ઞાનની જરૂર નથી.
  • તેઓ તમને ઇમેજ લોડ કરતા પહેલા તેના માટે જરૂરી જગ્યા આરક્ષિત કરવાની મંજૂરી આપે છે, જે લોડ કરતી વખતે પૃષ્ઠને કૂદકા મારવા અથવા બદલવાથી અટકાવે છે.
  • નો વિકલ્પ આપે છે છબીના કદને ડિઝાઇનમાં અનુકૂલિત કરો મૂળ ફાઇલમાં ફેરફાર કર્યા વિના પૃષ્ઠની.
• ગેરફાયદા:
  • જો મૂળ કદ સિવાયના મૂલ્યોનો ઉપયોગ કરવામાં આવે તો તેઓ છબીના પાસા રેશિયો અથવા ગુણવત્તાને વિકૃત કરી શકે છે.
  • તે વપરાશકર્તાની સ્ક્રીન અથવા ઉપકરણના કદ અનુસાર છબીના કદને સમાયોજિત કરવાની મંજૂરી આપતું નથી.
  • તેઓ અસર લાગુ કરવાની મંજૂરી આપતા નથી અથવા છબી માટે વધારાની શૈલીઓ.

CSS નો ઉપયોગ કરીને html માં ઇમેજનું કદ કેવી રીતે બદલવું

બીજી રીત વધુ અદ્યતન અને લવચીક HTML માં ઇમેજના કદને સમાયોજિત કરવા માટે CSS (કેસ્કેડીંગ સ્ટાઇલ શીટ્સ) નો ઉપયોગ કરવો છે, જે એક એવી ભાષા છે જે તમને HTML તત્વો પર શૈલીઓ વ્યાખ્યાયિત કરવા અને લાગુ કરવાની મંજૂરી આપે છે. CSS નો ઉપયોગ કરવા માટે તમે ટેગ નો ઉપયોગ કરી શકો છો HTML દસ્તાવેજની અંદર, .css એક્સ્ટેંશન સાથેની બાહ્ય ફાઇલ. દાખ્લા તરીકે:

img { width: 500px; height: 600px; } ક્યાં તો

CSS નો ઉપયોગ કરવાના કેટલાક ફાયદા અને ગેરફાયદા છે:

• ફાયદા:
  • ઑબ્જેક્ટ-ફિટ પ્રોપર્ટી અથવા calc() ફંક્શનનો ઉપયોગ કરીને, તમને ઇમેજના કદને પ્રમાણસર ગોઠવવાની મંજૂરી આપે છે.
  • ચાલો છબીના કદને સમાયોજિત કરીએ સંબંધિત એકમો (%, em, vw, vh) અથવા મીડિયા ક્વેરીનો ઉપયોગ કરીને વપરાશકર્તાની સ્ક્રીન અથવા ઉપકરણના કદના આધારે.
  • છબી પર વધારાની અસરો અથવા શૈલીઓ લાગુ કરી શકાય છે, જેમ કે બોર્ડર્સ, પડછાયાઓ, ફિલ્ટર્સ અથવા રૂપાંતરણ.
• ગેરફાયદા:
  • CSS ભાષાના વધુ જ્ઞાન અને નિપુણતાની જરૂર છે.
  • તકરાર અથવા અસંગતતા પેદા કરી શકે છે પૃષ્ઠ અથવા છબી પર લાગુ અન્ય શૈલીઓ સાથે.
  • જો ઘણી બધી શૈલીઓ અથવા અસરોનો ઉપયોગ કરવામાં આવે તો તે પ્રદર્શન અથવા પૃષ્ઠ લોડ કરવાની ગતિને અસર કરી શકે છે.

બાહ્ય પ્રોગ્રામનો ઉપયોગ કરીને કદને કેવી રીતે સમાયોજિત કરવું

એડજસ્ટ કરવાનો ત્રીજો વિકલ્પ html માં છબીનું કદ એક બાહ્ય પ્રોગ્રામનો ઉપયોગ કરવાનો છે જે તમને ઇમેજ ફાઇલને પૃષ્ઠમાં દાખલ કરતા પહેલા તેનું કદ સુધારવા માટે પરવાનગી આપે છે. આમાંના કેટલાક પ્રોગ્રામ છે:

• જીએમપી: એક ફ્રી અને ઓપન સોર્સ પ્રોગ્રામ છે જે તમને વ્યવસાયિક રીતે ઈમેજો એડિટ અને મેનીપ્યુલેટ કરવાની પરવાનગી આપે છે. GIMP વડે તમે ઇમેજનું કદ બદલી શકો છો "સ્કેલ ઇમેજ" વિકલ્પનો ઉપયોગ કરીને "ઇમેજ" મેનૂમાંથી. તમે "ફાઇલ" મેનૂમાં "એક્સપોર્ટ એઝ" વિકલ્પનો ઉપયોગ કરીને છબીના વજન અને ગુણવત્તાને પણ ઑપ્ટિમાઇઝ કરી શકો છો. તમે તેની સત્તાવાર વેબસાઇટ પરથી GIMP ડાઉનલોડ કરી શકો છો.
• ફોટોશોપ: એક પેઇડ અને રેફરલ પ્રોગ્રામ છે જે તમને અદ્યતન રીતે છબીઓ બનાવવા અને સંપાદિત કરવાની મંજૂરી આપે છે. ફોટોશોપ વડે તમે "ઇમેજ" મેનૂમાં "ઇમેજ સાઇઝ" વિકલ્પનો ઉપયોગ કરીને છબીનું કદ બદલી શકો છો. તમે વજન અને છબીની ગુણવત્તાને પણ ઑપ્ટિમાઇઝ કરી શકો છો "વેબ માટે સાચવો" વિકલ્પનો ઉપયોગ કરીને "ફાઇલ" મેનૂમાંથી. તમે તેની સત્તાવાર વેબસાઇટ પરથી ફોટોશોપ ડાઉનલોડ કરી શકો છો.
• ઓનલાઈન ઈમેજ રીસાઈઝર: એક મફત ઓનલાઈન ટૂલ છે જે તમને કોઈપણ પ્રોગ્રામ ઈન્સ્ટોલ કર્યા વગર ઈમેજનું કદ બદલવાની પરવાનગી આપે છે. ઓનલાઈન ઈમેજ રીસાઈઝર વડે તમે તમારા કોમ્પ્યુટર અથવા URL થી ઈમેજ અપલોડ કરી શકો છો, ઇચ્છિત પહોળાઈ અને ઊંચાઈ પસંદ કરો અને સુધારેલી ઈમેજ ડાઉનલોડ કરો. તમે તેની અધિકૃત વેબસાઇટ પરથી ઓનલાઈન ઈમેજ રિસાઈઝરને એક્સેસ કરી શકો છો.

તમે ઇચ્છો તે રીતે છબીને સમાયોજિત કરો

આ લેખમાં અમે તમને માપને કેવી રીતે સમાયોજિત કરવું તે બતાવ્યું છે વિવિધ વિકલ્પો અને સંસાધનોનો ઉપયોગ કરીને, જે તમને તમારી વેબસાઇટ માટે આકર્ષક અને ઑપ્ટિમાઇઝ કરેલી છબીઓ બનાવવાની મંજૂરી આપશે. અમે તમને દરેક વિકલ્પના ફાયદા અને ગેરફાયદા પણ બતાવ્યા છે, તેમજ કેટલીક ટીપ્સ અને સારી પ્રથાઓ તમારા કાર્યને સુધારવા માટે.

અમે આશા રાખીએ છીએ કે આ લેખ તમારા માટે ઉપયોગી થયો છે અને તમને HTML માં છબીના કદને સમાયોજિત કરવા માટે આ વિકલ્પો અને સંસાધનો અજમાવવા માટે પ્રોત્સાહિત કરવામાં આવે છે. યાદ રાખો કે સૌથી મહત્વની વસ્તુ પસંદ કરવાનું છે વિકલ્પ કે જે તમારી જરૂરિયાતો અને ઉદ્દેશ્યોને શ્રેષ્ઠ રીતે અનુકૂળ કરે છે.

જો તમને આ લેખ ગમ્યો હોય, તો તેને તમારા મિત્રો સાથે શેર કરો. અને જો તમે html અને અન્ય એપ્લિકેશન્સ વિશે વધુ ટિપ્સ અને યુક્તિઓ જાણવા માંગતા હો, તો અમારી વેબસાઇટની મુલાકાત લો. તમે જુઓ!