نقش تصاوير در طراحي سايت

نقش تصاوير در طراحي سايت

تصاوير بخش بسيار مهمي از قسمت قابل نمايش از هر وب سايت را تشکيل مي دهند و ميزان حجم , کيفيت , و نوع آنها تاثير قابل ملاحظه اي در استاندارد بودن و جذابيت هر چه بيشتر يک طراحي سايت دارد.
در اينجا سه فرمت اصلي تصاوير مورد استقاده در طراحي سايت و نحوه و زمان استفاده از هر کدام را بررسي مي کنيم.

1 . فرمت GIF
اين فرمت مشخص کننده? تصاوير گرافيکي ثابت يا متحرک است. اين نام کوتاه شده Graphics Interchange Format که مفهوم لغوي آن در زبان فارسي قالب مبادله? گرافيک است. اين قالب گرافيکي توسط شرکت CompuServe در سال ???? ميلادي معرفي شده است و امروزه به طور گسترده در وب مورد استفاده قرار ميگيرد.
در اين فرمت تصويري از تکنيک LZW (Lempel-Ziv-Welch) براي فشرده سازي تصاوير استفاده مي شود که يک تکنيک فشرده سازي ( Lossless compression ) است.تعداد رنگ هاي مورد استفاده در اين فرمت با توجه به ? bit بودن آن ??? رنگ است که يک بازه رنگ نسبتا محدود براي استفاده در اختيار شما قرار ميدهد .اين ??? رنگ از يک محدوده رنگ بزرگتر (?? bits: 8 red, 8 green, 8 blue) با ??,???,??? رنگ انتخاب مي شود. ( با توجه به ترکيب رنگ و نوع تصوير ) به دليل محدوديت تعداد رنگ ها ازاين فرمت براي تصاويري با تعداد رنگ کمتر از ??? استفاده ميشود .براي تصاوير ديجيتال و يا تصاوير داراي Gradiant از اين فرمت استفاده نکنيد . زيرا به دليل محدوديت تعداد رنگها باعث کم کيفيت و نامرتب شدن تصاوير شما خواهد شد.
اين فرمت براي تصاويرخطي ، عناصر با لبه هاي تيز و تعداد رنگ محدود بسيار مناسب است . ( مانند لوگوهايي با چند رنگ و لبه هاي تيز، خطوط و نمودارها )
يکي از قابليت هاي مهم اين فرمت تصويري قابليت ساخت تصاوير متحرک است. مي توانيد با استفاده از نرم افزارهاي ويرايش تصاوير مانند Photoshop و يا نرم افزارهايي که براي ساخت تصاوير متحرک با فرمت GIF برنامه ريزي شده اند ، براي ساخت تصاوير متحرک ساده خود استفاده کنيد. ( Animated gif )

طراحي سايت وردپرس      طراحي پورتال

2 . فرمت JPG
استاندارد مورد استفاده براي فشرده سازي تصاوير که نام آن ، کوتاه شده Joint Photographic Experts Group ، نام سازمان ايجاد کننده اين استاندارد در سال ???? است.
از اين استاندارد بيشتر براي ذخيره سازي تصاوير ديجيتال و تصاويري که با استفاده از دوربين هاي عکاسي گرفته شده است ( که داراي ميليونها رنگ هستند ) استفاده مي شود. اين استاندارد به شما اجازه ميدهد با مقداري تغيير در خصوصيات به حجم مناسبي براي انتشار در محيط طراحي سايت برسيد.تکنيک فشرده سازي تصاوير در اين فرمت ( Lossy Compression ) است به اين معني که پس از تغيير خصوصيات براي فشرده سازي تصاوير ، کيفيت گذشته تصاوير از دست خواهد رفت و به کيفيت پايين تري از تصاوير خواهيم رسيد بنا براين در تغيير خصوصيات با استفاده از اين استاندارد دقت نمائيد. در استفاده از اين استاندارد براي تصاويري همراه با متن ، الگوها و سطوح با لبه هاي تيز بسيار دقت کنيد . زيرا کم کردن خصوصيات به ميزان زياد باعث بهم ريختگي در لبه هاي متن و سطوح ميشود.
با کمي تمرين و تجربه ميزان مناسب تغيير در اين خصوصيات را درک خواهيد کرد و مي توانيد به طور مناسب از آن استفاده نمائيد.ميتوانيد از نرم افزارهاي ويرايش تصاوير مانند Photoshop ( گزينه Save for web در منوي File ) براي تغيير در خصوصيات تصاوير استفاده نمائيد. طراحي سايت فروشگاهي       شرکت طراحي وب سايت

