现代图片性能优化和体验优化指南——图片资源的容错和无障碍处理

妯℃嫙涓€涓寜閽拰涓€涓ぇ鍙穉ria-*灞炴€э紝浠ｈ〃鍏冪礌鐨勫睘鎬ф垨鐘舵€侊紝甯姪鎴戜滑杩涗竴姝ヨ瘑鍒拰瀹炵幇鍏冪礌鐨勮涔夛紝浼樺寲鏃犻殰纰嶄綋楠屼笂闈㈢浜岀偣锛屾彁渚涘叾浠栨柟寮忔浛浠lt灞炴€х殑鎰忔€濇槸浣跨敤attributes渚嬪WAR-ARIA瑙勮寖鎻愪緵鐨刟ria-label鍜宎ria-labelledby涓哄浘鍍忔彁渚涘彲璁块棶鐨勫悕绉般€傚綋瀛樺湪杩欎簺灞炴€ф椂锛岃緟鍔╂妧鏈紙灞忓箷闃呰鍣級灏嗗拷鐣ュ浘鍍忕殑alt灞炴€у苟璇诲彇ARIA鏍囩銆傜涓夌偣锛屼娇鐢ㄨ緟鍔╂妧鏈殣钘忚楗板浘鍍忥紝杩欐槸浠€涔堟剰鎬濓紵涓婇潰绗竴鐐逛腑鎵€鏈夋湁鎰忎箟鐨刬mg鍏冪礌閮藉繀椤诲叿鏈塧lt灞炴€с€傚弽涔嬶紝椤甸潰涓婁篃浼氬嚭鐜版棤鎰忎箟鐨勮楗板浘鐗囥€傝繖浜涘浘鐗囩殑鍐呭瀹為檯涓婂彲浠ュ拷鐣ヤ负杈呭姪鎶€鏈紙灞忓箷闃呰鍣級鐨勩€傛病鏈変换浣曞姛鑳芥€ф垨淇℃伅鎬у唴瀹圭殑瑁呴グ鎬у浘鍍忓彲浠ラ€氳繃澶氱鏂瑰紡瀵瑰睆骞曢槄璇诲櫒闅愯棌锛氫娇鐢ㄧ┖鐨刟lt灞炴€т娇鐢ˋRIA灞炴€ole="presentation"鎸囩ず鍥惧儚鍏冪礌鏄楗版€х殑蹇界暐鍥惧儚浣跨敤CSS鑳屾櫙鏉ュ憟鐜拌繖浜沺icturealt涓嶅簲璇ヤ笌鏍囬娣锋穯濂藉惂锛岃鎴戜滑璋堣皥涓€浜涙湁瓒ｇ殑缁嗚妭銆傝繖閲屾湁涓€涓緢鍩虹鐨勭煡璇嗭紝绠€鍗曡涓€涓嬶紝灏辨槸鍥剧墖鍏冪礌涓璦lt鍜宼itle鐨勫尯鍒細鍥剧墖涓殑alt灞炴€ф槸鍥剧墖鏃犳硶姝ｅ父鏄剧ず鏃跺嚭鐜扮殑鏂囧瓧鎻愮ず銆傚浘鐗囦腑鐨則itle灞炴€ф槸榧犳爣绉诲埌鍏冪礌涓婃椂鐨勬枃瀛楁彁绀恒€俛lt灞炴€х殑姝ｇ‘浣跨敤瀵逛簬浣跨敤灞忓箷闃呰鍣ㄧ殑鐢ㄦ埛鏉ヨ锛屽浘鐗囨棤娉曟甯告樉绀烘垨娴忚銆傚熀浜庢锛屾垜浠渶瑕佺敤濂絘lt灞炴€э紝涔熷氨鏄笂闈㈡彁鍒扮殑aria-label鍜宎ria-labelledby灞炴€с€傞偅涔堬紝杩欎簺灞炴€ч噷闈㈢殑鍐呭搴旇濉厖浠€涔堝憿锛熸垜浠渶瑕佹牴鎹浘鍍忕殑鍔熻兘鏉ュ尯鍒嗭細淇℃伅鍥惧儚锛氫互鍥惧舰鏂瑰紡琛ㄧず姒傚康鍜屼俊鎭殑鍥惧儚锛岄€氬父鏄浘鐗囥€佺収鐗囧拰鎻掑浘銆俛lt鏇夸唬鏂囨湰搴旇鑷冲皯鏄竴涓畝鐭殑鎻忚堪锛屼紶杈惧浘鍍忔墍鍛堢幇鐨勫熀鏈俊鎭€傝楗版€у浘鍍忥細褰撳浘鍍忕殑鍞竴鐩殑鏄负椤甸潰娣诲姞瑙嗚瑁呴グ锛岃€屼笉鏄紶杈惧鐞嗚В椤甸潰閲嶈鐨勪俊鎭椂锛屽涓婃墍杩帮紝浣跨敤绌篴lt锛屼緥濡俛lt=""鍔熻兘鎬у浘鍍忥細鐢ㄤ綔鎸夐挳鍥惧儚鐨勯摼鎺ユ垨鏇夸唬鏂囨湰搴旀弿杩伴摼鎺ユ垨鎸夐挳鐨勫姛鑳斤紝鑰屼笉鏄瑙夊浘鍍忋€傛绫诲浘鍍忕殑绀轰緥鏄〃绀烘墦鍗板姛鑳界殑鎵撳嵃鏈哄浘鏍囨垨鎻愪氦琛ㄥ崟鐨勬寜閽€傛枃鏈浘鍍忥細鍙鏂囨湰鏈夋椂浼氬嚭鐜板湪鍥惧儚涓€傚鏋滃浘鐗囦笉鏄窘鏍囷紝璇烽伩鍏嶅浘鐗囦腑鍑虹幇鏂囧瓧銆備絾鏄紝濡傛灉浣跨敤鏂囨湰鍥惧儚锛屽垯鏇夸唬鏂囨湰搴斿寘鍚笌鍥惧儚涓浉鍚岀殑璇嶃€傚浘褰㈠拰鍥捐〃绛夊鏉傚浘鍍忥細涓轰簡浼犺揪鏁版嵁鎴栬缁嗕俊鎭紝鎻愪緵涓庡浘鍍忎腑鏄剧ず鐨勬暟鎹垨淇℃伅绛夋晥鐨勫叏鏂囦綔涓烘浛浠ｆ枃鏈€傚浘鐗囩粍锛氬鏋滃寮犲浘鐗囦紶杈句竴鏉℃秷鎭紝鍒欎竴寮犲浘鐗囩殑鏇夸唬鏂囧瓧搴斾紶杈炬暣缁勫浘鐗囥€傚浘鍍忔槧灏勶細鍖呭惈澶氫釜鍙偣鍑诲尯鍩熺殑鍥惧儚鐨勬浛浠ｆ枃鏈簲涓洪摼鎺ラ泦鎻愪緵鏁翠綋涓婁笅鏂囥€傛澶栵紝姣忎釜鍙崟鐙偣鍑荤殑鍖哄煙閮藉簲璇ユ湁鏇夸唬鏂囨湰鏉ユ弿杩伴摼鎺ョ殑鐩殑鎴栫洰鐨勫湴銆傚叾瀹炶繕鏈夊緢澶氬叧浜巃lt鐨勭煡璇嗐€傚鏋滄垜浠殑椤甸潰鑳藉仛鍒拌繖涓€鐐癸紝閭ｆ墠鐪熸浠庢牴婧愬紑濮嬫€濊€冿紝寮€濮嬩紭鍖栫敤鎴蜂綋楠屻€俰mg鍏冪礌鍜岃儗鏅厓绱犱箣闂寸殑閫夋嫨鏄彲浠ョ殑锛屾墍浠ワ紝璇村埌杩欓噷锛岃繕鏈変竴涓湁瓒ｇ殑鍦版柟鑷劧瑕佹彁鍒般€備篃灏辨槸璇达紝浠€涔堟椂鍊欏簲璇ヤ娇鐢?img>鍏冪礌锛屼粈涔堟椂鍊欏簲璇ヤ娇鐢ㄨ儗鏅祵鍏ュ浘鍍忥紵鎴戜滑鍙互浠庢€ц兘鍜屽姛鑳戒袱鏂归潰鏉ヨ€冭檻锛歵ypeimgbackgroud-imagelayerpositionforegroundbackgrounddefaultinitialsizevariablefixed鏄惁浼氬彂鐢焤eflow閲嶇粯鎴栬€呭浘鐗囧姞杞藉け璐ュ彲浠ヨЕ鍙戝厓绱犵殑onerror浜嬩欢鏉ユ樉绀篴lt灞炴€т笉鏄痸alid璁剧疆寮傚父澶勭悊鍦烘櫙浣跨敤鍦烘櫙鏍囪瘑銆佷骇鍝佸浘鐗囥€佸箍鍛婂浘鐗囥€佽楗版€ч潪璇箟鍐呭绛夈€傚叾瀹炴€ц兘骞朵笉鏄牳蹇冭€冭檻锛屽洜涓烘垜浠笂闈篃鎻愬埌浜唋oading="lazy"灞炴€у彲浠ョ敤鍦ㄤ粖澶╄妯″緢澶с€傚浘鍍忓彲浠ラ€氳繃鏈満鏀寔寤惰繜鍔犺浇銆傛垜浠湪鑰冭檻閫夋嫨杩樻槸background-image鐨勬椂鍊欙紝鏇村鐨勮繕鏄€冭檻image鐨勫姛鑳姐€備竴鑸€岃█锛宐ackground-image鐢ㄤ綔淇グ鐨勩€佹棤璇箟鐨勮楗板浘鐗囷紝鏍囩鐢ㄤ簬鏇撮噸瑕佺殑缃戦〉鍐呭銆傜敱浜庤涔夊浘鍍忔槸浣跨敤鏄剧ず鐨勶紝鍏跺ソ澶勪箣涓€鏄綋鍥惧儚鍔犺浇澶辫触鏃讹紝鍙互瑙﹀彂璇ュ厓绱犵殑onerror浜嬩欢銆傛垜浠彲浠ユ湁鏁堝湴浣跨敤瀹冩潵澶勭悊鍥惧儚鐨勫紓甯搞€傚浘鐗囩殑寮傚父澶勭悊褰撳浘鐗囬摼鎺ユ寕浜嗭紝鍔犺浇澶辫触锛屾垜浠簲璇ユ€庝箞澶勭悊姣旇緝濂藉憿锛熸湁寰堝鏂规硶鍙互澶勭悊瀹冦€傚湪寮犳柊鏃€佸笀鐨勮繖绡囨枃绔犫€斺€斿浘鐗囧姞杞藉け璐ュ悗CSS鏍峰紡澶勭悊鐨勬渶浣冲疄璺典腑鏈変竴涓緢濂界殑瀹炶返銆傛牳蹇冩€濇兂鏄細鍒╃敤鍥剧墖鍔犺浇澶辫触瑙﹀彂鍏冪礌鐨刼nerror浜嬩欢锛岀粰鍔犺浇澶辫触鐨?img>鍏冪礌娣诲姞鏍峰紡绫伙紝浣跨敤鏂版坊鍔犵殑鏍峰紡绫伙紝閰嶅悎浼厓绱?img>鍏冪礌鐨刟lt淇℃伅锛屾樉绀洪粯璁ゅ簳鍥剧殑鍚屾椂锛岃繕鍙互鏄剧ず鍏冪礌鐨刟lt淇℃伅img.error{position:relative;鏄剧ず锛氬唴鑱斿潡锛泒img.error::before{鍐呭锛氣€溾€濓紱/**瀹氫綅浠ｇ爜**/background:url(error-default.png);}img.error::after{content:attr(alt);/**瀹氫綅浠ｇ爜**/}鎴戜滑浣跨敤涔嬪墠鐨勪吉鍏冪礌鏉ュ姞杞介粯璁ょ殑閿欒搴曞浘锛屼娇鐢ㄤ箣鍚庣殑浼厓绱犳潵鏄剧ず鍥剧墖鐨刟lt淇℃伅锛歄K锛岃嚦姝わ紝瀹屾暣鐨勫浘鐗囧氨绠椾簡澶勭悊瀹屾垚锛岃繖寰堝ソ鍦拌В閲婁簡涓轰粈涔堟垜浠簲璇ュ鍏锋湁璇箟鍜宎lt淇℃伅鐨勫浘鍍忎娇鐢?img>鍏冪礌銆傝繖鏄洜涓猴紝褰撳彂鐢熼敊璇椂锛屾垜浠彲浠ユ洿濂藉湴鏄剧ず鍥剧墖锛岃鐢ㄦ埛鐩磋鍦扮湅鍒版浛浠ｅ唴瀹广€傚畬鏁寸殑demo鍙互鐐硅繖閲岀湅锛欳odePenDemo--鍥剧墖澶勭悊褰撶劧涓婇潰鐨勮В鍐虫柟妗堣繕鏈変袱涓皬闂锛氬浜庢瘡涓?img>鍏冪礌锛屾垜浠渶瑕佸啓涓€涓猳nerror="this.classList.add('閿欒'锛?鈥濅唬鐮侊紝鏈夌偣閲嶅銆傚洜姝わ紝杩欓」宸ヤ綔涔熷彲浠ラ€氳繃JavaScript鍏ㄥ眬瀹屾垚锛岃€屾垜浠彲鑳介渶瑕佸垽鏂璦lt鐨勫€兼槸鍚︿负绌猴紝濡傛灉涓虹┖鍒欎娇鐢ㄩ粯璁ゅ浘鐗嘺lt浣滀负coverletter銆傛棭骞?img>绛夋浛鎹㈠厓绱犳槸娌℃湁浼厓绱犵殑銆傚悗鏉hrome/Firefox娴忚鍣ㄩ€愭笎鏀寔鍦?img>鐨剆rc鎷夊彇澶辫触鏃舵樉绀?img>鍏冪礌鐨勪吉鍏冪礌銆備笂闈㈢殑瑙ｅ喅鏂规锛屼絾鏄洰鍓峉afari杩樹笉鏀寔杩欎釜鍔熻兘锛屾墍浠ュ湪Safari涓嬶紝鎴戜滑鍙兘浼氬緱鍒板涓嬬粨鏋滐細鏁堟灉杩樺彲浠ワ紝浣嗘槸搴曞浘娌℃湁鏄剧ず銆傚湪瀹為檯浣跨敤杩囩▼涓紝鎴戜滑闇€瑕佺◢寰簡瑙ｄ竴涓嬨€備綔涓烘湰绔犵殑鎬荤粨锛屾弿杩颁簡鍥惧儚璧勬簮鐨勫閿欏拰鍙闂€у鐞嗐€傛牳蹇冨唴瀹规槸锛氬浜庡浘鐗囦俊鎭紝鎴戜滑闇€瑕佸ぇ鑷撮伒寰互涓嬫棤闅滅鍘熷垯锛氭墍鏈夋湁鎰忎箟鐨刬mg鍏冪礌閮藉繀椤绘湁alt灞炴€ф彁渚涘叾浠栨浛浠lt灞炴€х殑鏂规硶浣跨敤杈呭姪鎶€鏈殣钘忚楗板浘鐗囨纭娇鐢╝lt灞炴€т互浜嗚В涓嶅悓鐨勫満鏅疻hatcontent搴旇濉湪altimg鍏冪礌鍜宐ackground鍏冪礌涔嬮棿鐨勯€夋嫨鍥剧墖寮傚父澶勭悊鐨勬渶浣冲疄璺垫暣涓幇浠ｅ浘鐗囨€ц兘浼樺寲鍜屼綋楠屼紭鍖栨寚鍗楀埌姝ょ粨鏉熴€傛暣涓郴鍒楁枃绔犲寘鍚簡寰堝鏂扮殑瑙勮寖鍜岀壒鎬э紝闇€瑕佸ぇ瀹跺湪瀹炶返涓牴鎹疄闄呮儏鍐电伒娲婚€夋嫨浣跨敤銆傚悓鏃讹紝鎴戜滑涔熷簲璇ヨ兘澶熺湅鍒帮紝鍓嶇鎶€鏈彧鏄湪杩欎釜灏忛鍩燂紝鍦ㄤ笉鏂湴杩唬鍒涙柊銆傝櫧鐒跺緢闅撅紝浣嗚繕鏄涓嶆柇鍏呭疄鑷繁锛屾墠鑳借窡涓婃柊鐨勬疆娴併€傚叡鍕夈€傜粓浜嶰K浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽氨涓嶈閿欒繃鎴戠殑鍏紬鍙封€斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>