Gusto mo bang magsingit ng larawan sa iyong web page, pero hindi mo alam kung paano i-adjust ang size nito para magkasya sa design? Gusto mo bang matutunan kung paano gumamit ng mga HTML tag at attribute para baguhin ang lapad at taas ng isang imahe? Alam mo ba ang mga benepisyo at kawalan ng bawat pamamaraan? Kung oo ang sagot, para sa iyo ang artikulong ito.
Sa artikulong ito, Tuturuan ka namin kung paano ayusin ang laki ng isang imahe sa html, gamit ang iba't ibang mga opsyon at mapagkukunan na magbibigay-daan sa iyong lumikha ng mga kaakit-akit at na-optimize na mga larawan para sa iyong website. Ipapakita rin namin sa iyo ang mga kalamangan at kahinaan ng bawat opsyon, pati na rin ang ilang mga tip at mahusay na kasanayan upang mapabuti ang iyong trabaho.
Ano ang isang imahe sa html at kung paano ipasok ito
Ang isang imahe sa html ay isang elemento na nagpapahintulot sa iyo na ipakita isang visual na representasyon ng isang bagay, isang tao, isang landscape o anumang bagay. Upang magpasok ng isang imahe sa html ang tag ay ginagamit , na isang walang laman na tag, i.e. na walang closure.
Ang label ay may ilang mga katangian na nagbibigay-daan sa iyong tukuyin ang impormasyon at mga katangian ng larawan. Ang pinakamahalaga ay:
- src: ay ang attribute na nagsasaad ng path o address ng image file. Maaari itong maging isang kamag-anak na landas (sa loob ng parehong website) o isang ganap na landas (sa ibang website). Halimbawa: alinman .
- alt: ay ang attribute na nagsasaad ng alternatibong text ng larawan, iyon ay, ang text na ipinapakita kapag hindi ma-load ang larawan o gumamit ng screen reader. Ito ay isang ipinag-uutos na katangian at dapat ilarawan ang nilalaman o function ng larawan. Halimbawa: .
- pamagat: ay ang katangian na nagsasaad ng pamagat ng larawan, ibig sabihin, ang text na ipinapakita kapag ang cursor ay naka-hover tungkol sa larawan. Isa itong opsyonal na katangian at maaaring iba sa alt text. Halimbawa: .
Paano ayusin ang laki gamit ang mga katangian ng lapad at taas
Isa sa mga pinakamadaling paraan upang ayusin ang laki ng isang imahe sa html ay ang paggamit ng mga katangian ng lapad at taas) na nagbibigay-daan sa iyong tukuyin ang lapad at taas ng imahe sa mga pixel. Halimbawa:
Ang mga katangiang ito ay may ilang mga pakinabang at disadvantages:
- Benepisyo:
- Ang mga ito ay madaling gamitin at hindi nangangailangan ng anumang karagdagang kaalaman.
- Pinapayagan ka nitong magreserba ng kinakailangang espasyo para sa larawan bago ito i-load, na pumipigil sa pahina na tumalon o magbago habang naglo-load.
- nagbibigay sa iyo ng opsyon ng iakma ang laki ng larawan sa disenyo ng pahina nang hindi kinakailangang baguhin ang orihinal na file.
- Mga Disadvantages:
- Maaari nilang i-distort ang aspect ratio o kalidad ng imahe kung ang mga value na iba sa orihinal na laki ay ginagamit.
- Hindi nito pinapayagan ang laki ng larawan na maisaayos ayon sa laki ng screen o device ng user.
- Hindi nila pinapayagan ang paglalapat ng mga epekto o karagdagang mga istilo sa larawan.
Paano baguhin ang laki ng isang imahe sa html gamit ang CSS
Isa pang paraan mas advanced at flexible Upang ayusin ang laki ng isang imahe sa HTML ay ang paggamit ng CSS (Cascading Style Sheets), na isang wika na nagbibigay-daan sa iyong tukuyin at ilapat ang mga istilo sa mga elemento ng HTML. Upang gamitin ang CSS maaari mong gamitin ang tag sa loob ng html na dokumento, isang panlabas na file na may extension na .css. Halimbawa:
img { width: 500px; height: 600px; } alinman
Ang paggamit ng CSS ay may ilang mga pakinabang at disadvantages:
- Benepisyo:
- Binibigyang-daan kang ayusin ang laki ng imahe nang proporsyonal, gamit ang object-fit property o ang calc() function.
- Ayusin natin ang laki ng larawan depende sa laki ng screen o device ng user, gamit ang mga kamag-anak na unit (%, em, vw, vh) o mga query sa media.
- Maaaring ilapat ang mga karagdagang epekto o istilo sa larawan, gaya ng mga hangganan, anino, filter, o pagbabago.
- Mga Disadvantages:
- Nangangailangan ng higit na kaalaman at karunungan sa wikang CSS.
- Maaaring makabuo ng mga salungatan o hindi pagkakapare-pareho na may iba pang mga istilong inilapat sa pahina o larawan.
- Maaari itong makaapekto sa pagganap o bilis ng paglo-load ng pahina kung masyadong maraming istilo o epekto ang ginagamit.
Paano ayusin ang laki gamit ang isang panlabas na programa
Isang pangatlong opsyon upang ayusin ang laki ng isang imahe sa html ay ang paggamit ng isang panlabas na programa na nagbibigay-daan sa iyong baguhin ang laki ng file ng imahe bago ito ipasok sa pahina. Ang ilan sa mga programang ito ay:
- GIMP: ay isang libre at open source na programa na nagbibigay-daan sa iyong propesyonal na mag-edit at magmanipula ng mga larawan. Sa GIMP maaari mong baguhin ang laki ng isang imahe Gamit ang opsyong "Scale Image". mula sa menu na “Larawan”. Maaari mo ring i-optimize ang timbang at kalidad ng larawan gamit ang opsyong "I-export Bilang" sa menu na "File". Maaari mong i-download ang GIMP mula sa opisyal na website nito.
- Photoshop: ay isang bayad at referral program na nagbibigay-daan sa iyong lumikha at mag-edit ng mga larawan sa advanced na paraan. Sa Photoshop maaari mong baguhin ang laki ng isang imahe gamit ang opsyon na "Laki ng Larawan" sa menu na "Larawan". Maaari mo ring i-optimize ang timbang at kalidad ng larawan gamit ang opsyong "I-save para sa web". mula sa menu na "File". Maaari mong i-download ang Photoshop mula sa opisyal na website nito.
- Online na Image Resizer: ay isang libreng online na tool na nagbibigay-daan sa iyong baguhin ang laki ng isang imahe nang hindi kinakailangang mag-install ng anumang program. Sa Online Image Resizer maaari kang mag-upload ng larawan mula sa iyong computer o mula sa isang URL, piliin ang gustong lapad at taas, at i-download ang binagong larawan. Maaari mong ma-access ang Online Image Resizer mula sa opisyal na website nito.
Ayusin ang imahe sa paraang gusto mo
Sa artikulong ito ipinakita namin sa iyo kung paano ayusin ang laki ng isang imahe sa HTML, gamit ang iba't ibang mga opsyon at mapagkukunan na magbibigay-daan sa iyong lumikha ng mga kaakit-akit at na-optimize na mga larawan para sa iyong website. Ipinakita rin namin sa iyo ang mga pakinabang at disadvantages ng bawat opsyon, pati na rin ang ilang mga tip at magagandang kasanayan upang mapabuti ang iyong trabaho.
Umaasa kami na ang artikulong ito ay naging kapaki-pakinabang sa iyo at na hinihikayat kang subukan ang mga opsyon at mapagkukunang ito upang ayusin ang laki ng isang imahe sa HTML. Tandaan na ang pinakamahalagang bagay ay ang pumili ang opsyon na pinakaangkop sa iyong mga pangangailangan at layunin.
Kung nagustuhan mo ang artikulong ito, ibahagi ito sa iyong mga kaibigan. At kung gusto mong malaman ang higit pang mga tip at trick tungkol sa html at iba pang mga application, bisitahin ang aming website. See you!