بهینه سازی تصاویردر طراحی سایت

منتشرشده در مقالات سایت
سه شنبه, 17 بهمن 1396 ساعت 10:13

بهینه سازی تصاویر، برای بارگذاری سریع صفحات سایت در کوتاه ترین زمان ممکن ضروری است. زمان بارگذاری کوتاه، نیازمند فایلهایی با حجم کم است. این مقاله روشهای مورد استفاده در بهینه سازی تصاویر را مورد بحث قرار می دهد.

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

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

صفحه نمایش کامپیوتر می تواند تنها تصاویری با وضوح 72dpi (نقطه در اینچ) را نمایش دهد. در نتیجه اولین گام در بهینه سازی تصاویر، کاهش وضوح به 72 dpi است. تصاویر بزرگتر می توانند به قسمتهای کوچکتری تقسیم بندی شوند. هر قسمت، فایل کوچکی است که می تواند در کسر کوچکی از زمان لود شود.

اکثر فایلهای گرافیکی شامل اطلاعاتی در مورد پالت رنگ تصویر هستند. این اطلاعات معمولا برای نمایش در سایت مورد نیاز نمی باشد. بسیاری از برنامه های گرافیکی این قابلیت را دارند تا تصاویر را بتوان برای وب دخیره سازی نمود. "Save for the web" انتخابی است که کلیه اطلاعات غیر ضروری را از تصویر حذف می کند بدون آنکه بر کیفیت نهایی تصویر خدشه ای وارد شود.

روش دیگری که به ظاهر می تواند زمان بارگذاری را بالاتر برد، استفاده از ویژگی progressive برای تصاویر GIF، یا PNGهای interlaced است. هر دوی این ویژگیها این امکان را می دهند تا زمان بارگذاری صفحات به تدریج صورت گیرد و در ابتدا تصویری مات نمایش داده شود و سپس تصویری با وضوح بیشتر و شفاف تر. در حقیقت این تصاویر حتی چند ثانیه نیز کندتر از تصاویر معمولی بارگذاری می شوند ولی آنها برای بازدید کنندگان به نظر سریعتر هستند.

 

خصیصه طول و عرض IMG


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


از چند تصویر می بایست استفاده کرد؟


برخی از طراحان سایت از تصاویر برای هر چیزی استفاده می کنند. درحالیکه اینکار می تواند بنظر مناسب باشد ولی قطعا زمان بارگذاری صفحات را بالاتر خواهد برد. سرعت صفحات وابسته به حجم خود فایل HTML و سایز تمامی فایلهای بکار رفته در آن است. تصاویر معمولا 50 درصد زمان بارگذاری را شامل می شوند.

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


کیفیت تصاویر


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

ویرایشگرهای حرفه ای نظیر Fireworks و Photoshop به شما امکان می دهند تا پیش زمینه و سطوح رنگ را تنظیم کنید و تقریبا هر کاری که دوست دارید با تصویر انجام دهید.

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

 

چهارچوب بهینه سازی تصاویر


پیشنهادهای زیر به شما این امکان را می دهند تا تصاویرتان را برای بارگذاری سریع در سایت بهینه سازی کنید بدون آنکه بر کیفیت نهایی آنها تاثیری گذارد:
وضوح تصاویر را به 72 dpi کاهش دهید.
تصاویر متنی را به متن واقعی تبدیل کنید.
تصاویر را به اندازه ای که مورد نیاز است برش (crop) دهید.
عمق رنگ را درمواقعی که برای کیفیت مورد نیاز نیست کم کنید.
طول و عرض واقعی تصاویر را مشخص کنید.
در صورت لزوم از نسخه کوچک عکسها استفاده کنید.

توصیه هایی برای بهینه سازی تصاویر سایت

منتشرشده در مقالات سایت
سه شنبه, 02 آذر 1395 ساعت 20:30

Rescale کردن تصاویر پیکسلی تصاویر با فرمت SVG مستقل از رزولوشن اند اما تصاویر پیکسلی دارای رزولوشن مطلق ارائه شده در پیکسل ها هستند. درصورتی که همه عوامل دیگر برابر باشند تصاویر دارای پیکسل بیشتر، صفحه را کندتر می کنند. به طور کلی وب با پیکسل ها سر و کار ندارد بلکه رسانه ای شناور است که جدا از یک صفحه نمایش خاص است و ممکن است در هر صفحه ای عملکردی متفاوت داشته باشد. گاهی اوقات بهتر است به مرورگر این اجازه را بدهید که تصویر را Rescale کند بنابراین در هر صفحه نمایشی به طور واکنش گرا عمل می کند. اگر تعداد پیکسلی که برای یک دستگاه ارسال می شود بیشتر از تعداد پیکسل نمایشی خود دستگاه باشد خود مرورگر آن را تغییر اندازه می دهد. بنابراین تصویر کوچک شده و مقداری از پهنای باند اضافه مصرف می شود. در کل بهتر است که شما تصاویر را بهینه سازی کنید به طوری که برای هر دستگاه تصویری بالاتر از رزولوشن مورد نیاز ارسال نشود. مخاطب سایت شما همیشه در حال تغییر است و در اینجا فرمت های SVG برتری خود را نشان می دهند. با این حال هنوز هم امکان ارتقا و بهبود هست. این خیلی بهتر است که تصاویر را برای دستگاه هایی ارائه بدهیم که قادر به استفاده از آن ها هستیم. پروژه هایی مانند Responsive Images Community Group و Zurb Interchange در حال تلاش برای بهبود امکانات این حوزه هستند.

