illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

واکنشگرا کردن تصاویر (جلسه 10) : ویژگی Type - قسمت دوم

0 222 ۱۷ فروردین ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.Responsive-Design

افزایش روزافزون فرمتهای تصاویر

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

ما میتونیم از مزایایی که فرمتهای جدید دارن بهره مند بشیم و سود ببریم. منتها این فرمتها در مرورگرهای قدیمی پشتیبانی نمیشن و افرادی که با استفاده از اون مرورگرها سایتتون رو مشاهده میکنن چیزی رو مشاهده نخواهند کرد. پس چاره چیه؟ یا باید قید اون مرورگرهای قدیمی رو بزنید و یا از چیزای جدیدی که میاد استفاده نکنید. بنظر من که باید قیدشونو زد، چون بیشتر از 90 درصد کاربران مرورگرهای به روزی دارن.

البته راه هایی هم وجود داره که برای مرورگرهای قدیمی Fallback یا پشتیبان قرار داد و کاری کرد که بجای تصویری که پشتیبانی نمیشه، تصویری که پشتیبانی میشه رو قرار داد. میتونین با استفاده از المنت Picture این مورد و مشکل رو حل کرد و در اینجا آموزش اون قرار داده شده که چطور برای تصاویر SVG با استفاه از المنت Picture در مرورگرهای قدیمی Fallback قرار بدیم.

فرمتهای جدیدی که پا به میدان گذاشتن فقط محدود به SVG و Webp نمیشن. فرمتهایی مثل JPEG-2000 و JPEG-XR و  APNG نیز هستند.

JPEG-2000؟ بله لطفا!

یک نوشته بسیار قوی و با جزئیات که توسط Zoltan Hawryluk نوشته شده، میتونه خیلی دید شما رو نسبت به انواع فرمتهای موجود باز کنه و در مورد اونا براتون توضیح بده.

در یکی از مثالهایی که در این نوشته بیان شده است، او یک تاس رو بر روی یک پس زمینه رنگارنگ قرار داده است. برای اینکار به Alpha Channel Transparency نیاز هست.alpha-dice

اندازه و حجم تصویر تاس بصورت زیر هست:

 

JPEG 2000 JPEG-XR PNG WEBP
320×240 2K 22.6K 55.2K 11.2K
600×450 13.5K 48.5K 14.3K 26.6K
1024×768 19.2K 95.7K 325.7K 56K

به اندازه های بالا دقت کنید و ببینید که در سایز 1024 در 768 حجم فایل png به اندازه 325.7 کیلوبایت هست در صورتی که همون تصویر در فرمت JPEG-2000 حجمی برابر با 19.2 کیلوبایت داره.

قطعا شما هم مثل من هیجان زده شدید ولی اینو هم در نظر بگیرید که هیچ مرورگری بغیر ار Safari از این فرمت پشتیبانی نمیکنه!!

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

در جلسه بعدی ترفندها و تکنیک های که در CSS میتونین انجام بدین و عکسهاتون رو واکنشگرا کنید براتون قرار میدم.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram