´´½¨Á¼ºÃwebÌåÑé:4¸öÓÅ»¯Òƶ¯Web²úÆ·µÄ½¨Òé(2)

http://www.itjxue.com  2015-08-07 20:49  À´Ô´:δ֪  µã»÷´ÎÊý: 

ýÌ壨Media£©

ÏìӦʽWebÉè¼ÆÁíÍâÒ»¸ö·½·¨ÊÇʹÓõ¯ÐÔͼƬ£¨flexible images£©ºÍÊÓƵ¡£µ±±»ÉèÖÃΪÌî³äËûÃÇÈÝÆ÷´óСµÄ¸ñʽµÄʱºò£¬µ¯ÐÔͼÏñÄܹ»¸ù¾Ýä¯ÀÀÆ÷ÊÓͼÖеĿÉÓÿհ×ÇøÀ´¶¯Ì¬µ÷Õû×Ô¼ºµÄ´óС¡£

ÔڽϴóµÄä¯ÀÀÆ÷ÊÓͼÖУ¬µ¯ÐÔͼƬ¿ÉÒÔͨ¹ýÏÔʾ×ÔÉíµÄԭʼ´óСÀ´Ìî³ä¸ü¶àµÄ¿Õ°×ÇøÓò¡£ÔÚ½ÏСµÄä¯ÀÀÆ÷ÊÓͼÖУ¬ÏàͬµÄͼƬ¿ÉÒÔËõ·Å×ÔÉí´óС´Ó¶øÕ¼ÓýÏÉٵĿհ×ÇøÓò¡£ÎªÁËʵÏÖÕâÑùµÄЧ¹û£¬ä¯ÀÀÆ÷ÐèҪһЩ½Ï´óµÄͼƬ£¬ÕâЩͼƬ²»¹ÜÊÇÔÚ·Å´ó»òÕßËõСµÄʱºò¿´ÆðÀ´¶¼ÒªÓв»´íµÄЧ¹û¡£

ÏÖÔÚµÄÎÊÌâÊÇ£¬Í¼ÏñÔ½´ó£¬ÎļþµÄ´óС¾ÍÔ½´ó¡£ËäÈ»²¢²»ÊÇËùÓеÄWebä¯ÀÀÆ÷¶¼ÒÔËûÃǵÄԭʼ´óСÀ´ÏÔʾͼÏñ£¬µ«ä¯ÀÀÆ÷ÐèÒªÏÂÔØÕû¸öͼƬÎļþ£¬ÕâÑù»áºÜ¿ìµ¼ÖµÍÐÔÄÜ£¬³ý·ÇÕâÑù×ö£º

  1. ½áºÏʹÓÃCSS Media Queries £¬±³¾°Í¼Æ¬²»ÏÔʾ£¬ÒÔ¼°²»Òª¼ÓÔؽö½öΪ½Ï´óä¯ÀÀÆ÷ÊÓͼ׼±¸µÄ´óͼµÈ·½·¨¡£ÕâÖÖ·½·¨¶ÔÓÚÖ¸¶¨Í¼Æ¬±êÇ©£¨image tags£©µÄÄÇЩͼƬÊÇÎÞЧµÄ£¬½ö½ö¶ÔʹÓÃCSSͼƬ±³¾°µÄÄÇЩͼƬÓÐЧ¹û£¬ÕâÑù¾ÍÏÞÖÆÁË´Ë·½·¨µÄÊÊÓÃÐÔ¡£
  2. Äã¿ÉÒÔʹÓÃÏñÏìӦʽͼƬ£¨Responsive Images£©ÕâÑùµÄ½â¾ö·½°¸£¬ÕâÖÖ·½·¨ÒÀÀµJavascriptÓïÑÔÀ´½«HTML±ê¼ÇµÄСͼƬ¸ù¾Ýä¯ÀÀÆ÷ÊÓͼ´óСµÄÔö¼ÓÌæ»»³É½Ï´óµÄͼƬ¡£½ûÓÃJavascriptºÍcookie¹¦ÄܵÄä¯ÀÀÆ÷Ö»Äܹ»ÏÔʾÏàÓ¦µÄСͼƬ¡£
  3. ³¢ÊÔÀàËÆnoscript tagÕâÑùµÄ·½·¨£¬À´×èÖ¹²»±ØÒªµÄͼƬ¼ÓÔØ¡£
  4. ʹÓ÷þÎñÆ÷¶ËµÄ½â¾ö·½°¸À´¼ì²â·ÃÎÊÄãµÄÕ¾µãµÄÉ豸£¬²¢ÇÒÖ»´«µÝһЩ±ØÒªµÄ¶«Î÷¡£

