HTML પ્રોગ્રામિંગમાં ફોટો (ઈમેજ) એડ કરવા માટેની કેટલીક મહત્વપૂર્ણ પદ્ધતિઓ અને પ્રોગ્રામિંગ ઉદાહરણો નીચે આપવામાં આવ્યા છે:
1. Simple Image Tag (Basic Method)
આ પદ્ધતિમાં img ટેગનો ઉપયોગ કરીને તમે ઈમેજ ઉમેરો છો. src એ ટ્રિબ્યુટ ઈમેજની ફાઈલનું પાથ દર્શાવે છે.
Syntax:
<img src=”path/to/image.jpg” alt=”Description of image” width=”500″ height=”300″>
વિશેષતાઓ:
alt: આ ટ્રિબ્યુટ ઈમેજ લોડ ન થાય ત્યારે ઓલ્ટરનેટ ટેક્સ્ટ દર્શાવે છે.
width અને height: ઈમેજનો આકાર નિયંત્રિત કરવા માટે વપરાય છે.
2. Image as a Link
તમે ઈમેજને ક્લિકેબલ બનાવી શકો છો અને તેની સાથે હાઇપરલિંક જોડી શકો છો.
Syntax:
<a href=”https://example.com”>
<img src=”path/to/image.jpg” alt=”Clickable image”>
</a>
વિશેષતા: આ પદ્ધતિનો ઉપયોગ બ્લોગ અથવા વેબસાઇટ પર બેનર અથવા જાહેરાત માટે થાય છે.
3. Background Image Using CSS
HTML અને CSS નો મિક્સ કરીને તમે ડિવમાં બેકગ્રાઉન્ડ ઈમેજ પણ ઉમેરી શકો છો.
Syntax:
<div style=”background-image: url(‘path/to/image.jpg’); width: 500px; height: 300px;”>
<!– Content can be placed here if needed –>
</div>
વિશેષતા: આ પદ્ધતિનો ઉપયોગ બેકગ્રાઉન્ડ ડિઝાઇન અથવા હેડિંગ માટે કરવામાં આવે છે.
4. Responsive Image (Using CSS or HTML)
રેસ્પોન્સિવ ડિઝાઇન માટે, તમે ઈમેજનો કદ સેટ કરી શકો છો કે જે વિવિધ સ્ક્રીન સાઇઝ પર ગોઠવાય.
Syntax (CSS):
<img src=”path/to/image.jpg” alt=”Responsive image” style=”max-width: 100%; height: auto;”>
વિશેષતા: max-width: 100% ઈમેજને સ્ક્રીનનું 100% પહોળું બનાવે છે અને height: auto ઈમેજનું ક્રમિત આકાર જાળવે છે.
5. Image Map (Clickable Areas)
આ પદ્ધતિનો ઉપયોગ કરીને તમે ઈમેજમાં અલગ અલગ ભાગોને અલગ હાઇપરલિંક્સ આપી શકો છો.
Syntax:
<img src=”path/to/image.jpg” alt=”Image map” usemap=”#imagemap”>
<map name=”imagemap”>
<area shape=”rect” coords=”34,44,270,350″ alt=”Link 1″ href=”https://example1.com”>
<area shape=”circle” coords=”337,300,44″ alt=”Link 2″ href=”https://example2.com”>
</map>
વિશેષતા: આ પદ્ધતિ મોટા ઇન્ટરેક્ટિવ ઈમેજો (જેમ કે વેબ પેજ નકશા) માટે ઉપયોગી છે.
6. Lazy Loading Images (Improve Performance)
વેબ પેજની લોડિંગ ઝડપ સુધારવા માટે, તમે loading=”lazy” ટ્રિબ્યુટનો ઉપયોગ કરી શકો છો, જે ઈમેજને તે ત્યારે લોડ કરશે જ્યારે તે વપરાશકર્તાની સ્ક્રીન પર આવશે.
Syntax:
<img src=”path/to/image.jpg” alt=”Lazy loading image” loading=”lazy”>
વિશેષતા: આ પદ્ધતિ વેબ પેજની પ્રારંભિક લોડિંગ પ્રદર્શનને સુધારે છે.
7. SVG Images (Scalable Vector Graphics)
તમે રાસ્ટર ઈમેજ (PNG, JPEG)ને બદલે વેક્ટર બેસ્ડ ઈમેજ (SVG) નો ઉપયોગ કરી શકો છો, જે તમારા પેજને સ્કેલેબલ અને ઉચ્ચ ગુણવત્તાવાળા ગ્રાફિક્સ પ્રદાન કરે છે.
Syntax:
<svg xmlns=”http://www.w3.org/2000/svg” width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>
8. Picture Tag for Different Screen Sizes
તમે અલગ અલગ સ્ક્રીન સાઇઝ માટે અલગ અલગ ઈમેજ વર્ઝન દર્શાવવા માટે picture ટેગનો ઉપયોગ કરી શકો છો.
Syntax:
<picture>
<source srcset=”path/to/image-large.jpg” media=”(min-width: 800px)”>
<source srcset=”path/to/image-small.jpg” media=”(max-width: 799px)”>
<img src=”path/to/image-default.jpg” alt=”Responsive image”>
</picture>
આ પ્રોગ્રામિંગ પદ્ધતિઓનો ઉપયોગ કરીને, તમે વેબ પેજ પર ફોટો ઉમેરવા અને તેમને યોગ્ય રીતે પ્રદર્શન કરવા માટે અલગ અલગ રીતો અજમાવી શકો છો.
