w3pop.com :: ÍøÂçѧԺ :: Éè¼ÆÀíÄî :: ±ÜÃâͼÐÎÎļþ¹ýÁ¿
When designing a website, it's easy to start loading it up with graphics. While tempting, you have to resist -- otherwise, you'll end up with graphical overload.
µ±Éè¼ÆÒ»¸öÍøÕ¾Ê±£¬Ò»°ã¶¼»áºÜϲ»¶ÏÈ×°ÔØÍ¼ÐÎÎļþ¡£µ±Äã³¢ÊÔÕâÑù×öµÄʱºò£¬Äã±ØÐëÏÈÈÌÄÍ£¬·ñÔòµÄ»°£¬Äã¾ÍÓ¦¸ÃÂíÉÏÖÕֹʹÓùýÁ¿µÄͼÐÎÎļþ¡£
Why is that a bad thing? Here's why.
Ϊʲô²»Òª¹ýÁ¿Ê¹ÓÃͼÐÎÎļþ£¿ÏÂÃæ¾ÍÊÇÔÒòËùÔÚ¡£
It Takes Too Long to Download
µ¼ÖÂÏÂÔØÊ±¼ä¹ý³¤
The first reason to cut down on graphics is that the more there are, and the larger they are, the longer it will take each of your pages to download. People are impatient when waiting for pages to download -- you only have around 5 seconds before your visitor hits the Back button.
±ÜÃâʹÓùý¶àµÄͼÐÎÎļþµÄµÚÒ»µãÔÒò¾ÍÊÇ£ºÈç¹ûͼÐÎÎļþ¹ý¶à£¬»ò¹ýÓÚÅÓ´ó£¬ÄÇôÿÕÅÒ³ÃæµÄ¼ÓÔØÊ¼þ¾Í»áÔ½³¤¡£ÈËÃÇûÓÐÄÇô¶àµÄÄÍÐĵȴýÒ³Ãæ¼ÓÔØ£¬ËûÃÇÒ»°ãµÈ´ý5ÃëÖÓÒÔºó±ã»áµã»÷·µ»Ø°´Å¥¡£
What can you do about this? Apart from using fewer pictures, you can also make sure that you resize your images in a graphics editor. This actually makes their file sizes smaller. If you just resize images by specifying a width and height in HTML or CSS, they will still be slow to download because the full file size is being used.
ÄÇôÕë¶ÔÕâµã£¬Äã¿ÉÒÔ×öÐ©Ê²Ã´ÄØ£¿³ýÁËʹÓøüÉÙµÄͼÐÎÎļþÍ⣬Ä㻹¿ÉÒÔʹÓÃͼÐÎ±à¼Æ÷ÖØÐµ÷ÕûÄãµÄͼÐδóС¡£ÕâÑù×ö¿ÉÒÔÕæÕýµØ¼õÉÙͼÐÎÎļþµÄ³ß´ç¡£Èç¹ûÄã½öÊÇͨ¹ýʹÓÃHTMLºÍCSSÀ´Ö¸¶¨Í¼Æ¬µÄ¿í¶ÈºÍ¸ß¶È£¬ÄÇôͼƬÏÂÔØÆðÀ´»¹ÊÇ»áºÜÂýµÄ£¬ÒòΪͼƬµÄʵ¼Ê´óС²¢Ã»Óиü¸Ä¡£
You should consider turning on compression in your image editor. JPEG files can often be compressed by up to 25% before there's a noticeable difference in quality. Try different formats and compression levels to see what works.
ÄãÓ¦¸Ã¿¼ÂÇʹÓÃͼÐÎ±à¼Æ÷À´Ñ¹ËõÄãµÄͼÐÎÎļþ¡£JPEGÎļþ¿ÉÒÔ½«Í¼ÐÎÎļþѹËõµ½25%¶ø±£Ö¤Ò»¸ö¼«µÍµÄÊ§Õæ¶È¡£ÄãÓ¦¸Ã³¢ÊÔʹÓò»Í¬µÄ¸ñʽºÍѹËõˮƽÀ´²âÊÔʵ¼ÊЧ¹û¡£
It Gets Too Busy
Ëü»áʹÕû¸öÕ¾µãµÄ¹¤×÷±äµÃ¸ü¼Ó·±Ã¦
If you use a site with more than 4 images on the page at once, your eyes are being pulled all over the page. They're not sure where to focus because the page simply has too much going on.
Èç¹ûÒ»µ©ÄãÔÚÒ»ÕÅÒ³ÃæÉÏʹÓó¬¹ý4ÕÅͼƬ£¬ÄÇôÄã»á¸Ðµ½ÑÛ»¨çÔÂÒ¡£Äܲ»ÄÜÈ·¶¨¸Ã¼¯Öй۲ìÄÄЩµØ·½£¬ÒòÎªÒ³ÃæÉÏÓÐÌ«¶àµÄ¶«Î÷ÁË¡£
Look at the front pages of newspapers, and notice how they lead on 1 picture. Putting 2 pictures on a front page is considered to be poor: the reader doesn't know where to look.
¿´¿´±¨Ö½µÄÍ·°æ£¬¿´¿´ËûÃÇÊÇÔõÑù·ÅÖÃ×ÅÒ»ÕÅͼƬµÄ¡£ÔÚÊ×Ò³·ÅÖÃÁ½ÕÅͼƬ¿ÉÄÜ¾Í»á´øÀ´Âé·³£ºÔĶÁÕß»áŪ²»Çå³þµ½µ×¸Ã´ÓºÎ´¦ÔĶÁ¡£
That goes double for websites, where the viewable area is much smaller than a newspaper page. Even if you have more than 1 thing to say, it's better to 'go large' with 1 picture and then explain the other things in text, next to or below it.
Ïà¶ÔÓÚ±¨Ö½À´½²£¬ÍøÕ¾µÄ¿ÉÊÓ»¯ÇøÓò¾Í¸ü¼ÓÏ¡ÉÙÁË¡£¼´Ê¹ÄãÒª±í´ïµÄÊÂÎï²»Ö¹Ò»¼þ£¬ÄÇôÄãÒ²×îºÃÖ»·ÅÖÃÒ»ÕÅͼƬ£¬È»ºóÔÚÕâÕÅͼƬµÄÅԱ߻òÕßÏ·½ÓÃÎÄ×ÖÀ´²¹³ä˵Ã÷¡£
It Distracts from the Content
²»ÄÜʹÔĶÁÕßרעÓÚÔĶÁÎı¾ÄÚÈÝ
Users visit your site to get information, not to look at your graphics. Too many graphics will distract from your content, or, worse, force readers to search for it. Any time your graphics get in the way of people readily using your site, you're suffering from graphical overload. And that is a bad thing.
Óû§·ÃÎÊÕ¾µãµÄÄ¿µÄÊÇ»ñÈ¡ÐÅÏ¢£¬¶ø²»ÊDzéÕÒͼƬ¡£¹ý¶àµÄͼƬ»á·ÖÉ¢ËûÃÇÔĶÁÎı¾ÄÚÈݵÄ×¢ÒâÁ¦£»»òÕߣ¬¸üÔãµÄÊÇ£¬»áʹµÃÓû§¶ÔÕ¾µãÐÅÏ¢ÎÞ´Ó²éѯ¡£ÈκÎʱºò£¬µ±Äã·ÅÖõÄͼƬ×è°ÁËÓû§¶ÔÄãÕ¾µãµÄÕý³£Ê¹Óã¬ÄÇô£¬ÄãµÄÕ¾µã¾ÍÃæÁÙÁËͼƬ¹ýÁ¿µÄ¾³µØ¡£Õâ²¢²»ÊÇÒ»¼þºÃÊÂÇé¡£
What's the solution? Simply decide which of all those graphics are really necessary. Remember, don't add graphics just to look nice, each graphic must have a specific purpose.
ÄÇô£¬½â¾ö·½°¸ÊÇÊ²Ã´ÄØ£¿Ïȼòµ¥µØ¿´¿´£¬ËùÓÐÕâЩͼÐÎÊÇ·ñÊDZØÐëµÄ¡£Çë¼Çס£¬²»ÒªÎªÁËÍøÕ¾µÄÃÀ¹Û¶øËÁÒâÌíÖÃͼƬ¡£·ÅÖõÄÿÕÅͼƬ¶¼Ó¦¸ÃÄܹ»ÎᄀÆäÓá£
An Exception: Photo Galleries
ÕâÀïÓÐÒ»¸öÀýÍ⣺Ïà²á
If the purpose of your site is photo presentation, then clearly multiple images are appropriate. However, don't just stick up several large photographs -- provide thumbnails: smaller versions of each image. If interested, the visitor can click on 1 to make it larger.
Èç¹ûÄãµÄÕ¾µã´¿´âÊÇÒ»¸öÓëÏà²áÏà¹ØµÄÕ¾µã£¬ÄÇôÇå³þµØ·ÅÖø÷ÀàͼƬÊǺÏÊʵġ£È»¶ø£¬²»Òª×¨×¢ÓÚ·ÅÖÃÄÇЩ¹ý´óµÄÕÕÆ¬Í¼Æ¬£¬¾¡¿ÉÄܵطÅÖÃÄÇЩ¾«ÖµÄСͼƬ£ºÏÈ·ÅÖÃСͼƬ£¬Èç¹û·ÃÎÊÕßÐËȤµÄ»°£¬¿ÉÒÔµã»÷ÕâÕÅСͼƬÀ´ÏÔʾ¶ÔÓ¦µÄ´óͼ¡£
This fits more pictures on each page, and avoids wasting user download time and your bandwidth.
ʹÓÃÕâ¸ö·½·¨¿ÉÒÔÔÚÿÕÅÒ³ÃæÉÏ·ÅÖÃÊýÁ¿ÅÓ´óµÄͼƬ¼¯£¬Í¬Ê±Ò²²»»áÀË·ÑÓû§µÄÏÂÔØÊ±¼äºÍÄãµÄÍøÕ¾´ø¿í¡£
Keep in mind that in all web design, the images are there strictly to support the content. Even when the content is graphical.
ÇëÓÀÔ¶µØ¼Çס£¬ÔÚÄãËù½øÐеÄËùÓÐÍøÒ³Éè¼ÆÖУ¬·ÅÖõÄͼƬһ¶¨ÒªÑϸñÖ§³ÖÄÚÈÝ¡£¼´Ê¹Õû¸öÍøÕ¾µÄÄÚÈÝÊÇÒÔͼƬÐû´«ÎªÖ÷µÄ¡£
ÆÀÂÛ (0)
All