Òþ²ØÔÚÕâЩ½â¾ö·½°¸ÏÂÃæµÄÏàͬÀíÄîÊÇ£¬Ê¹ÓÃmedia queries£¬±³¾°Í¼Æ¬£¬JavaScript»òÕß·þÎñÆ÷¶ËµÄ½â¾ö·½°¸µÈ·½·¨À´½öÏòÉ豸³ÊÏÖ±ØÒªµÄ¶«Î÷¡£ÕâÖÖ·½·¨¿ÉÒÔÏÔÖøµØ¼õÉÙÎļþ´«Êä´óС²¢ÇÒÌá¸ßÍøÕ¾ÐÔÄÜ¡£

¾Ù¸öÀý×ÓÀ´½²£¬ BagcheckµÄÒƶ¯ÓÅ»¯Ä£°åΪÿ¸öÁбíÉϵÄÏîÄ¿Ìṩ50×50ÏñËØ´óСµÄѹËõͼƬ£¨Æ½¾ù´óСΪ3KB£©£¬¶øBagcheck×ÀÃæÓÅ»¯Ä£°åÔòΪÏàÓ¦µÄÁбíÏîÄ¿Ìṩ200×125ÏñËØ´óСµÄͼƬ£¨Æ½¾ù´óСΪ15KB£©¡£ÓµÓÐ20¸ö±íÏîÒ²¾ÍÊÇ300KB´óСµÄ²îÒìÍâ¼ÓÉÙÓÚ20¸öhttpÇëÇóµÄÒ³Ãæ¶ÔÓÚÍøÕ¾ÐÔÄÜÓзdz£´óµÄÓ°Ïì¡£ÎÒÃÇÓµÓжÀÁ¢µÄÒƶ¯Ä£°å£¬ËùÒÔ¾ÍÖ»ÐèÒªÔÚÒƶ¯É豸ÉÏÏÔʾÁбíµÄÇ°10¸ö±íÏÕâÑù¾Í¿ÉÒÔÁíÍâ¼õÉÙ30KBµÄ¸ºÔØ¡£

×ÀÃæÉ豸ÉÏÒ»¸ö·ÖÀàÒ³Ãæ×ܹ²ÓÐ360KB´óСµÄͼƬ£¬¶øÏàÓ¦µØÒ³ÃæÔÚÒƶ¯É豸ÉÏÖ»ÓÐ30KB´óС£¬ÕâȷʵÊǸö·Ç³£´óµÄ²îÒì¡£

µ«ÊÇÓÅ»¯Í¼Æ¬²»½ö½öÊÇÎļþ´óСµÄÓÅ»¯£¬ÄãÒ²¿ÉÒÔΪСÆÁÄ»É豸¾«ÐÄÉè¼ÆһЩÏÔʾͼƬ£¬¶ø²»ÊÇͨ¹ýËõ·ÅÀ´ÊÊÓ¦ÆÁÄ»µÄ´óС¡£µ±Í¼Æ¬ÖеÄÄÚÈݺÜÖØÒªµÄ»°£¬ÕâÑù×Ó×ö¾ÍÏÔµÃÓÈÆäÖØÒª¡£

ͬÑùµÄϵͳ¿ÉÒÔÓÃÀ´ÓÅ»¯ÊÓƵÏÔʾ¡£ÔÚËùÓÐÉ豸ÉÏ£¬ÎÒÃÇÏ£Íûͨ¹ý¼òµ¥µÄµ¥»÷²Ù×÷¾ÍÄܹ»Íê³ÉÊÓƵ»Ø·Å¡£ËùÒÔÎÒÃǵÄ×ÀÃæÄ£°å½«ÊÓƵÎļþÖ±½ÓǶÈëµ½Ò³ÃæÖУ¬¶øÒƶ¯Ä£°å½ö½öÏÔʾһ¸öËõÂÔͼ£¬Á½Õ߶¼Ö»ÐèҪͨ¹ý¼òµ¥µÄµ¥»÷²Ù×÷¾Í¿ÉÒÔ¿ªÊ¼²¥·ÅÊÓƵ¡£ÔÚÒƶ¯É豸ÉÏÃæʹÓÃËõÂÔͼ¿ÉÒÔʹµÃÊÓƵ¼ÓÔØËٶȸü¿ì£¬²¢ÇÒÄܹ»¸üºÃµØ¿ØÖÆÒ³Ãæ²¼¾Ö/ÏñËسߴ硣

(ÔðÈα༭£ºIT½ÌѧÍø)

¸ü¶à