آموزش تصاویر وب Responsive

سرفصل ها و درس ها

تصاویر وب پاسخگو چیست؟ What Are Responsive Web Images?

• مقدمه Introduction

• طراحی وب پاسخگو Responsive Web Design

• ویژگی های طراحی وب پاسخگو Responsive Web Design Features

• داستان های رسانه Mediaqueri.es

• آمار تصویر وب Web Image Stats

• تصاویر وب پاسخگو Responsive Web Images

• خلاصه Summary

انواع تصویر Image Types

• مقدمه Introduction

• رستر در مقابل بردار Raster vs. Vector

• نسخه ی نمایشی - مقیاس پذیر تصاویر Demo - Scaling Raster Images

• JPEG JPEG

• نسخه ی نمایشی - بهینه سازی تصویر JPEG Demo - JPEG Image Optimization

• نسخه ی نمایشی - JPEG پیشرو Demo - Progressive JPEG

• نسخه ی نمایشی - ایجاد JPEG پیشرو Demo - Creating Progressive JPEG

• GIF GIF

• PNG PNG

• وب سایت WEBP

• پشتیبانی از وب WEBP Support

• SVG SVG

• نسخه ی نمایشی - SVG Demo - SVG

• سایر گزینه های Raster Other Raster Alternatives

• قلم های نماد Icon Fonts

• قلم های وب Web Fonts

• CSS3 CSS3

• خلاصه Summary

موارد استفاده از عکس پاسخگو Responsive Image Use Cases

• مقدمه Introduction

• گروه پاسخگوی تصاویر پاسخگو Responsive Images Community Group

• تصاویر پاسخگو از موارد استفاده می کنند Responsive Images Use Cases

• انتخاب مبتنی بر وضوح Resolution Based Selection

• نسخه ی نمایشی - انتخاب مبتنی بر رزولوشن Demo - Resolution Based Selection

• کارگردانی هنری Art Direction

• نسخه ی نمایشی - کارگردانی هنری Demo - Art Direction

• انتخاب مبتنی بر نسبت Pixel نسبت Device Pixel Ratio Based Selection

• انواع تصویر Image Types

• خلاصه Summary

تکنیک های تصویر پاسخگو Responsive Image Techniques

• مقدمه Introduction

• & lt؛ img <img>

• نسخه ی نمایشی - & lt؛ img Demo - <img>

• جاوا اسکریپت JavaScript

• نسخه ی نمایشی - جاوا اسکریپت Demo - JavaScript

• & lt؛ تصویر <picture>

• نسخه ی نمایشی - & lt؛ تصویر جهت هنری Demo - <picture> Art Direction

• نسخه ی نمایشی - & lt؛ انواع تصویر تصویر Demo - <picture> Image Types

• نسخه ی نمایشی - & lt؛ تصویر تراکم پیکسل بالا Demo - <picture> High Pixel Density

• پر کردن تصویر Picturefill

• نسخه ی نمایشی - پر کردن تصویر Demo - Picturefill

• srcset srcset

• نسخه ی نمایشی - srcset Demo - srcset

• نکات مشتری Client Hints

• نسخه ی نمایشی - نکات مشتری Demo - Client Hints

• اندازه ها sizes

• انتخاب اندازه های فیزیکی Choosing Physical Sizes

• نسخه ی نمایشی - انتخاب اندازه های فیزیکی Demo - Choosing Physical Sizes

• انتزاع Abstractions

• نسخه ی نمایشی - انتزاع ها Demo - Abstractions

• خلاصه Summary

به حداکثر رساندن عملکرد Maximizing Performance

• مقدمه Introduction

• نسخه ی نمایشی - بهینه سازی تصویر Demo - Image Optimization

• نسخه ی نمایشی - بهینه سازی تصویر در Visual Studio Demo - Image Optimization in Visual Studio

• JPEG JPEG

• CDN (شبکه تحویل محتوا) CDN (Content Delivery Network)

• نسخه ی نمایشی - CDN Demo - CDN

• فشرده سازی HTTP HTTP Compression

• نسخه ی نمایشی - فشرده سازی HTTP Demo - HTTP Compression

• انقضا Expirations

• نسخه ی نمایشی - انقضا Demo - Expirations

• Lazy Loading Lazy Loading

• نسخه ی نمایشی - در حال بارگذاری تنبل Demo - Lazy Loading

• خلاصه Summary