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

ایجاد تصاویر با کیفیت در وب نیاز به داشتن علم و کاربرد نرم افزارهای گرافیکی دارد و از این جهت طراحی وب برای استادان آن می تواند مشکل باشد . یک هنرمند گرافیک کار باید بتواند بخوبی تصاویر خوبی را ایجاد کند. اگر شما ذاتا استعداد این کار را ندارید خیلی از منابع در روی وب استفاده از این عکسها را به طور مجانی برای شما ایجاد کردند . عکسهای با کیفیت خوب معمولا مجانی نیستند ولی به هر جهت می توانید برای بدست آوردن کیفیت مطلوب از گرافیک ها در سایتهای مختلف ثبت نام کنید . این حق اشتراک می تواند در محدوده حق اشتراک ماهیانه تا حق اشتراک سالیانه باشد .
تذکر : ابتدا مطمئن شوید که تصاویری که در سایت خود از آنها استفاده می کنید حق کپی برداری از آن مجانی است . متون بکار برده شده در وب سایت یا باید توسط شما ایجاد شود و یا برای دسترسی به آنها باید اجازه داشته باشید . همیشه جملات خود را از لحاظ قانونی بررسی کنید .
● ویژگی ALT :
ویژگی ALT متون اختیاری در مکانهایی از تصاویر بر روی صفحات HTML ایجاد می کند . گرامر استفاده از ویژگی ALT به شکل زیر دنبال می شود :
ویژگی ALT برای مکان های زیر مهم است :
▪ کاربرانی که گزینه نمایش عکس را در مرورگرهای خود غیر فعال کردند از این طریق می توانند آنرا بخوانند.
▪ هنگامی که صفحه در حال بارگذاری است کاربر می تواند توصیف آنرا بخواند .
▪ این گزینه برای کاربرانی که قدرت بینایی یا شنوایی کمی دارند امکانات خوبی ایجاد میکند.
● بهینه سازی تصاویر :
یک طراح وب اگر نتواند تصاویر خود را بهینه سازی کند هیچ یک از توانمندیهای Gif و jpg و Png تشخیص داده نمی شود. این اشتباه غلط ازآنجا ناشی میشود که بگویم هیچ یک از این قالبها از دیگری بهتر نیست. در صورتیکه در قبل گفتیم که هر قالب تصویر دارای توانمندی می باشد که آن را منحصر به فرد می کند . به عنوان یک طراح وب باید بیاموزید که چه نوع قالبی را برای ایجاد یک تصویر خوب و جذاب و بدون مشکل به کار برید استفاده از قالبهای Gif یا Jpg شما را به استفاده از تصاویر بهینه مطمئن نمی سازد .
موارد زیر راهنمایی است که شما را در بهینه سازی تصاویر کمک می کند :
▪ استفاده از رنگهایی که در وب امنیت دارند .
▪ ایجاد یک لیست از رنگهای ممکن
▪ استفاده از رنگ های یکدست در هر جایی که ممکن باشد .
▪ اجتناب از اثرات بصری نامطلوب تا جایی که مقدور است .
▪ استفاده از امکانات بهینه سازی .
● منابع بهینه سازی :
در حال حاضر خیلی از منابع وجود دارند که برای کمک به طرح بهینه سازی تصاویر در دسترس می باشند . روش اصلی برای بهینه سازی, محاسبه کوچکترین مقدار رنگ ممکن و انتخاب قالب فایلی است که می تواند کیفیت رنگ درخواستی شما را ایجاد کند . بیشترین استفاده معمول در بهینه سازی استفاده از نرم افزارهای Photo Shop ، Fire Works ، Image Ready و ... می باشد .
۲ روش بهینه ساز معمول دیگر که در حال حاضر مورد استفاده قرار می گیرند Online Version ، Desktop Version می باشند .
بهینه سازی تصاویر بر روی اینترنت به نوعی نیاز به حق اشتراک سالیانه دارد که این مقدار به طور زیادی بسته به تعداد صفحات و یا عکسهایی می باشد که شما می خواهید آنها را بهینه کنید . بعضی از سرویسهای دیگر مجانی هستند . یک طراح وب بطور ساده یک URL برای تصاویر وارد می کند ، یعنی بر روی سایتی میرود که امکان بهینه سازی برای تصاویر را به ما میدهد. برنامه ای روی سایت برای بارگذاری و بهینه سازی تصاویر آماده می شود .
سپس طراح برای دسترسی به بهینه سازی تصاویر صاحب امتیاز می شود . سرویسهای زیر تصاویر بهینه OnLine ایجاد می کند .
▪ Gifbot - www.netmechanic.com/accelerate.htm
▪ Gifwizard - www.gifwozard.com Desktop Image نیز به همان روش ، تصاویر شما را بهینه می کند .
تمرین ۲-۵ بهینه سازی تصاویر :
در این تمرین از سرویسهای بهینه سازی تصاویر در روی اینترنت استفاده می کنید . این تصاویر و اتصالات یک صفحه را بطور آشکار را ارزیابی می کند و خلاصه ای از سایتهای گرافیکی ایجاد می کند و سپس ورژنهای مختلفی از بهینه سازی تصاویر برای انتخاب و بارگذاری و نگهداری ، برای شما ارائه می دهد .
۱) وارد سایت http://www.netmechanic.com شوید .
۲) بر روی اتصال Gifbot کلیک کنید .
۳) از این صفحه بر روی Try it کلیک کنید .
۴) URL که عگس مورد نظرتان در آنجا قرار دارد را بر روی فیلد مخصوص وارد کنید.
۵) شما همچنین می توانید فایل را از کامپیوتر خود به کامپیوتر راه دور بفرستید ، با استفاده از کلید Brows و آدرس Email خود را وارد کنید و هر دو قالب Gif و Jpeg را از منوی خروجی انتخاب کنید و Testnow را کلیک کنید .
۶) حال این سرویس شروع به بارگذاری عکس و ارزیابی آن می کند .
۷) وقتی بارگذاری کامل شد لیستی ایجاد می شود .
۸) وقتی ارزیابی تمام شد گزارش کاملی ظاهر می شود .
۹) برای دیدن کامل نتایج ، صفحه خود را اسکرول کنید . بر روی سایز فایلی که در اتصالات سایت قرار دارد کلیک کنید تصویر بزرگتر ظاهر خواهید شد .
۱۰) اگر شما تا پایین صفحه اسکرول کنید تکرار همان عکسها را خواهید دید . توجه داشته باشید که هر عکسی اطلاعاتی راجع به عکس شامل نوع ، عمق رنگ ، سایز و زمان بارگذاری و نیز درصد ذخیره را به شما انتقال می دهد و در صد سایز فایل را به شما می دهد و می توانید تصویر بهینه شده را با تصویر اصلی با جابه جا کردن اشاره گر ماوس بالای هر عکس مقایسه کنید . اگر اینکار را انجام دادید تصویر اصلی ظاهر خواهد شد و یک مقایسه دقیق انجام می دهید . قبل از آنکه بخواهید به تغییرات دقت کنید باید با اسکرول کردن تمامی عکسها را دیدن کنید .
۱۱) حال شما تصویری که بهینه شده و کیفیت خوبی در حد درخواست شما را دارد انتخاب کنید .
۱۲) بر روی عکس مورد نظر کلیک راست کرده و آن را Save کنید.
با بهینه سازی ، تمامی عکسهای صفحه ( و سایت ) به طرز چشمگیری می توانید زبان بارگذاری را کاهش دهید و برای کاربران یک مشاهده سریع را ایجاد کنید .
● تکه تکه کردن عکس و بهم اتصال دادن
روش دیگری که برای کمک به بارگذاری عکسهای بزرگ در زمان کم وجود دارد برش دادن عکس می باشد . برش تکه های متعددی از عکس را در بر دارد . با استفاده از جداول HTML یک عکس می تواند تجدید بنا شده و در پنجره مرورگر بهم پیوند داده می شود . برش ها نمی توانند تغییری در سایز عکس بوجود آورند اما بارگذاری عکس را سریعتر میکنند زیرا کاربر قبل از بارگذاری عکس قسمت هایی از عکس را می بیند . نتیجه : در این فصل شما در مورد نکات مهم در تصاویر وب آموختید و با بیشتر قالبهای معمولی و امتیازات آنها آشنا شدید و نیز تفاوت بین تصاویر BMP و برداری را آموختیذ و در پایان درباره ابزارها و تکنیک های بهینه سازی عکسها آموختید.

منبع : استاد آن‌لاین