این دوره برای توسعه دهندگان وب مبتدی و پیشرفته ایجاد شده است و همه چیز را از اصول اولیه اطمینان از درخواست و ارائه کارآمد منابع تصویر گرفته تا جزئیات نحوه انتقال فرمت های تصویر رایج از سرور به مشتری را پوشش می دهد. در طول این دوره شما یاد خواهید گرفت که چگونه به کوچکترین اندازه های انتقال ممکن برای تصاویر خود دست یابید، بدون اینکه کیفیت آنها به خطر بیفتد - حداقل، به گونه ای که هیچ کس قادر به دیدن آن نباشد.
می‌توانید این مجموعه را از ابتدا تا انتها برای درک کامل از نحوه عملکرد تصاویر در وب مدرن مرور کنید، یا از آن به عنوان مرجعی برای مفاهیم خاص و الگوهای نشانه‌گذاری که در کارهای روزمره خود استفاده می‌کنید استفاده کنید.
برای کسانی که تازه وارد توسعه وب شده‌اند، دوره‌های یادگیری HTML را برای اصول استفاده از نشانه‌گذاری، دوره‌های CSS را برای اصول استایل‌سازی بیاموزید ، و دوره‌های آموزش طراحی واکنشگرا را برای درک نحوه نمایش تصاویر در طرح‌بندی‌های واکنشگرا بررسی کنید.
در اینجا چیزی است که یاد خواهید گرفت:
تاریخچه مختصری از تصاویر در وب
تاریخچه تصاویر در وب، که با عنصر تصویر در سال 1993 شروع شد
مسائل کلیدی عملکرد
روش هایی را بیاموزید تا اطمینان حاصل کنید که درخواست های تصویر شما تا حد امکان کوچک و کارآمد هستند.
تصاویر وکتور
در مورد SVG، فرمت تصویر برداری که در وب استفاده می شود، بیاموزید.
تصاویر شطرنجی
تصاویر شطرنجی مانند JPEG، GIF، PNG و WebP را کشف کنید.
فرمت های تصویر: GIF
فرمت تصویر GIF را به همراه توضیح نحوه عملکرد رمزگذاری تصویر درک کنید.
فرمت های تصویر: PNG
ببینید چه زمانی PNG بهترین فرمت تصویر برای انتخاب است.
فرمت های تصویر: JPEG
با رایج ترین فرمت تصویر در وب آشنا شوید.
فرمت های تصویر: WebP
درباره WebP بیاموزید و تفاوت بین این قالب و سایر قالب ها را درک کنید.
فرمت های تصویر: AVIF
فرمت فایل تصویری AV1 (AVIF) یک رمزگذاری مبتنی بر کدک ویدیویی منبع باز AV1 است.
تصاویر واکنش گرا
شیرجه عمیق به تصاویر واکنشگرا.
نحوهای توصیفی
استفاده از srcset و اندازه ها برای ارائه اطلاعات در مورد منابع تصویر و نحوه استفاده از آنها به مرورگر.
نحو تجویزی
در مورد عنصر تصویر اطلاعات کسب کنید.
فشرده سازی و رمزگذاری خودکار
تولید منابع تصویری با کارایی بالا را به بخشی یکپارچه از فرآیند توسعه خود تبدیل کنید.
مولدهای سایت، چارچوب ها و CMS ها
کشف کنید که چگونه CMS هایی مانند وردپرس و سایر تولیدکنندگان سایت می توانند استفاده از تصاویر واکنش گرا را آسان تر کنند.
شبکه های تحویل محتوای تصویر
بیاموزید که چگونه CDN های تصویر توانایی تبدیل و بهینه سازی محتوای یک تصویر را دارند.
نتیجه
برخی منابع اضافی
بنابراین، آیا برای یادگیری تصاویر آماده هستید؟