مطالب تازه
خانه » طراحی سایت » بهینه سازی تصاویر در وب سایت

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

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

در این قسمت می خواهیم شما عزیزان را با بهینه سازی تصاویر در وب سایت آشنا کنیم.

انواع نکته های بهینه سازی وب سایت.

signal green 150x150 thmb بهینه سازی تصاویر در وب سایتبهینه سازی تصاویر

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

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

checkbox clip art 12919 thmb بهینه سازی تصاویر در وب سایت صفحه نمایش کامپیوتر می تواند تنها تصاویری با وضوح ۷۲dpi (نقطه در اینچ) را نمایش دهد. در نتیجه اولین گام در بهینه سازی تصاویر، کاهش وضوح به ۷۲ dpi است. تصاویر بزرگتر می توانند به قسمتهای کوچکتری تقسیم بندی شوند. هر قسمت، فایل کوچکی است که می تواند در کسر کوچکی از زمان لود شود.

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

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

signal green 150x150 thmb بهینه سازی تصاویر در وب سایت خصیصه طول و عرض IMG

تگ IMG به مرورگر وب می گوید تا مربعی با سایزی خاص را برای نگهداری گرافیک تولید کند. با اینکار مرورگر می تواند مابقی صفحه سایت را بارگذاری نماید در حالیکه تصویر در حال بارگذاری است. چنانچه طول و عرض تصویرمشخص نشود، مرورگر وب مجبور است تا زمانیکه تصویر بطور کامل بارگذاری نشده است، منتظر بماند و قسمتهای دیگر صفحه را بارگذاری نکند.
pencil character businessman with briefcase 0521 1004 3015 3052 SMU thmb بهینه سازی تصاویر در وب سایت از چند تصویر می بایست استفاده کرد؟
برخی از طراحان سایت از تصاویر برای هر چیزی استفاده می کنند. درحالیکه اینکار می تواند بنظر مناسب باشد ولی قطعا زمان بارگذاری صفحات را بالاتر خواهد برد. سرعت صفحات وابسته به حجم خود فایل HTML و سایز تمامی فایلهای بکار رفته در آن است. تصاویر معمولا ۵۰ درصد زمان بارگذاری را شامل می شوند.استفاده از تصاویر کمتر، زمان بارگذاری را کمتر خواهد کرد باعث خواهد شد تا کاربران بی حوصله از سایت شما فرار نکنند.

signal green 150x150 thmb بهینه سازی تصاویر در وب سایت کیفیت تصاویر

checkbox clip art 12919 thmb بهینه سازی تصاویر در وب سایت کیفیت تصاویر توسط وضوح، خلوص رنگ و جزییات تصویر مشخص می شود. از ویرایشگرهایی استفاده کنید که نویزها و دیگر خصیصه های ناخواسته را در تصویر حذف کنند. بیشتر ویرایشگرها به شما این امکان را می دهند تا برای افزایش دقت تصویر، قرمزی چشمها و لبه های تیز تصویر را اصلاح نمایید.
checkbox clip art 12919 thmb بهینه سازی تصاویر در وب سایت ویرایشگرهای حرفه ای نظیر Fireworks و Photoshop به شما امکان می دهند تا پیش زمینه و سطوح رنگ را تنظیم کنید و تقریبا هر کاری که دوست دارید با تصویر انجام دهید.همچنین می توانید از یک تصویر کوچک شده روی سایت استفاده کنید تا لینکی به نسخه ای با کیفی تر و بزرگتر از همان عکس بدهد بطوریکه بازدید کننده بتواند آن را مشاهده کند.

signal green 150x150 thmb بهینه سازی تصاویر در وب سایت چهارچوب بهینه سازی تصاویر

پیشنهادهای زیر به شما این امکان را می دهند تا تصاویرتان را برای بارگذاری سریع در سایت بهینه سازی کنید بدون آنکه بر کیفیت نهایی آنها تاثیری گذارد:

  •   وضوح تصاویر را به ۷۲ dpi کاهش دهید.
  •   تصاویر متنی را به متن واقعی تبدیل کنید.
  •    تصاویر را به اندازه ای که مورد نیاز است برش (crop) دهید.
  • عمق رنگ را درمواقعی که برای کیفیت مورد نیاز نیست کم کنید.
  • طول و عرض واقعی تصاویر را مشخص کنید.
  •  در صورت لزوم از نسخه کوچک عکسها استفاده کنید.

 

 

unsuuccessful site zebel khan rozbanner ir1 بهینه سازی تصاویر در وب سایت جمله آخر

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

 

درباره‌ی azizi

جوابی بنویسید

ایمیل شما نشر نخواهد شد.خانه های ضروری نشانه گذاری شده است. *

*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">