تصاویر در وب سایت   

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو

نقش تصاویر در وب سایت

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

در اینجا سه فرمت اصلی تصاویر مورد استقاده در وب و نحوه و زمان استفاده از هر کدام را بررسی می کنیم.

تصاویر GIF

این فرمت مشخص کنندهٔ تصاویر گرافیکی ثابت یا متحرک است. این نام کوتاه شده Graphics Interchange Format که مفهوم لغوی آن در زبان فارسی قالب مبادلهٔ گرافیک است. این قالب گرافیکی توسط شرکت CompuServe در سال ۱۹۸۷ میلادی معرفی شده است و امروزه به طور گسترده در وب مورد استفاده قرار می‌گیرد.

در این فرمت تصویری از تکنیک LZW (Lempel-Ziv-Welch) برای فشرده سازی تصاویر استفاده می‌شود که یک تکنیک فشرده سازی ( Lossless compression ) است. تعداد رنگ‌های مورد استفاده در این فرمت با توجه به ۸ bit بودن آن ۲۵۶ رنگ است که یک بازه رنگ نسبتا محدود برای استفاده در اختیار شما قرار می‌دهد.

این ۲۵۶ رنگ از یک محدوده رنگ بزرگتر (۲۴ bits: 8 red, 8 green, 8 blue) با ۱۶,۷۷۷,۲۱۶ رنگ انتخاب می‌شود. ( با توجه به ترکیب رنگ و نوع تصویر ) به دلیل محدودیت تعداد رنگ‌ها ازاین فرمت برای تصاویری با تعداد رنگ کمتر از ۲۵۶ استفاده می‌شود .برای تصاویر دیجیتال و یا تصاویر دارای Gradiant از این فرمت استفاده نکنید. زیرا به دلیل محدودیت تعداد رنگ‌ها باعث کم کیفیت و نامرتب شدن تصاویر شما خواهد شد.

این فرمت برای تصاویر خطی، عناصر با لبه‌های تیز و تعداد رنگ محدود بسیار مناسب است. ( مانند لوگوهایی با چند رنگ و لبه‌های تیز، خطوط و نمودارها)

یکی از قابلیت‌های مهم این فرمت تصویری قابلیت ساخت تصاویر متحرک است. می‌توانید با استفاده از نرم افزارهای ویرایش تصاویر مانند Photoshop و یا نرم افزارهایی که برای ساخت تصاویر متحرک با فرمت GIF برنامه ریزی شده‌اند، برای ساخت تصاویر متحرک ساده خود استفاده کنید. ( Animated gif )

تصاویر JPG

استاندارد مورد استفاده برای فشرده سازی تصاویر که نام آن، کوتاه شده Joint Photographic Experts Group، نام سازمان ایجاد کننده این استاندارد در سال ۱۹۹۲ است.

از این استاندارد بیشتر برای ذخیره سازی تصاویر دیجیتال و تصاویری که با استفاده از دوربین‌های عکاسی گرفته شده است ( که دارای میلیون‌ها رنگ هستند ) استفاده می‌شود. این استاندارد به شما اجازه می‌دهد با مقداری تغییر در خصوصیات به حجم مناسبی برای انتشار در محیط وب برسید.

تکنیک فشرده سازی تصاویر در این فرمت ( Lossy Compression ) است به این معنی که پس از تغییر خصوصیات برای فشرده سازی تصاویر، کیفیت گذشته تصاویر از دست خواهد رفت و به کیفیت پایین تری از تصاویر خواهیم رسید بنا براین در تغییر خصوصیات با استفاده از این استاندارد دقت نمائید. در استفاده از این استاندارد برای تصاویری همراه با متن، الگوها و سطوح با لبه‌های تیز بسیار دقت کنید. زیرا کم کردن خصوصیات به میزان زیاد باعث بهم ریختگی در لبه های متن و سطوح می‌شود.

با کمی تمرین و تجربه میزان مناسب تغییر در این خصوصیات را درک خواهید کرد و می‌توانید به طور مناسب از آن استفاده نمائید. می‌توانید از نرم افزارهای ویرایش تصاویر مانند Photoshop ( گزینه Save for web در منوی File ) برای تغییر در خصوصیات تصاویر استفاده نمائید.

تصاویر 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)اجازه استفاده از بازه بیشتری از رنگ‌ها را به شما می‌دهد.

متاسفانه در حال حاضر تعدادی از مرورگرها به صورت کامل و مناسب از این فرمت تصویر پشتیبانی نمی‌کنند و این موضوع مشکلات بسیاری را برای طراحان وب به وجود آورده است. اما استفاده از این فرمت کاملا جایگاه خود را پیدا نموده است و در نهایت تمامی مرورگرها مجبور به پشتیبانی از این فرمت خواهند شد. البته راه‌های خاصی برای نمایش صحیح این فرمت در مرورگرهای قدیمی که از این فرمت پشتیبانی نمی‌کنند وجود دارد.

استفاده از این فرمت برای ذخیره سازی تصاویری با کیفیت بالا و اندازه کوچک بسیار مناسب است. مانند لوگوهایی با تعداد رنگ زیاد و لبه‌های گرد، یا آیکون‌ها در سایزهای کوچک.

بهینه سازی تصاویر برای انتشار در محیط وب

در اینجا سعی خواهیم کرد به طور عملی تفاوت ما بین فرمت تصاویر و نحوه کار با آنها را توضیح دهیم. برای این کار ما از نرم افزار فتوشاپ استفاده خواهیم کرد و در زیر مراحل انجام کار را ملاحظه می‌کنید.


Untitled-1.jpg


Untitled-11.jpg


پس از باز کردن تصویر مورد نظر در محیط فتوشاپ از منوی file گزینه Save For Web را انتخاب نمائید.


Untitled-111.jpg


پس از باز شدن پنجره مخصوص برای ذخیره تصاویر برای انتشار در محیط وب فرمت تصویر مورد نظر را انتخاب نمائید.


Untitled-1111.jpg


به طور مثال برای فرمت JPG می‌توانید با افزایش یا کاهش درصد کیفیت به حجم و کیفیت مورد نظر خود برسید.

می‌بینید که پس از ذخیره سازی با استفاده از فرمت PNG سایز تصویر بدون تغییر چشمگیری در کیفیت تصویر افزایش پیدا کرده است. بهترین گزینه می تواند فرمت JPG با کیفیت ۵۰ درصد باشد.

فرمت GIF برای ذخیره سازی تصاویری شامل نوشته‌ها و خطوط صاف بهتر از JPG عمل می‌کند.

برای ذخیره تصاویر با پس زمینه شفاف بهترین گزینه می‌تواند PNG 24bit باشد. در مورد تصاویری با لبه‌های گرد و پس زمینه شفاف می‌توان از فرمت‌های GIF و PNG 8 bit هم استفاده نمود.



تهیه کننده: مرصاد نادری - تیم جوملا فارسی

Indent support.png
هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.
8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.