Вебсайтты иштеп чыгууда, сүрөттү туура манипуляциялоо аткарууну жана колдонуучу тажрыйбасын оптималдаштыруу үчүн өтө маанилүү. Биз көп учурда көлөмүн азайтуу зарылдыгы менен өзүбүздү таба HTMLдеги сүрөт биздин веб-баракчаларда тез жана натыйжалуу жүктөлүшүн камсыз кылуу. Бул макалада биз HTMLдеги сүрөттү кичирейтүүнүн ар кандай ыкмаларын жана техникалык ыкмаларын изилдеп, ошону менен мазмунубузду жакшыраак оптималдаштырууга жана визуалдаштырууга мүмкүндүк берет. Эгер сиз веб-сайтыңыздын иштешин жакшыртууну жана сүрөттөрүңүздүн өлчөмүн азайтууну көздөп жатсаңыз, анда сиз туура жерге келдиңиз!
1. HTMLдеги сүрөттүн өлчөмүн кичирейтүү үчүн киришүү
Сүрөттөрдүн өлчөмүн өзгөртүү веб-иштеп чыгууда кеңири таралган милдет. Веб-сайтыбызды оптималдаштырууга келгенде, сүрөттөрүбүздүн визуалдык сапатын бузбастан, мүмкүн болушунча жарык болушун камсыздоо маанилүү. Бактыга жараша, HTML бизге буга жетүү үчүн бир нече варианттарды сунуш кылат. натыйжалуу.
Сүрөттөрдүн өлчөмүн кичирейтүүнүн бир жолу - сүрөттүн өлчөмдөрүн тууралоо үчүн HTML "туурасы" жана "бийиктиги" касиеттерин колдонуу. Бул сүрөт тегиндеги атрибуттарды колдонуу менен жетишилет. Мисалы, биз өлчөмүн азайтууну кааласак сүрөттөн жарым жолдо, биз "туура" жана "бийиктик" маанисин сүрөттүн баштапкы өлчөмүнүн жарымына орното алабыз. Ошентип, браузер сүрөттү кичине өлчөмдөрү менен жүктөйт, бул баракты жүктөө убактысын жакшыртууга жардам берет.
HTMLдеги сүрөттөрдүн өлчөмүн кичирейтүүнүн дагы бир варианты - сүрөт кысуу. Сүрөттөрүбүздүн сапатын жоготпостон кысууга мүмкүндүк берген онлайн режиминде бир нече куралдар бар. Бул куралдар сүрөттөлүштөн ашыкча маалыматтарды алып салуу менен, көрүү сапатына олуттуу таасирин тийгизбестен файлдын көлөмүн азайтат. Бул куралдарды биздин сүрөттөрдү веб-сайтыбызга кыстаруудан мурун кысуу үчүн колдоно алабыз, бул биздин колдонуучулар үчүн баракчанын тезирээк жүктөлүшүнө алып келет.
HTML сүрөттөрүнүн өлчөмүн оптималдаштыруу веб-сайтыңыздын иштешин гана эмес, колдонуучу тажрыйбасын да жакшыртаарын унутпаңыз. Сүрөттөрдүн өлчөмүн кичирейтүү менен биз колдонуучуларыбыз мазмунга тезирээк жана натыйжалуураак кире алышына кепилдик беребиз. Сүрөттөрүңүздү оптималдаштыруу жана конокторуңуз үчүн натыйжалуураак жана достук веб-сайтка жетишүү үчүн бул ыкмаларды жана куралдарды колдонуңуз.
2. HTMLдеги сүрөттөрдүн өлчөмүн өзгөртүү үчүн тэг жана атрибуттар
HTML веб-баракчадагы сүрөттөрдүн өлчөмүн өзгөртүү үчүн колдонула турган бир катар тегдерди жана атрибуттарды камсыз кылат. Бул тэгдер жана атрибуттар сүрөттөрдүн өлчөмүн жана макетін тууралоого мүмкүндүк берет, бул алардын сүрөттөрдө жакшыраак визуалдаштырууну камсыз кылат. ар кандай түзмөктөр жана экрандар.
Биринчиден, HTMLдеги сүрөттүн өлчөмүн өзгөртүү үчүн ` тегин колдоносуз`. Бул тег туура өзгөртүүгө жетишүү үчүн бир нече маанилүү атрибуттарды камтышы керек. атрибут src атрибут болсо, сүрөт жолун көрсөтүү үчүн колдонулат туурасы y бийиктик Алар сүрөттүн туурасын жана бийиктигин көрсөтүү үчүн колдонулат. Бул атрибуттарды пикселдик маанилерге коюуга болот же салыштырмалуу өлчөмүн өзгөртүүгө уруксат берүү үчүн пайызды колдонсо болот.
Атрибутка кошумча туурасы y бийиктик, HTML ошондой эле сүрөттөрдүн өлчөмүн өзгөртүү үчүн колдонула турган башка атрибуттарды берет. Мисалы, атрибут стиль максималдуу туурасы, максималдуу бийиктиги жана сүрөттүн катышы сыяктуу кошумча CSS стилдерин колдонуу үчүн колдонсо болот. Сиз ошондой эле атрибутун колдоно аласыз class тышкы же ички стилдер барагында аныкталган белгилүү стилдерди колдонуу. Бул атрибуттар сүрөттүн макетін жана акыркы өлчөмүн көбүрөөк көзөмөлдөөгө мүмкүндүк берет. Кыскасы, HTMLдеги туура тегдерди жана атрибуттарды колдонуу менен веб-баракчадагы сүрөттөрдүн өлчөмүн оңой жана эффективдүү өзгөртүүгө болот. Бул түшүнүктөрдү негизги түшүнүү менен, веб-иштеп чыгуучулар сүрөттөрдү жакшыраак көрсөтүүнү камсыздай алышат ар кандай түзмөктөрдө жана экрандар.
3. HTMLде сүрөттүн туурасын жана бийиктигин кантип көрсөтүү керек
HTMLде сүрөттүн туурасын жана бийиктигин көрсөтүү сырткы көрүнүшүн жана жайгашуусун көзөмөлдөө үчүн абдан маанилүү сайттан Web. Бактыга жараша, бул максатка жетүү үчүн бир нече жолдору бар.
Сүрөттүн өлчөмүн аныктоонун эң оңой жолу - "туура" жана "бийиктик" атрибуттарын колдонуу. Бул атрибуттарды түздөн-түз "img" тегине кошууга болот жана сүрөттүн туурасын жана бийиктигин пиксел менен коюуга мүмкүнчүлүк берет. Мисалы:
"`html
«`
Сүрөттүн баштапкы пропорцияларын сакташын кааласаңыз, атрибуттардын бирин гана (туурасы же бийиктиги) көрсөтүп, экинчисине пропорциянын негизинде автоматтык түрдө тууралоо мүмкүнчүлүгүн беришиңиз керек. Бул "стиль" атрибутун колдонуу жана туурасы же бийиктиги үчүн бир гана маанини көрсөтүү менен жетишилет. Мисалы:
"`html
«`
Сүрөттүн көлөмүн анын контейнерине салыштыруу үчүн пайыз сыяктуу салыштырмалуу өлчөө бирдиктерин да колдонсоңуз болот. Бул үчүн, жөн гана пайыздык белги (%) артынан каалаган маанини көрсөтүңүз. Мисалы:
"`html
«`
Белгилей кетчү нерсе, эгер сиз HTMLде сүрөттөрдүн өлчөмүн көрсөтпөсөңүз, браузер аларды баштапкы өлчөмү менен көрсөтөт. Вебсайтыңызда бирдиктүү макетти сактоо үчүн бул туурасы жана бийиктиги спецификациясынын ыкмаларын ырааттуу колдонуу сунушталат. Бул варианттарды колдонуп көрүңүз жана муктаждыктарыңызга эң туура келгенин табыңыз!
4. HTMLдеги сүрөттүн өлчөмүн азайтуу үчүн пайызды колдонуу
HTMLде пайыздарды колдонуу сүрөттүн көлөмүн азайтуунун пайдалуу жолу. Бул техника жеткиликтүү мейкиндикке ылайык сүрөттү тууралоого мүмкүндүк берет экранда, натыйжада ар кандай түзмөктөр жана экрандын токтомдору үчүн ийкемдүү жана ийкемдүү презентация пайда болот.
HTMLдеги сүрөттүн өлчөмүн азайтуу үчүн пайызды колдонуу үчүн, биз жөн гана төмөнкү кадамдарды аткарабыз:
1. Биринчиден, биз HTML сүрөт теги () жана биз ага өлчөм атрибутун ыйгарабыз: туурасы жана бийиктиги. Пикселде белгиленген маанини көрсөтүүнүн ордуна биз пайызды колдонобуз. Мисалы, биз сүрөт экрандын туурасынын 50% ын ээлешин кааласак, анда биз сүрөт тэгинде width=»50%» колдонобуз.
2. Андан кийин, бийиктик атрибуту үчүн “auto” CSS касиетин колдонуп, пропорционалдуу түрдө бийиктикти тууралай алабыз. Бул бийиктикти автоматтык түрдө жогоруда ыйгарылган пайыз менен белгиленген пропорционалдуу тууранын негизинде жөнгө салууга алып келет. Мисалы, сүрөттүн туурасы 50% болсо, бийиктик автоматтык түрдө пропорционалдуу түрдө туураланат.
3. Акыр-аягы, сүрөт ар кандай түзмөктөрдө жана экрандын резолюцияларында туура туура келишин камсыз кылуу үчүн кошумча стилдөө эрежелерин колдонсо болот. Биз "максималдуу кеңдик" CSS касиетин колдонуп, максималдуу кеңдикти орното алабыз, ал экран кичине болсо, сүрөттөлүш толуп кетпешине кепилдик берет. Мисалы, биз стилди кошо алабыз "макс-туурасы: 100%;" сүрөт тегине.
HTMLдеги сүрөттүн өлчөмүн азайтуу үчүн пайыздарды колдонуу сунушталган практика экенин унутпаңыз, анткени ал ар кандай түзмөктөрдө жана экрандын токтомдорунда ийкемдүү жана ийкемдүү көрсөтүүнү камсыздайт. Жогоруда айтылган кадамдарды аткаруу менен, сиз сүрөттөрүңүздүн көлөмүн сапатын жоготпостон же сырткы көрүнүшүн бурмалоосуз оңой тууралай аласыз. Эксперимент кылыңыз жана муктаждыктарыңыз үчүн эң сонун шайманды табыңыз!
5. HTML Images боюнча CSS менен өлчөмүн өзгөртүү
Вебсайтты иштеп чыгууда жалпы көйгөйлөрдүн бири бул сүрөттүн өлчөмүн башкаруу. Көбүнчө оптималдаштырылбаган сүрөттөр жүктөө убактысынын узагыраак болушуна жана колдонуучунун тажрыйбасына терс таасирин тийгизиши мүмкүн. Бактыга жараша, CSS HTMLдеги сүрөттөрдүн өлчөмүн азайтуу үчүн жөнөкөй чечимди сунуштайт.
Сүрөттүн өлчөмүн кичирейтүү үчүн биринчи кадам CSS аркылуу анын өлчөмдөрүн коюу болуп саналат. Бул "туура" жана "бийиктик" касиеттерин колдонуу менен жетишилет. Мисалы, биз сүрөттүн туурасын 300 пикселге коюуну кааласак, анда CSS коду width: 300px;. Муну жасоодо сүрөт өтө азайса сапатын жоготуп же бурмаланып көрүнүшү мүмкүн экенин эстен чыгарбоо керек.
Сүрөттүн көлөмүн азайтуунун дагы бир пайдалуу ыкмасы - CSS кысуу. Бул "фон-өлчөмү" касиетин 100% кем мааниге коюу менен жетишилет. Мисалы, биз сүрөттүн өлчөмүн эки эсеге кыскартууну кааласак, анда CSS коду болот background-size: 50%;. Бул ыкма сүрөттүн көлөмүн сапатын жоготпостон азайтууга мүмкүндүк берет, анткени ал визуалдык түрдө гана туураланат. Бирок, бул ыкма фон сүрөттөрү үчүн гана иштейт экенин белгилей кетүү маанилүү. Эгерде биз HTML барагында түздөн-түз көрсөтүлгөн сүрөттүн өлчөмүн кичирейтүүнү кааласак, анда жогоруда айтылган "туура" жана "бийиктик" касиеттерин колдонгон жакшы.
CSS аркылуу HTMLдеги сүрөттөрдүн өлчөмүн азайтуу веб-баракчанын жүктөлүшүн жана иштешин жакшыртуу үчүн пайдалуу ыкма. Жогоруда айтылган кадамдарды аткаруу менен, биз сүрөттүн өлчөмдөрүн тууралап, анын өлчөмүн визуалдык түрдө кичирейтүү үчүн CSS кысуусун колдоно алабыз. Колдонуучунун оптималдуу тажрыйбасын камсыз кылуу үчүн бул оңдоолорду жасап жатканда сүрөттүн сапатын эске алууну дайыма унутпаңыз.
6. HTMLде кичинекей сүрөттөрдү жүктөөнү оптималдаштыруу ыкмалары
HTMLде кичинекей сүрөттөрдү жүктөөнү оптималдаштырууга жардам бере турган бир нече ыкмалар бар. Төмөндө бул максатка жетүү үчүн кээ бир натыйжалуу стратегиялар болуп саналат:
1. Туура форматты колдонуңуз: Вебсайтыңыз үчүн туура сүрөт форматын тандоо маанилүү. Кичинекей сүрөттөрдү колдонууда JPEG же WEBP сыяктуу форматтарды колдонуу сунушталат, анткени алар сүрөттү көп сапатын жоготпостон кысышат.
2. Сүрөттөрдү кысуу: Веб-сайтыңызга сүрөттөрдү кошуудан мурун, визуалдык сапатка өтө көп таасир этпестен, алардын өлчөмүн азайтуу үчүн аларды кысуу маанилүү. Сүрөттөрдү тез жана оңой кысууга мүмкүндүк берген бир нече онлайн куралдар бар.
3. Браузер кэшинен пайда алыңыз: Кичинекей сүрөттөр үчүн кэштин мөөнөтүн туура коюу менен, сиз сайтка келгендер сүрөттөрдү бир гана жолу жүктөшү керек экенине кепилдик бере аласыз. Бул жүктөө убактысын кыскартат жана колдонуучунун тажрыйбасын жакшыртат.
Бул ыкмалардан тышкары, кичинекей сүрөттөр да мобилдик түзмөктөр үчүн оптималдаштырылган болушу керек экенин эстен чыгарбоо керек. Бул сүрөттүн өлчөмүн тууралоону жана мобилдик маалыматтарды колдонууну азайтуу үчүн жалкоо жүктөө ыкмаларын колдонууну камтыйт. Бул стратегияларды туура ишке ашыруу менен HTML веб-сайтыңызга сүрөттөрдү эффективдүү жүктөөгө жетишүүгө болот.
7. HTMLдеги сүрөттөрдүн өлчөмүн өзгөртүү үчүн тышкы китепканаларды колдонуу
HTMLдеги сүрөттөрдүн өлчөмүн өзгөртүүнүн кеңири таралган жолу - тышкы китепканаларды колдонуу. Бул китепканалар сүрөттөрдүн өлчөмүн оңой жана натыйжалуу өзгөртүү үчүн колдонула турган алдын ала аныкталган функцияларды камсыз кылат.
Бул тапшырма үчүн колдонула турган бир нече популярдуу китепканалар бар, мисалы jQuery, Pillow 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. Сүрөттү кысуу: Сүрөттөрдү сапатын жоготпостон кысууга мүмкүндүк берген онлайн инструменттер жана сүрөттү түзөтүү программалары бар. Файлдын көлөмүн азайтуу менен баракты жүктөө бир топ ылдамдайт. Мындан тышкары, аны колдонуу сунушталат сүрөт форматтары TIFF же BMP сыяктуу оор форматтардын ордуна JPEG же кысылган PNG сыяктуу жеңил форматтар.
3. CSS аркылуу өлчөмүн өзгөртүүдөн качыңыз: CSS аркылуу сүрөттүн өлчөмүн өзгөртүү мүмкүн болсо да, бул анын сапатына терс таасирин тийгизиши мүмкүн. Бул башынан эле туура өлчөмдөрү менен сүрөттөрдү колдонуу жана CSS аркылуу өлчөмүн мажбурлоодон качуу артык. Ашыкча чоң же кичине маанилерден алыс болуп, сүрөттү туура көрсөтүү үчүн керектүү өлчөмдөрдү гана колдонуңуз.
Сүрөттү оптималдаштыруу веб-иштеп чыгуунун маанилүү бөлүгү экенин унутпаңыз, анткени жай барак колдонуучу тажрыйбасына терс таасирин тийгизиши мүмкүн. Бул сунуштарды аткаруу жана тиешелүү куралдарды колдонуу менен, сиз HTML сүрөтүнүн көлөмүн анын сапатын жоготпостон азайтып, тезирээк жана натыйжалуу веб-баракчага жетише аласыз.
10. HTMLде сүрөттү кичирейтүү үчүн код мисалдары
HTMLде сүрөттү кичирейтүү үчүн, сиз сүрөттүн өлчөмүн өзгөртүү үчүн CSS колдонсоңуз болот. Бул жерде сиз шилтеме катары колдоно ала турган кээ бир код мисалдары:
1. Сүрөттүн туурасын коюу үчүн CSS width касиетин колдонуңуз. Мисалы, сиз сүрөттүн өлчөмүн эки эсеге кичирейтүүнү кааласаңыз, туурасын 50% га орното аласыз.
2. Сүрөттүн өлчөмүн өзгөртүүнүн дагы бир жолу - сүрөттүн бийиктигин коюу үчүн CSS "бийиктик" касиетин колдонуу. Мисалы, сиз сүрөттүн көлөмүн төрттөн бирине кичирейтүүнү кааласаңыз, бийиктикти 25% га орното аласыз.
3. Сүрөттүн өлчөмүн өзгөртүү үчүн CSS касиетин "трансформациялоо" да колдонсоңуз болот. Мисалы, эгер сиз пропорционалдуу түрдө сүрөттүн өлчөмүн жарымына кичирейтүүнү кааласаңыз, анда "масштаб(0.5)" функциясын колдонсоңуз болот.
Бул жөн гана мисалдар экенин унутпаңыз жана сиз өзүңүздүн муктаждыктарыңызга жараша баалуулуктарды тууралай аласыз. Ошондой эле, HTML жана CSS аркылуу сүрөттүн өлчөмүн өзгөртүү сүрөт файлынын чыныгы өлчөмүнө эмес, браузердеги дисплейге гана таасирин тийгизерин унутпаңыз.
11. HTMLдеги сүрөттөрдүн өлчөмүн өзгөртүүдө жалпы көйгөйлөрдү чечүү
Процедура төмөндө кененирээк баяндалган. кадам сайын HTMLдеги сүрөттөрдүн өлчөмүн өзгөртүүдө жалпы көйгөйлөрдү чечүү үчүн:
1. CSS касиеттерин колдонуңуз: HTML сүрөттөрдүн өлчөмүн тууралоо үчүн бир нече CSS касиеттерин сунуштайт. Эң кеңири таралган нерселердин бири - бул "туура" касиети, ал сизге керектүү туураны пиксел же пайыз менен көрсөтүүгө мүмкүндүк берет. Мисалы, сүрөттүн туурасын 300 пикселге орнотот. Ошо сыяктуу эле, "бийиктик" касиети бийиктикти көрсөтүү үчүн колдонулушу мүмкүн.
2. Аспект катышын сактаңыз: Бурмалоо көйгөйлөрүн болтурбоо үчүн, сүрөттөрдүн өлчөмүн өзгөртүүдө баштапкы пропорцияны сактоо сунушталат. Буга жетүү үчүн, сиз "эн" касиетин колдонуп, "бийиктик" касиетинин маанисин бош калтырсаңыз же "авто" колдонсоңуз болот. Мисалы, .
3. Тышкы куралдарды колдонуңуз: Эгер бир эле учурда бир нече сүрөттүн өлчөмүн өзгөртүү керек болсо же өлчөмүн өзгөртүү процессине көбүрөөк көзөмөл керек болсо, тышкы куралдар колдонулушу мүмкүн. Кээ бир популярдуу параметрлери сыяктуу сүрөттөрдү түзөтүү программаларын камтыйт Adobe Photoshop же GIMP, же TinyPNG же Kraken.io сыяктуу онлайн кызматтар. Бул куралдар адатта сүрөттөрдүн өлчөмүн автоматтык түрдө өзгөртүү, кысуу же форматтоо сыяктуу өркүндөтүлгөн варианттарды сунуштайт.
Ар дайым сактоону унутпаңыз камдык көчүрмө кандайдыр бир өзгөртүүлөрдү киргизүүдөн мурун баштапкы сүрөттөрдү текшерип, сүрөттөрдүн өлчөмүн туура өзгөртүү үчүн ар кандай түзмөктөрдө жана экрандын өлчөмүн сынап көрүңүз. Бул кадамдарды аткарыңыз жана HTMLдеги сүрөттөрүңүздүн өлчөмүн өзгөртүүдө жалпы көйгөйлөрдөн качыңыз.
12. HTMLде сүрөттөрдү кысуу ыкмаларын колдонуу
HTMLдеги сүрөттү кысуу ыкмаларын колдонуу веб-сайтка сүрөттөрдү жүктөөнү жана көрсөтүүнү оптималдаштыруу үчүн абдан маанилүү. Компрессия көлөмүн азайтат сүрөт файлдары анын визуалдык сапатына олуттуу таасирин тийгизбестен, бул өз кезегинде баракчанын иштешин жана колдонуучу тажрыйбасын жакшыртат.
HTMLге колдонула турган бир нече кысуу ыкмалары бар, мисалы Adobe Photoshop же GIMP сыяктуу атайын программаларды жана куралдарды колдонуу, алар веб-сайтка жүктөөдөн мурун сүрөттөрдүн сапатын жана өлчөмүн тууралоого мүмкүндүк берет. Сүрөттөрдү сапатын жоготпостон автоматтык түрдө кысуучу онлайн кызматтарды да колдонууга болот.
Андан тышкары, JPEG, PNG же WEBP сыяктуу веб-достук сүрөт форматтарын колдонуу маанилүү. Бул форматтар ар кандай деңгээлде кысууларды жана ачык-айкындуулукту колдоону сунуштайт, андыктан веб-сайттагы сүрөттүн түрүнө жана анын максатына жараша эң ылайыктуусун тандоо маанилүү. Сиз ошондой эле жалкоо жүктөө техникасын колдоно аласыз, ал сүрөттү браузердин терезесинде көрүнгөндө гана жүктөйт, бул баракты жүктөө убактысын тездетүүгө жардам берет.
Кыскасы, веб-сайтка сүрөттөрдү жүктөө жана көрсөтүүнү жакшыртуу зарыл. Конкреттүү программаларды жана куралдарды колдонуу, ылайыктуу сүрөт форматын тандоо жана жалкоо жүктөө сыяктуу ыкмаларды колдонуу - бул жетүү үчүн сунушталган практикалардын кээ бирлери. жакшыртылган иштөө жана оптималдуу колдонуучу тажрыйбасы. Сүрөттөр тез жана эффективдүү жүктөлүшүн камсыз кылуу үчүн веб-сайтты ар кандай түзмөктөрдө жана байланыштарда сынап көрүүнү унутпаңыз.
13. HTMLдеги ар кандай түзүлүштөргө сүрөттөрдү кантип ыңгайлаштыруу керек
HTMLдеги ар кандай түзмөктөргө сүрөттөрдү ыңгайлаштыруунун ар кандай жолдору бар. Бул көйгөйдү чечүү үчүн кадам-кадам ыкмасы төмөндө майда-чүйдөсүнө чейин айтылат.
1. “srcset” атрибутун колдонуңуз: Бул атрибут экрандын ар кандай өлчөмдөрү үчүн ар кандай сүрөттөрдү көрсөтүүгө мүмкүндүк берет. Бул үчүн, ар кандай сүрөт файлдары "img" тегине киргизилип, үтүр менен бөлүнүшү керек. Мисалы:
"`html
«`
Бул код эгер экрандын туурасы 320 пикселге чейин болсо "small-image.jpg", туурасы 320 пикселден чоң, бирок 768 пикселден аз же барабар болсо "medium-image.jpg" көрсөтүлөрүн жана " чоң сүрөт .jpg» туурасы 768 пикселден чоң болсо, бирок 1024 пикселден аз же барабар болсо.
2. CSS медиа сурамдарын колдонуңуз: Дагы бир вариант - ар кандай экран өлчөмдөрү үчүн ар кандай стилдерди аныктоо үчүн CSS медиа сурамдарынын эрежелерин колдонуу. Бул учурда, сиз сүрөттөрдү элементтердин фону катары колдоно аласыз же "эн" атрибутун колдонуп, ар кандай сүрөттүн өлчөмүн орното аласыз. Мисалы:
"`html
«`
Бул код "small-image.jpg" туурасы 480 пикселге чейинки экрандарда "сүрөт" классы бар элементтин фону катары, 480 пикселден чоң, бирок 1024 пикселден аз же барабар экрандарда "medium-image.jpg" жана "" көрсөтөт. 1024 пикселден чоңураак экрандарда "image-grande.jpg".
3. Алкактарды жана китепканаларды колдонуңуз: Responsive Images Community Group (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 сүрөттөрүнүн өлчөмүн туура оптималдаштыруу менен, иштеп чыгуучулар жакшыртылган колдонуучу тажрыйбасын сунуштап, тезирээк жана натыйжалуураак веб-сайтка жетише алышат. Жеткиликтүү куралдарды жана ыкмаларды туура колдонуу аркылуу, сүрөттүн өлчөмү мындан ары санариптик дүйнөдө чектөө болбойт.
Мен Себастьян Видал, технологияга жана өз алдынча жасоого кызыккан компьютер инженеримин. Андан тышкары, мен жаратуучумун tecnobits.com, мен технологияны баарына жеткиликтүү жана түшүнүктүү кылуу үчүн окуу куралдарын бөлүшөм.