انتخاب PNG برای عملکرد فرمت SVG برای استفاده در شکل های هندسی بسیار مناسب است درحالی که JPG برای تصاویر هنری مناسب تر است. با این حال بعضی اوقات برای یک شکل هنری نمی توان فرمت SVG پیدا کرد و تاثیرات فشرده سازی JPG باعث زشت شدن تصویر در بخش های دارای رنگ Flat یا خطوط هندسی است. به علاوه ممکن است که تصویر شما دارای پس زمینه شفاف باشد. در این مواقع بهترین گزینه فرمت PNG است که در دو حالت PNG-8 و PNG-24 وجود دارد. PNG-8 از یک پالت تطبیقی که تا 256 رنگ را پشتیبانی می کند استفاده می کند که یکی از این رنگ ها رنگ شفاف یا Transparent است. اما این شفافیت باینری است. یعنی یا بخشی از شکل کاملا شفاف است یا کاملا مات و هیچ درجه بندی جزئی برای آن وجود ندارد. اگر یک تصویر PNG-8 دارای پیکسل های روشنی باشد که روی یک پس زمینه تیره قرار باشد، لبه های ناهمواری ایجاد شده که به وضوح نشان داده می شوند اما قابلیت خوب این فرمت حجم نسبتا مناسب آن است. PNG-24 از پالت رنگی کامل و شفافیت دارای جزئیات کامل بهره می برد و در نتیجه تصاویر با وضوح و شفافیت در این فرمت خود را نشان می دهند و تنها فرمتی است که برای نشان دادن شفافیت بطور کامل بکار می رود. اما نکته منفی این فرمت حجم بالای آن است. اگر واقعا مجبورید که از فرمت PNG استفاده کنید بهتر است از PNG-8 استفاده کنید و سعی کنید تا حد امکان پالت رنگی خود را محدود تر کنید و فقط در مواقعی از PNG-24 استفاده کنید که تصویر مورد نظر دارای شفافیت درصدی است. اگر شفافیت در تمام عکس یکسان است می توانید از فرمت کم حجم تر و کمی کد نویسی CSS استفاده کنید.

از فرمت انیمیشنی GIF خیلی کم استفاده کنید فرمت GIF در دهه 1990 خیلی استفاده می شد و تازه ساخته شده بود. دلیل استفاده نکردن از این فرمت خیلی واضح است: فرمت GIF باعث افزایش حجم تصویر حتی بیشتر از یک ویدئوی HTML5 می شود. اگر هم واقعا مجبورید که از تصاویر GIF استفاده کنید حتما به حجم صفحه توجه داشته باشید .

فشرده سازی زیاد در تصاویر با سایز دو برابر هنگامی که تصاویر پیکسلی را در نمایشگرهایی با تراکم پیکسل بالا مانند صفحات رتینای اپل باز کنیم، برای نمایش درست این تصاویر باید آنها را در این نمایشگرها با سایز دو یا سه برابر اندازه عادی ارائه بدهیم. این دستگاه ها تعداد پیکسل های بیشتری را روی نمایشگر خود نمایش می دهند که به آنها پیکسل های مجازی می گویند. در آیفون های مدرن برای نمایش یک تصویر در سایز 200*200 باید آن تصویر را در سایز 400*400 ارائه بدهیم در غیر این صورت تصویر تار می شود. با این که تصاویر دارای سایز 2 برابر دارای پیکسل بیشتری هستند جالب است بدانید که اثر فشرده سازی در این سایز برای تصاویر بیشتر است!

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

سعی کنید از فرمت SVG استفاده کنید گرافیک برداری مقیاس پذیر یا SVG یک زبان نشانه گذاری XML برای ذخیره سازی تصاویر وکتور است. برخلاف بسیاری از فرمت های معروف که از داده های پیکسلی برای نمایش تصاویر استفاده می کنند، SVG از نقاطی به نام بردار یا وکتور تشکیل شده است که در یک شبکه هماهنگ دو بعدی ترسیم شده اند. اکثر طراحان حرفه ای از نرم افزارهای مخصوص طراحی تصاویر وکتور مانند Adobe Illustrator استفاده می کنند اما برای طراحی های ساده تر می توان از ابزارهای رایگان و تحت وب مانند Method Draw و Mondrian استفاده کرد. فرمت SVG برای وب بسیار مناسب است چون علاوه بر رزولوشن نامحدود، دارای حجم بسیار کمی نیز است. به عبارت دیگر، می توان تصاویر وکتور را بدون افت کیفیت بزرگ کرد. این قابلیت به خاطر آن است که تصاویر وکتور به جای استفاده از پیکسل ها برای نمایش تصاویر از یکسری مختصات استفاده می کنند که بعدا این مختصات به صورت یک فایل تصویری پیکسلی، بدون در نظر گرفتن رزولوشن در می آیند. این فرمت تنها برای استفاده در تصاویر ساده گرافیکی مناسب است و در همه جا کارآمد نیست. به عنوان مثال نمی توان در تصاویر با جزئیات بالا از این فرمت استفاده کرد و هنوز برای استفاده از این تصاویر از فرمت های پیکسلی استفاده می شود. لازم به ذکر است که از این فرمت در مرورگرهای مدرن و مرورگر IE9 به بعد نیز پشتیبانی می شود.

آدرس : تهران ، میدان انقلاب ، کوچه رشتچی ، پلاک ۱۴ (ساختمان ایرانیان) ،طبقه دوم واحد ۸

 

خط ویژه: ۶۶۹۲۸۷۸۷-۰۲۱

تلفن : ۶۶۹۲۸۰۴۰-۰۲۱ | ۶۶۱۲۴۱۴۹-۰۲۱ | تلفن همراه : ۰۹۱۲۳۷۹۰۵۸۸

فکس دیجیتال: ۸۹۸۷۷۳۷۳-۰۲۱

آدرس ایمیل : wnegaran[at]gmail.com 

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت وب نگاران پارسه می باشد