3 . فرمت PNG
نام آن کوتاه شده کلمه Portable Network Graphics است که در سال ???? به عنوان جايگزيني پيشرفته تر و مناسب براي GIF (Graphics Interchange Format) به وجود آمد.
PNG از محدوده رنگ ??-bit RGB or 32-bit RGBA و همچنين Grayscale ( همراه و يا بدون alpha channel ) پشتيباني مي کند.PNG فرمتي است که براي انتشار در محيط وب به وجود آمده است و براي کارهاي چاپي مورد استفاده قرار نمي گيرد و به همين دليل از محدوده رنگ فايلهاي چاپي نيز ( CMYK ) پشتيباني نمي کند. يکي از خصوصيات جذاب اين فرمت تصوير براي طراحان و توسعه دهندگان وب خاصيت alpha channel آن مي باشد که موجب ايجاد تصاوير Transparent ( زمينه شفاف ) مي شود.
از ديگر خصوصيات موجود در فرمت هاي GIF و PNG (Lossless compression ) از دست ندادن کيفيت ظاهري پس از فشرده سازي تصوير است ( بر خلاف استاندارد JPEG )
در فرمت PNG از تکنولوژي ( ZLib ) براي فشرده سازي تصاوير استفاده ميشود که کارآمد تر از تکنيک فشرده سازي در GIF است (LZW ) دو نوع متفاوت از فرمت PNG با کيفيت متفاوت در صفحات وب مورد استفاده قرار ميگيرند.
PNG8 (8-bit) ازنظر محدوديت رنگ مانند .gif است (??? رنگ حداکثر) ، اما ميتوان از خاصيت alpha channel آنها براي ايجاد تصاوير شفاف استفاده نمود.
PNG24 (24-bit) اجازه استفاده از بازه بيشتري از رنگ ها را به شما ميدهد.
متاسفانه در حال حاضر تعدادي از مرورگرها به صورت کامل و مناسب از اين فرمت تصوير پشتيباني نمي کنند و اين موضوع مشکلات بسياري را براي طراحان وب به وجود آورده است. اما استفاده از اين فرمت کاملا جايگاه خود را پيدا نموده است و در نهايت تمامي مرورگرها مجبور به پشتيباني از اين فرمت خواهند شد . البته راه هاي خاصي براي نمايش صحيح اين فرمت در مرورگرهاي قديمي که از اين فرمت پشتيباني نميکنند وجود دارد.
استفاده از اين فرمت براي ذخيره سازي تصاويري با کيفيت بالا و اندازه کوچک بسيار مناسب است . مانند لوگوهايي با تعداد رنگ زياد و لبه هاي گرد ، يا آيکون ها در سايز هاي کوچک .
بهينه سازي تصاوير براي انتشار در محيط وب
در اينجا سعي خواهيم کرد به طور عملي تفاوت ما بين فرمت تصاوير و نحوه کار با آنها را توضيح دهيم. براي اين کار ما از نرم افزار فتوشاپ استفاده خواهيم کرد و در زير مراحل انجام کار را ملاحظه مي کنيد.
پس از باز کردن تصوير مورد نظر در محيط فتوشاپ از منوي file گزينه Save For Web را انتخاب نمائيد.
پس از باز شدن پنجره مخصوص براي ذخيره تصاوير براي انتشار در محيط وب فرمت تصوير مورد نظر را انتخاب نمائيد.
به طور مثال براي فرمت JPG مي توانيد با افزايش يا کاهش درصد کيفيت به حجم و کيفيت مورد نظر خود برسيد
در تصوير بالا ، ذخيره سازي تصاوير با استفاده از درصد کيفيت هاي مختلف را ملاحظه مي فرمائيد.
تفاوت در ذخير سازي با استفاده از دو فرمت GIF و JPG
ملاحظه مي کنيد که پس از ذخيره سازي با استفاده از فرمت PNG سايز تصوير بدون تغيير چشمگيري در کيفيت تصوير افزايش پيدا کرده است. بهترين گزينه مي تواند فرمت JPG با کيفيت ?? درصد باشد
با استناد به تصوير بالا ملاحظه ميکنيد که فرمت GIF براي ذخيره سازي تصاويري شامل نوشته ها و خطوط صاف بهتر از JPG عمل ميکند. هزينه طراحي سايت     

