زمان استفاده از فرمت های JPG، GIF، PNG و SVG برای تصاویر وب شما

تعدادی از فرمت های تصویری وجود دارد که می توانند در صفحات وب استفاده شوند. برخی از نمونه های رایج GIF ، JPG و PNG هستند . فایل های SVG هم معمولا در وب سایت ها امروزه استفاده می شود، و به طراحان وب نیز یک گزینه دیگر برای تصویر آنلاین می دهد.

تصاویر GIF

از تصاویر GIF برای تصاویری استفاده کنید که دارای تعداد کمی رنگ ثابت هستند. فایل GIF همیشه به 256 رنگ منحصر به فرد محدود می شود. الگوریتم فشرده سازی برای فایل های GIF پیچیده تر از فایل های JPG است، اما زمانی که در تصاویر رنگی و متن صاف استفاده می شود، اندازه فایل ها بسیار کوچک است .

فرمت GIF برای تصاویر عکاسی یا تصاویر با رنگ های شیب مناسب نیست. از آنجا که فرمت GIF دارای تعداد محدودی از رنگ ها، شیب ها و عکس ها در هنگام ذخیره کردن به عنوان یک فایل GIF در نتیجه banding و pixelation خواهد بود.

به طور خلاصه، شما فقط می توانید از GIF ها برای تصاویر ساده با چند رنگ استفاده کنید، اما همچنین می توانید PNG ها را برای آن نیز استفاده کنید (بیشتر در کوتاه مدت).

تصاویر JPG

استفاده از تصاویر JPG برای عکس ها و تصاویر دیگر که میلیون ها رنگ دارند. این یک الگوریتم فشرده سازی پیچیده ای است که به شما امکان می دهد گرافیک های کوچکتر را با از دست دادن برخی از کیفیت تصویر استفاده کنید. این فشرده سازی "lossy" نامیده می شود زیرا برخی از اطلاعات تصویر هنگام فشرده سازی تصویر از بین می روند.

فرمت JPG برای تصاویر با متن، بلوک های بزرگ از رنگ جامد و اشکال ساده با لبه های تیز مناسب نیست. این به این دلیل است که وقتی تصویر فشرده می شود، متن، رنگ یا خطوط ممکن است تار شود و نتیجه ای ایجاد شود که تصویری نباشد که در فرمت دیگری ذخیره شود.

تصاویر JPG برای عکس ها و تصاویری که دارای مقدار زیادی رنگ طبیعی هستند استفاده می شود.

تصاویر PNG

فرمت PNG به عنوان جایگزینی برای فرمت GIF ایجاد شد، زمانی که ظاهرا تصاویر GIF به هزینه royalty پرداخت می شود. گرافیک PNG دارای نرخ فشرده سازی بهتر نسبت به تصاویر GIF است که باعث می شود تصاویر کوچکتر از همان فایل ذخیره شده به عنوان GIF باشد. فایل های PNG شفافیت آلفا را ارائه می دهند، به این معنی که شما می توانید زمینه های تصاویر خود را که کاملا شفاف هستند یا حتی از طیف وسیعی از شفافیت آلفا استفاده کنید. به عنوان مثال، یک سایه سایه از طیف وسیعی از جلوه های شفاف استفاده می کند و برای PNG مناسب می باشد (یا شما فقط می توانید از سایه های CSS استفاده کنید).

تصاویر PNG مانند GIF ها برای عکس مناسب نیستند. ممکن است در مورد مسئله باندهی که بر عکس هایی که فایل های GIF را با استفاده از رنگ های واقعی ذخیره می کنند، تحت تاثیر قرار گیرد، اما این می تواند تصاویر بسیار زیادی را به وجود آورد. تصاویر PNG نیز توسط تلفن های همراه قدیمی و تلفن های ویژه پشتیبانی نمی شوند.

ما از PNG برای هر پرونده ای که نیازمند شفافیت است استفاده می کنیم. ما همچنین از PNG-8 برای هر پرونده ای که به عنوان GIF مناسب است استفاده می کنیم، با استفاده از این فرمت PNG به جای آن.

تصاویر SVG

SVG مخفف Scalable Vector Graphic است. بر خلاف فرمت های مبتنی بر شطرنجی که در JPG، GIF و PNG یافت می شوند، این فایل ها از بردارها برای ایجاد فایل های بسیار کوچک که می توانند در هر اندازه ای ارائه شوند بدون افت کیفیت افزایش اندازه فایل استفاده می کنند. آنها برای تصاویری مانند آیکون ها و حتی آرم ها ایجاد می شوند.

تهیه عکس برای تحویل وب

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

انتخاب فرمت تصاویر مناسب بخشی از نبرد است، اما همچنین اطمینان حاصل کنید که این فایل ها را آماده کرده اید گام بعدی در این فرایند ارائه وب مهم است.

مقاله اصلی جنیفر کریینین. ویرایش توسط جرمی جیرارد.