Дар таҳияи вебсайт, коркарди дурусти тасвир барои беҳтар кардани кор ва таҷрибаи корбар муҳим аст. Мо аксар вақт худро бо зарурати кам кардани андозаи аз тасвир дар HTML то ки он дар саҳифаҳои интернетии мо зуд ва самаранок бор карда шавад. Дар ин мақола, мо усулҳо ва усулҳои техникии гуногунро барои хурдтар кардани тасвир дар HTML меомӯзем ва ба ин васила оптимизатсия ва визуализатсияи мундариҷаи моро беҳтар мегардонем. Агар шумо хоҳед, ки иҷрои вебсайти худро беҳтар созед ва андозаи тасвирҳои худро кам кунед, шумо ба ҷои лозима омадед!
1. Муқаддима ба кам кардани андозаи тасвир дар HTML
Тағйир додани андозаи тасвирҳо вазифаи маъмул дар таҳияи веб аст. Вақте ки сухан дар бораи оптимизатсияи вебсайти мо меравад, муҳим аст, ки тасвирҳои мо то ҳадди имкон сабук бошанд, бидуни осеб дидани сифати визуалии онҳо. Хушбахтона, HTML ба мо якчанд вариантҳоро барои ноил шудан ба ин пешниҳод мекунад. самаранок.
Яке аз роҳҳои кам кардани андозаи тасвирҳо ин истифодаи хосияти HTML "паҳно" ва "баландӣ" барои танзими андозаҳои тасвир мебошад. Ин тавассути истифодаи атрибутҳо дар теги тасвир ба даст оварда мешавад. Масалан, агар мо хохем, ки андозаро кам кунем аз тасвир Нисфи роҳ, мо метавонем арзиши "паҳно" ва "баландӣ" -ро ба нисфи андозаи аслии тасвир муқаррар кунем. Бо ин роҳ, браузер тасвирро бо андозаҳои хурдтар бор мекунад, ки ин барои беҳтар кардани вақти боркунии саҳифа мусоидат мекунад.
Варианти дигари кам кардани андозаи тасвирҳо дар HTML ин истифодаи фишурдани тасвир мебошад. Якчанд абзорҳо дар интернет мавҷуданд, ки ба мо имкон медиҳанд, ки тасвирҳои худро бе гум кардани сифат фишурда кунем. Ин воситаҳо тавассути нест кардани маълумоти зиёдатӣ аз тасвир кор мекунанд, андозаи файлро бе таъсир ба сифати визуалӣ кам мекунанд. Мо метавонем ин асбобҳоро барои фишурдани тасвирҳои мо пеш аз ҷойгиркунии онҳо дар вебсайти худ истифода барем, ки ин боиси тезтар боркунии саҳифа барои корбарони мо мегардад.
Дар хотир доред, ки оптимизатсияи андозаи тасвирҳои HTML на танҳо кори вебсайти шуморо беҳтар мекунад, балки таҷрибаи корбарро низ беҳтар мекунад. Бо кам кардани андозаи тасвирҳо, мо кафолат медиҳем, ки корбарони мо метавонанд ба мундариҷа зудтар ва самараноктар дастрасӣ пайдо кунанд. Ин усулҳо ва абзорҳои зикршударо истифода баред, то тасвирҳои худро оптимизатсия кунед ва вебсайти муассиртар ва дӯстона барои меҳмонони худро ба даст оред.
2. Тег ва атрибутҳо барои тағир додани андозаи тасвирҳо дар HTML
HTML як қатор тегҳо ва атрибутҳоеро пешкаш мекунад, ки метавонанд барои тағир додани андозаи тасвирҳо дар саҳифаи веб истифода шаванд. Ин барчаспҳо ва атрибутҳо ба шумо имкон медиҳанд, ки андоза ва тарҳбандии тасвирҳоро танзим кунед ва визуализатсияи беҳтари онҳоро дар дастгоҳҳои гуногун ва экранҳо.
Пеш аз ҳама, барои тағир додани андозаи тасвир дар HTML, шумо теги `-ро истифода мебаред`. Ин тег бояд якчанд атрибутҳои муҳимро дар бар гирад, то андозагирии дурустро ба даст орад. Хусусият src аст, истифода бурда мешавад барои муайян кардани роҳи тасвир, дар ҳоле ки аттрибутӣ паҳноӣ y баландӣ Онҳо барои муайян кардани паҳно ва баландии тасвир мувофиқан истифода мешаванд. Ин атрибутҳо метавонанд ба арзишҳои мушаххаси пиксел муқаррар карда шаванд ё фоизро барои имкон додани тағир додани андозаи нисбӣ истифода бурдан мумкин аст.
Илова ба атрибут паҳноӣ y баландӣ, HTML инчунин атрибутҳои дигареро фароҳам меорад, ки онҳоро барои тағир додани андозаи тасвирҳо истифода бурдан мумкин аст. Масалан, атрибут услуб метавонад барои татбиқи услубҳои иловагии CSS, ба монанди паҳнои максималӣ, баландии максималӣ ва таносуби ҷанбаҳои тасвир истифода шавад. Шумо инчунин метавонед атрибутро истифода баред синф ба кор бурдани услубҳои мушаххасе, ки дар варақаи услубҳои беруна ё дохилӣ муайян шудаанд. Ин атрибутҳо имкон медиҳанд, ки тарҳ ва андозаи ниҳоии тасвирро бештар назорат кунанд. Хулоса, бо истифода аз тегҳо ва атрибутҳои мувофиқ дар HTML мумкин аст, ки андозаи тасвирҳоро дар саҳифаи интернетӣ ба осонӣ ва самаранок тағир диҳед. Бо фаҳмиши асосии ин мафҳумҳо, таҳиягарони веб метавонанд намоиши беҳтари тасвирҳоро таъмин кунанд дар дастгоҳҳои гуногун ва экранҳо.
3. Тарзи муайян кардани паҳноӣ ва баландии тасвир дар HTML
Муайян кардани паҳно ва баландии тасвир дар HTML барои назорат кардани намуди зоҳирӣ ва тарҳ муҳим аст аз як сайт Веб. Хушбахтона, якчанд роҳҳо барои расидан ба ин ҳадаф вуҷуд доранд.
Роҳи осонтарини муайян кардани андозаи тасвир ин бо истифода аз атрибутҳои "паҳн" ва "баландӣ" мебошад. Ин атрибутҳо метавонанд мустақиман ба теги "img" илова карда шаванд ва ба шумо имкон медиҳанд, ки паҳнӣ ва баландии тасвирро бо пикселҳо муқаррар кунед. Барои намуна:
"`html
«`
Агар шумо хоҳед, ки тасвир таносуби аслии худро нигоҳ дорад, ба шумо танҳо лозим аст, ки яке аз атрибутҳоро (паҳно ё баландӣ) муайян кунед ва ба дигараш иҷозат диҳед, ки дар асоси таносуб ба таври худкор танзим шавад. Ин бо истифода аз атрибути "style" ва муайян кардани танҳо як арзиш, ё барои паҳнӣ ё баландӣ ба даст оварда мешавад. Барои намуна:
"`html
«`
Шумо инчунин метавонед воҳидҳои нисбии андозагириро, ба мисли фоиз, барои андозаи тасвир нисбат ба контейнери он истифода баред. Барои ин, танҳо арзиши дилхоҳро бо аломати фоиз (%) муайян кунед. Барои намуна:
"`html
«`
Бояд қайд кард, ки агар шумо андозаи тасвирҳоро дар HTML муайян накунед, браузер онҳоро бо андозаи аслии худ нишон медиҳад. Тавсия дода мешавад, ки ин усулҳои мушаххасоти паҳнӣ ва баландиро барои нигоҳ доштани тарҳи ягона дар вебсайти худ пайваста истифода баред. Бо ин вариантҳо таҷриба кунед ва якееро, ки ба ниёзҳои шумо мувофиқ аст, пайдо кунед!
4. Истифодаи фоиз барои кам кардани андозаи тасвир дар HTML
Истифодаи фоизҳо дар HTML роҳи муфид барои кам кардани андозаи тасвир аст. Ин техника ба шумо имкон медиҳад, ки тасвирро мувофиқи фазои мавҷуда танзим кунед дар экран, ки дар натиҷа як муаррифии чандиртар ва мутобиқшаванда барои дастгоҳҳои гуногун ва қарорҳои экран.
Барои истифодаи фоиз барои кам кардани андозаи тасвир дар HTML, мо танҳо қадамҳои зеринро иҷро мекунем:
1. Аввалан, мо теги тасвири HTMLро () ва мо ба он атрибути андоза таъин мекунем: паҳнӣ ва баландӣ. Ба ҷои муайян кардани арзиши собит дар пиксел, мо фоизро истифода мебарем. Масалан, агар мо хоҳем, ки тасвир 50% паҳнои экранро ишғол кунад, мо дар теги тасвир width=»50%»-ро истифода мебарем.
2. Баъдан, мо метавонем баландиро мутаносибан бо истифода аз хосияти CSS-и "auto" барои атрибути баланд танзим кунем. Ин боиси он мегардад, ки баландӣ ба таври худкор дар асоси паҳнои мутаносиб аз рӯи фоизи таъиншуда муқаррар карда мешавад. Масалан, агар паҳнои тасвир 50% дошта бошад, баландӣ ба таври худкор мутаносиб танзим мешавад.
3. Ниҳоят, барои боварӣ ҳосил кардани он, ки тасвир дар дастгоҳҳои гуногун ва қарорҳои экран дуруст мувофиқат кунад, қоидаҳои иловагии ороишро метавон татбиқ кард. Мо метавонем паҳнои ҳадди аксарро бо истифода аз хосияти CSS "max-width" муқаррар кунем, ки он кафолат медиҳад, ки агар экран хурдтар бошад, тасвир пур нашавад. Масалан, мо метавонем услуби "max-width: 100%;" -ро илова кунем. ба теги тасвир.
Дар хотир доред, ки истифодаи фоизҳо барои кам кардани андозаи тасвир дар HTML як амалияи тавсияшаванда аст, зеро он пешниҳоди чандиртар ва мутобиқшавандаро дар дастгоҳҳои гуногун ва қарорҳои экран таъмин мекунад. Бо риояи қадамҳои дар боло зикршуда, шумо метавонед андозаи тасвирҳои худро бидуни гум кардани сифат ё таҳрифи намуди онҳо ба осонӣ танзим кунед. Озмоиш кунед ва мувофиқати комилро барои эҳтиёҷоти худ пайдо кунед!
5. Тағйир додани андоза бо CSS дар тасвирҳои HTML
Яке аз мушкилоти умумӣ ҳангоми тарҳрезии вебсайт ин идоракунии андозаи тасвирҳо мебошад. Аксар вақт, тасвирҳои оптимизатсияшуда метавонанд вақти тӯлонии боркуниро ба вуҷуд оранд ва ба таҷрибаи корбар таъсири манфӣ расонанд. Хушбахтона, CSS ҳалли оддии кам кардани андозаи тасвирҳоро дар HTML пешниҳод мекунад.
Қадами аввал барои кам кардани андозаи тасвир ин муқаррар кардани андозаҳои он бо истифода аз CSS мебошад. Ин бо истифода аз хосиятҳои "васеъ" ва "баландӣ" ба даст оварда мешавад. Масалан, агар мо хоҳем, ки паҳнои тасвирро ба 300 пиксел муқаррар кунем, рамзи CSS чунин хоҳад буд width: 300px;. Дар хотир доштан муҳим аст, ки ҳангоми иҷрои ин тасвир, агар аз ҳад зиёд кам карда шавад, метавонад сифаташро гум кунад ё таҳриф шавад.
Усули дигари муфид барои кам кардани андозаи тасвир ин истифодаи фишурдани CSS мебошад. Ин тавассути гузоштани моликияти "background-size" ба арзиши камтар аз 100% ба даст оварда мешавад. Масалан, агар мо хоҳем, ки андозаи тасвирро ду маротиба кам кунем, рамзи CSS чунин хоҳад буд background-size: 50%;. Ин техника ба шумо имкон медиҳад, ки андозаи тасвирро бе гум кардани сифат кам кунед, зеро он танҳо ба таври визуалӣ танзим карда мешавад. Аммо, бояд қайд кард, ки ин техника танҳо барои тасвирҳои замина кор мекунад. Агар мо хоҳем, ки андозаи тасвиреро, ки бевосита дар саҳифаи HTML намоиш дода мешавад, кам кунем, беҳтар аст, ки хосиятҳои "паҳн" ва "баландӣ" -и дар боло зикршударо истифода барем.
Кам кардани андозаи тасвирҳо дар HTML бо истифода аз CSS як усули муфид барои беҳтар кардани боркунӣ ва иҷрои саҳифаи веб мебошад. Бо риояи қадамҳои дар боло зикршуда, мо метавонем андозаи тасвирро танзим кунем ва фишурдани CSS-ро барои ба таври визуалӣ кам кардани андозаи он истифода барем. Ҳамеша фаромӯш накунед, ки ҳангоми ворид кардани ин ислоҳҳо сифати тасвирро ба назар гиред, то таҷрибаи беҳтарини корбарро таъмин кунед.
6. Усулҳои оптимизатсияи боркунии тасвирҳои хурд дар HTML
Якчанд усулҳо мавҷуданд, ки метавонанд ба оптимизатсияи боркунии тасвирҳои хурд дар HTML кӯмак расонанд. Дар зер якчанд стратегияҳои муассир барои ноил шудан ба ин ҳадаф мавҷуданд:
1. Формати дурустро истифода баред: Интихоби формати дурусти тасвир барои вебсайти шумо муҳим аст. Ҳангоми истифода бурдани тасвирҳои хурд тавсия дода мешавад, ки форматҳо ба монанди JPEG ё WEBP истифода шаванд, зеро онҳо тасвирро бе гум кардани сифати зиёд фишурда мекунанд.
2. Фишурдани тасвирҳо: Пеш аз илова кардани тасвирҳо ба вебсайти худ, муҳим аст, ки онҳоро фишурда кунед, то андозаи онҳо бе таъсир ба сифати визуалӣ аз ҳад зиёд таъсир расонад. Якчанд асбобҳои онлайн мавҷуданд, ки ба шумо имкон медиҳанд, ки тасвирҳоро зуд ва ба осонӣ фишурда кунед.
3. Аз кэши браузер истифода баред: Бо гузоштани мӯҳлати дурусти кэш барои тасвирҳои хурд, шумо метавонед боварӣ ҳосил кунед, ки меҳмонони сайти шумо бояд танҳо як бор тасвирҳоро бор кунанд. Ин вақти боркуниро кам мекунад ва таҷрибаи корбарро беҳтар мекунад.
Илова ба ин усулҳо, дар хотир доштан муҳим аст, ки тасвирҳои хурд низ бояд барои дастгоҳҳои мобилӣ оптимизатсия карда шаванд. Ин танзими андозаи тасвир ва истифодаи усулҳои боркунии танбалро барои кам кардани истифодаи маълумоти мобилӣ дар бар мегирад. Бо татбиқи дурусти ин стратегияҳо, боркунии тасвири муассир дар вебсайти HTML-и шумо имконпазир аст.
7. Истифодаи китобхонаҳои беруна барои тағир додани андозаи тасвирҳо дар HTML
Роҳи маъмули тағир додани андозаи тасвирҳо дар HTML ин истифодаи китобхонаҳои беруна мебошад. Ин китобхонаҳо вазифаҳои пешакӣ муайяншударо таъмин мекунанд, ки метавонанд барои тағир додани андозаи тасвирҳо ба осонӣ ва самаранок истифода шаванд.
Якчанд китобхонаҳои маъмул мавҷуданд, ки метавонанд барои ин вазифа истифода шаванд, масалан jQuery, Болишт y lazysizes. Ин китобхонаҳо усулҳо ва вазифаҳои гуногунро барои тағир додани андозаи тасвирҳо дар HTML пешниҳод мекунанд.
Барои истифодаи ин китобхонаҳо, шумо бояд аввал истинод ба китобхонаро дар сарлавҳаи саҳифаи HTML дохил кунед. Масалан, агар шумо қарор диҳед, ки jQuery -ро истифода баред, шумо метавонед истиноди зеринро дар сарлавҳаи саҳифаи худ илова кунед:
"`html
«`
Пас аз он ки шумо истинодро ба китобхона дохил кардед, шумо метавонед ба истифода оғоз кунед вазифаҳои он дар рамзи HTML-и худ. Масалан, агар шумо хоҳед, ки андозаи тасвирро бо jQuery тағир диҳед, шумо метавонед функсияи `css()`-ро барои тағир додани паҳно ва баландии тасвир истифода баред. Дар зер намунаи он аст, ки код чӣ гуна хоҳад буд:
"`html
«`
Дар хотир доред, ки шумо бояд "img" -ро бо идентификатор ё синфи тасвире, ки андозаи онро тағир додан мехоҳед, иваз кунед. Илова бар ин, шумо метавонед арзишҳои "300px" ва "200px" -ро ба эҳтиёҷоти тағир додани андозаи худ танзим кунед.
Агар шумо хоҳед, ки китобхонаи дигарро истифода баред, шумо метавонед дарсҳо ва мисолҳои мушаххасро онлайн ҷустуҷӯ кунед, то тарзи тағир додани андозаи тасвирҳоро бо ин китобхонаи мушаххас омӯзед. Дар хотир доред, ки ҳар як китобхона синтаксис ва усулҳои худро дорад, аз ин рӯ муҳим аст, ки дастурҳо ва ҳуҷҷатҳои китобхонаи интихобкардаатонро риоя кунед, то натиҷаҳои дилхоҳро ба даст оред.
8. Мулоҳизаҳои дастрасӣ ҳангоми хурдтар кардани тасвир дар HTML
Истифодаи тасвирҳои калон дар вебсайт метавонад ба таҷрибаи корбар таъсири манфӣ расонад, махсусан дар дастгоҳҳои мобилӣ бо пайвастҳои сусттар. Аз ин рӯ, аксар вақт лозим аст, ки андозаи тасвирҳо барои оптимизатсияи боркунӣ ва беҳтар кардани дастрасӣ кам карда шаванд. Минбаъд, мо мефаҳмонем, ки чӣ тавр онро дар HTML иҷро кардан мумкин аст.
1. Барои ворид кардани тасвир ба саҳифаи худ теги HTML `img`-ро истифода баред. Боварӣ ҳосил кунед, ки атрибути `src`-ро бо ҷойгиршавии тасвир дохил кунед. Барои намуна:
"`html
«`
2. Барои муайян кардани паҳнои дилхоҳи тасвир бо пикселҳо аттрибути `width`-ро илова кунед. Масалан, агар шумо хоҳед, ки тасвир 300 пиксел васеъ бошад, шумо метавонед онро ба таври зерин иҷро кунед:
"`html
«`
3. Аттрибути 'height' -ро барои муайян кардани баландии дилхоҳи тасвир бо пикселҳо истифода баред. Бо ин роҳ, шумо метавонед ҳам паҳнӣ ва ҳам баландии тасвирро назорат кунед. Барои намуна:
"`html
«`
Дар хотир доред, ки ҳангоми тағир додани андозаи тасвир, шумо бояд таносуби аслиро нигоҳ доред, то ки он таҳриф нашавад. Лутфан таваҷҷӯҳ намоед, ки кам кардани андозаи тасвир ба сифати он мустақиман таъсир намерасонад, аммо муҳим аст, ки тавозуни байни андоза ва сифат барои боркунии зуд ва таҷрибаи оптималии корбар пайдо кунед. Барои беҳтар кардани дастрасии он, илова кардани матни алтернативии тасвирро фаромӯш накунед!
9. Тавсияҳо барои нигоҳ доштани сифат ҳангоми кам кардани андозаи тасвир дар HTML
Усулҳо ва тавсияҳои гуногун мавҷуданд, ки мо бояд ҳангоми кам кардани андозаи тасвири HTML бидуни осеб ба сифати он ба назар гирем. Дар зер баъзе маслиҳатҳои асосӣ мавҷуданд:
1. Аз атрибутҳои "паҳно" ва "баландӣ" истифода баред: Бо истифода аз атрибутҳои "паҳно" ва "баландӣ" андозаҳои дақиқи тасвирро бо пикселҳо муайян кардан муҳим аст. Ин ба браузер имкон медиҳад, ки фазои мувофиқро барои тасвир захира карда, аз тағир додани миқёси нолозим канорагирӣ кунад ва ба ин васила иҷрои онро оптимизатсия кунад.
2. Фишурдани тасвир: Воситаҳои онлайн ва барномаҳои таҳрири тасвир мавҷуданд, ки ба мо имкон медиҳанд, ки тасвирҳоро бе гум кардани сифат фишурда кунем. Бо кам кардани андозаи файл, боркунии саҳифа ба таври назаррас суръат мегирад. Илова бар ин, истифодаи он тавсия дода мешавад форматҳои тасвир форматҳои сабуктар, ба монанди JPEG ё PNG фишурда, ба ҷои форматҳои вазнин ба монанди TIFF ё BMP.
3. Аз тағир додани андоза бо истифода аз CSS худдорӣ намоед: Ҳарчанд андозаи тасвирро бо истифода аз CSS тағир додан мумкин аст, ин метавонад ба сифати он таъсири манфӣ расонад. Беҳтар аст, ки тасвирҳоро бо андозаҳои дуруст аз аввал истифода баред ва аз маҷбур кардани андоза тавассути CSS пешгирӣ кунед. Танҳо андозаҳоеро, ки барои дуруст намоиш додани тасвир заруранд, истифода баред ва аз арзишҳои аз ҳад калон ё хурд канорагирӣ кунед.
Дар хотир доред, ки оптимизатсияи тасвир ҷузъи муҳими рушди веб аст, зеро саҳифаи суст метавонад ба таҷрибаи корбар таъсири манфӣ расонад. Бо риояи ин тавсияҳо ва бо истифода аз абзорҳои мувофиқ, шумо метавонед андозаи тасвири HTML-ро бе кам кардани сифати он кам кунед ва ба ин васила ба веб саҳифаи тезтар ва муассиртар ноил шавед.
10. Намунаҳои рамзгузорӣ барои хурдтар кардани тасвир дар HTML
Барои хурдтар кардани тасвир дар HTML, шумо метавонед CSS-ро барои тағир додани андозаи тасвир истифода баред. Инҳоянд баъзе мисолҳои код, ки шумо метавонед ҳамчун истинод истифода баред:
1. Барои муқаррар кардани паҳнои тасвир хосияти width CSS-ро истифода баред. Масалан, агар шумо хоҳед, ки андозаи тасвирро ду маротиба кам кунед, шумо метавонед паҳниро то 50% муқаррар кунед.
2. Роҳи дигари тағир додани андозаи тасвир ин истифодаи хосияти CSS "height" барои муқаррар кардани баландии тасвир мебошад. Масалан, агар шумо хоҳед, ки андозаи тасвирро чоряк кам кунед, шумо метавонед баландии онро ба 25% муқаррар кунед.
3. Шумо инчунин метавонед хусусияти CSS-ро барои тағир додани андозаи тасвир истифода баред. Масалан, агар шумо хоҳед, ки андозаи тасвирро мутаносибан нисфи кам кунед, шумо метавонед аз функсияи "масштаб(0.5)" истифода баред.
Дар хотир доред, ки инҳо танҳо мисолҳоянд ва шумо метавонед арзишҳоро мувофиқи ниёзҳои худ танзим кунед. Инчунин, дар хотир доред, ки тағир додани андозаи тасвир бо истифода аз HTML ва CSS танҳо ба намоиш дар браузер таъсир мерасонад, на ба андозаи воқеии файли тасвир.
11. Ислоҳи мушкилоти умумӣ ҳангоми тағир додани андозаи тасвирҳо дар HTML
Тартиб дар зер муфассал оварда шудааст. қадам ба қадам Барои ислоҳ кардани мушкилоти умумӣ ҳангоми тағир додани андозаи тасвирҳо дар HTML:
1. Хусусиятҳои CSS-ро истифода баред: HTML барои танзими андозаи тасвирҳо хосиятҳои сершумори CSS-ро пешниҳод мекунад. Яке аз маъмултарин хосиятҳои "васеъ" мебошад, ки ба шумо имкон медиҳад паҳнои дилхоҳро бо пиксел ё фоиз муайян кунед. Барои намуна, паҳнои тасвирро ба 300 пиксел муқаррар мекунад. Ба ҳамин монанд, хосияти "баландӣ" метавонад барои муайян кардани баландӣ истифода шавад.
2. Нигоҳ доштани таносуби ҷанбаҳо: Барои пешгирӣ кардани мушкилоти таҳриф, ҳангоми тағир додани андозаи тасвирҳо тавсия дода мешавад, ки таносуби ҷанбаҳои аслӣ нигоҳ дошта шавад. Барои ноил шудан ба ин, шумо метавонед хосияти "width" -ро истифода баред ва арзиши хосияти "баландӣ"-ро холӣ гузоред ё "авто" -ро истифода баред. Барои намуна, .
3. Асбобҳои берунаро истифода баред: Агар ба шумо дар як вақт андозаи чанд тасвирро тағир додан лозим бошад ё агар назорати пешрафтаи раванди тағир додани андоза талаб карда шавад, асбобҳои беруна метавонанд истифода шаванд. Баъзе вариантҳои маъмул барномаҳои таҳрири тасвирҳоро дар бар мегиранд Adobe Photoshop ё GIMP, ё хидматҳои онлайн ба монанди TinyPNG ё Kraken.io. Ин асбобҳо одатан имконоти пешрафтаро пешниҳод мекунанд, ба монанди тағир додани андозаи худкор, фишурдан ё форматкунии тасвирҳо.
Ҳамеша дар хотир нигоҳ доред, ки a эҳтиётӣ Пеш аз ворид кардани ҳама гуна тағирот аз тасвирҳои аслӣ санҷед ва дар дастгоҳҳо ва андозаи экрани гуногун санҷед, то андозаи дурусти тасвирҳоро тағир диҳед. Ин қадамҳоро иҷро кунед ва ҳангоми тағир додани андозаи тасвирҳои худ дар HTML аз мушкилоти умумӣ канорагирӣ кунед.
12. Татбиқи усулҳои фишурдани тасвирҳо дар HTML
Истифодаи усулҳои фишурдани тасвир дар HTML барои оптимизатсияи боркунӣ ва намоиши тасвирҳо дар вебсайт муҳим аст. Фишурдашавӣ андозаи онро кам мекунад файлҳои тасвирӣ бе таъсири назаррас ба сифати визуалии он, ки дар навбати худ иҷрои саҳифа ва таҷрибаи корбарро беҳтар мекунад.
Якчанд усулҳои фишурдасозӣ вуҷуд доранд, ки онҳоро ба HTML истифода бурдан мумкин аст, ба монанди истифодаи барномаҳо ва абзорҳои мушаххас, ба монанди Adobe Photoshop ё GIMP, ки ба шумо имкон медиҳанд, ки сифат ва андозаи тасвирҳоро пеш аз бор кардан ба вебсайт танзим кунед. Инчунин хидматҳои онлайнро истифода бурдан мумкин аст, ки тасвирҳоро бе гум кардани сифат ба таври худкор фишурда мекунанд.
Илова бар ин, муҳим аст, ки форматҳои тасвири ба веб дӯстона, аз қабили JPEG, PNG ё WEBP. Ин форматҳо сатҳҳои гуногуни фишурдашавӣ ва дастгирии шаффофиятро пешниҳод мекунанд, аз ин рӯ муҳим аст, ки мувофиқи намуди тасвир ва ҳадафи он дар вебсайт интихоб карда шавад. Шумо инчунин метавонед техникаи боркунии танбалро истифода баред, ки тасвирро танҳо вақте ки он дар равзанаи браузер намоён аст, бор мекунад, ки барои суръат бахшидани вақти боркунии саҳифа кӯмак мекунад.
Хулоса, беҳтар кардани боркунӣ ва намоиши тасвирҳо дар вебсайт муҳим аст. Истифодаи барномаҳо ва абзорҳои мушаххас, интихоби формати мувофиқи тасвир ва истифодаи усулҳо, аз қабили боркунии танбалӣ баъзе аз таҷрибаҳои тавсияшуда барои ноил шудан ба иҷрои беҳтаршуда ва таҷрибаи оптималии корбар. Ҳамеша дар хотир доред, ки вебсайтро дар дастгоҳҳо ва пайвастҳои гуногун санҷед, то тасвирҳо зуд ва самаранок бор карда шаванд.
13. Тарзи мутобиқ кардани тасвирҳо ба дастгоҳҳои гуногун дар HTML
Роҳҳои гуногуни мутобиқ кардани тасвирҳо ба дастгоҳҳои гуногун дар HTML мавҷуданд. Усули қадам ба қадам барои ҳалли ин мушкилот дар зер муфассалтар хоҳад буд.
1. Аттрибути "srcset"-ро истифода баред: Ин атрибут ба шумо имкон медиҳад, ки тасвирҳои гуногунро барои андозаҳои гуногуни экран муайян кунед. Барои ин, файлҳои тасвирҳои гуногун бояд ба теги "img" дохил карда шаванд ва бо вергул ҷудо карда шаванд. Барои намуна:
"`html
«`
Ин рамз нишон медиҳад, ки агар паҳнои экран то 320 пиксел дошта бошад, "small-image.jpg" намоиш дода мешавад, "medium-image.jpg" агар паҳнои он аз 320 пиксел зиёд, вале аз 768 пиксел камтар ё баробар бошад ва " калон-тасвир .jpg» агар паҳнои он аз 768 пиксел зиёд бошад, вале аз 1024 пиксел камтар ё баробар бошад.
2. Истифодаи дархостҳои медиаи CSS: Варианти дигар ин истифодаи қоидаҳои дархостҳои медиаи CSS барои муайян кардани сабкҳои гуногун барои андозаҳои гуногуни экран мебошад. Дар ин ҳолат, шумо метавонед тасвирҳоро ҳамчун заминаи элементҳо истифода баред ё бо истифода аз атрибути "width" андозаҳои гуногуни тасвирро таъин кунед. Барои намуна:
"`html
«`
Ин код "small-image.jpg" -ро ҳамчун заминаи элемент бо синфи "тасвир" дар экранҳои паҳнои то 480px, "medium-image.jpg" дар экранҳои калонтар аз 480px, вале камтар аз ё баробар ба 1024px ва " нишон медиҳад. "image-grande.jpg" дар экранҳои калонтар аз 1024px.
3. Чаҳорчӯба ва китобхонаҳоро истифода баред: Якчанд чаҳорчӯба ва китобхонаҳое мавҷуданд, ки раванди мутобиқсозии тасвирро содда мекунанд, ба монанди Гурӯҳи Ҷамъиятии Ҷамъиятии Тасвирҳо (RICG), Picturefill ва Lazy Load. Ин воситаҳо татбиқи усулҳои дар боло зикршударо осон мекунанд ва имкон медиҳанд, ки тасвирҳо ба дастгоҳҳои гуногун самараноктар ва автоматӣ мутобиқ карда шаванд.
14. Хулоса: Таҷрибаҳои беҳтарин барои хурдтар кардани тасвир дар HTML
Хулоса, кам кардани андозаи тасвир дар HTML як раванди нисбатан соддаест, ки бо риояи чанд таҷрибаҳои беҳтарин ба даст овардан мумкин аст. Дар зер баъзе маслиҳатҳо ва тавсияҳо барои ин кор мавҷуданд:
1. Атрибутҳои андозаро истифода баред: атрибути "паҳн" ва "баландии" тамғакоғаз роҳи оддии муайян кардани андозаҳои тасвир дар HTML мебошад.
васеъ ва баландии тасвирро мутаносибан ба 500 ва 300 пиксел муқаррар мекунад. Бояд қайд кард, ки ин танҳо андозаи визуалии тасвирро тағир медиҳад, на андозаи файли онро.
2. Фишурдани тасвир: Фишурдакунӣ андозаи файли тасвирро бе таъсири ҷиддӣ ба сифати визуалии он кам мекунад. Якчанд асбобҳо ва нармафзори онлайн барои фишурдани тасвирҳо дар формати JPEG, PNG ё GIF мавҷуданд. Боварӣ ҳосил кунед, ки формати мувофиқи фишурдасозиро истифода мебаред ва танзимотро мувофиқи ниёзҳои худ танзим кунед.
3. Оптимизатсия барои веб: Роҳҳои дигари оптимизатсияи тасвир барои истифода вуҷуд доранд дар веб. Шумо метавонед форматҳои тасвири муассиртаре мисли WebP ё SVG-ро истифода баред, ки таносуби фишурдасозии беҳтарро пешниҳод мекунанд. Илова бар ин, шумо бояд тағир додани ҳалли тасвирро баррасӣ кунед, агар он танҳо дар дастгоҳҳои мобилӣ намоиш дода шавад. **
4. Кам кардани коди HTML: ҷанбаи дигари муҳим кам кардани андозаи рамзи HTML, ки тасвирро дар бар мегирад, мебошад. Барои ноил шудан ба ин, шумо метавонед холӣ ва шарҳҳои нолозимро нест кунед. Шумо инчунин метавонед бо истифода аз техникаи CSS Sprites тасвирҳои сершуморро дар як варақи спрайт муттаҳид кунед. **
**Ин хароҷоти серверро ҳангоми қабули дархостҳои сершумори тасвир кам мекунад. Илова бар ин, истифодаи усулҳои кэшро баррасӣ кунед, то браузер тавонад тасвирҳоро дар хотираи муваққатии худ захира кунад ва ҳангоми ҳар боздид онҳоро дубора зеркашӣ накунад.
Ин таҷрибаҳои беҳтаринро риоя кунед ва шумо бешубҳа метавонед андозаи тасвирҳои HTML-и худро ба таври муассир кам кунед ва ба ин васила кори вебсайти худро оптимизатсия кунед ва таҷрибаи беҳтари корбарро таъмин кунед.
Хулоса, кам кардани андозаи тасвир дар HTML як раванди муҳим барои оптимизатсияи суръати боркунии вебсайт ва беҳтар кардани таҷрибаи корбар аст. Тавассути воситаҳо ва усулҳои зикршуда, таҳиягарон метавонанд ба ин ҳадаф муваффақ шаванд.
Бо истифода аз тегҳои HTML барои муайян кардани андозаи тасвир, шумо аз мушкилоти боркунӣ канорагирӣ мекунед ва боварӣ ҳосил кунед, ки тасвир дар дастгоҳҳо ва экранҳои гуногун дуруст намоиш дода мешавад. Илова бар ин, тавассути фишурдани тасвир бо форматҳои монанди JPEG ё WebP, вазни файл бе гум кардани сифати назарраси визуалӣ кам карда мешавад.
Дар хотир доштан муҳим аст, ки ҳар як вебсайт беназир аст ва вобаста ба эҳтиёҷоти мушаххаси шумо метавонад ислоҳоти иловагӣ талаб кунад. Тавсия дода мешавад, ки санҷиши даврӣ ва оптимизатсияро барои нигоҳ доштани кори оптималӣ анҷом диҳед.
Хулоса, бо риояи ин усулҳо ва дуруст беҳсозии андозаи тасвирҳои HTML, таҳиягарон метавонанд вебсайти тезтар ва муассиртарро ба даст оранд ва таҷрибаи беҳтари корбарро пешниҳод кунанд. Тавассути истифодаи дурусти асбобҳо ва усулҳои дастрас, андозаи тасвир дигар маҳдудият дар ҷаҳони рақамӣ нахоҳад буд.
Ман Себастьян Видал, муҳандиси компютер ҳастам, ки ба технология ва DIY дилчасп аст. Гузашта аз ин, ман офаринандаи он ҳастам tecnobits.com, ки дар он ман дарсҳоро мубодила мекунам, то технологияро барои ҳама дастрастар ва фаҳмо гардонам.