در تصاوير بالا تفاوت ميان تصاوير با پس زمينه هاي شفاف را در فرمت هاي مختلف ملاحظه مي فرمائيد. همانطور که ملاحظه مي کنيد براي ذخيره تصاوير با پس زمينه شفاف بهترين گزينه مي تواند PNG 24bit باشد . در مورد تصاويري با لبه هاي گرد و پس زمينه شفاف مي توان از فرمت هاي GIF و PNG 8 bit هم استفاده نمود .

1. https://web24.blogiran.net/Post/13/Business-Center-Website-Design--Shopping-Center-Website-Design.html
2. https://web-oline.blogiran.net/Post/13/Sports-site-design.html
3. https://web-oline.blogiran.net/Post/19/Service-site-design--Service-company-site-design.html
4. https://web-oline.blogiran.net/Post/17/Car-site-design--car-show-site-design.html
5. https://web-oline.blogiran.net/Post/15/Business-Center-Website-Design--Shopping-Center-Website-Design.html
6. https://tejarat-farda.blogiran.net/Post/12/Sports-site-design.html
7. https://tejarat-farda.blogiran.net/Post/18/Service-site-design--Service-company-site-design.html
8. https://tejarat-farda.blogiran.net/Post/16/Car-site-design--car-show-site-design.html
9. https://tejarat-farda.blogiran.net/Post/14/Business-Center-Website-Design--Shopping-Center-Website-Design.html
10. http://iran-electronic.royablog.ir/post/18/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%8A+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%B4%D8%B1%D9%83%D8%AA+%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%8A
11. http://iran-electronic.royablog.ir/post/16/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%AE%D9%88%D8%AF%D8%B1%D9%88+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%86%D9%85%D8%A7%D9%8A%D8%B4%DA%AF%D8%A7%D9%87+%D9%85%D8%A7%D8%B4%D9%8A%D9%86
12. http://iran-electronic.royablog.ir/post/14/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%85%D8%B1%D9%83%D8%B2+%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%85%D8%B1%D9%83%D8%B2+%D8%AE%D8%B1%D9%8A%D8%AF
13. http://iran-electronic.royablog.ir/post/12/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%88%D8%B1%D8%B2%D8%B4%D9%8A
14. http://tehran-electronic.royablog.ir/post/19/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%8A+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%B4%D8%B1%D9%83%D8%AA+%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%8A
15. http://tehran-electronic.royablog.ir/post/17/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%AE%D9%88%D8%AF%D8%B1%D9%88+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%86%D9%85%D8%A7%D9%8A%D8%B4%DA%AF%D8%A7%D9%87+%D9%85%D8%A7%D8%B4%D9%8A%D9%86
16. http://tehran-electronic.royablog.ir/post/15/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%85%D8%B1%D9%83%D8%B2+%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%85%D8%B1%D9%83%D8%B2+%D8%AE%D8%B1%D9%8A%D8%AF
17. http://tehran-electronic.royablog.ir/post/13/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%88%D8%B1%D8%B2%D8%B4%D9%8A
18. http://sam-electronic.royablog.ir/post/16/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%8A+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%B4%D8%B1%D9%83%D8%AA+%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%8A
19. http://sam-electronic.royablog.ir/post/14/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D8%AE%D9%88%D8%AF%D8%B1%D9%88+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%86%D9%85%D8%A7%D9%8A%D8%B4%DA%AF%D8%A7%D9%87+%D9%85%D8%A7%D8%B4%D9%8A%D9%86
20. http://sam-electronic.royablog.ir/post/12/%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%85%D8%B1%D9%83%D8%B2+%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A+%E2%80%93+%D8%B7%D8%B1%D8%A7%D8%AD%D9%8A+%D8%B3%D8%A7%D9%8A%D8%AA+%D9%85%D8%B1%D9%83%D8%B2+%D8%AE%D8%B1%D9%8A%D8%AF