آرشیو فروردین ماه 1400

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

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

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