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

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

هنگامی که ما در مورد چگونگی “بهینه سازی” تصاویر برای وب صحبت می کنیم، می توانید در این مورد به سه روش فکر کنید: 1) خوب به نظر رسیدن تصاویر، 2) بارگذاری سریع تصاویر و 3) آسان سازی تصاویر برای موتورهای جستجو.

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

بیشتر پست ها از یک جنبه بهینه سازی یا جنبه دیگر فراتر می روند، اما در این پست همه آنها را پوشش خواهم داد. حتی بهتر این است که شما می توانید تصاویر را با ابزارهای ساده و با کاربرد آسان بهینه کنید – نیازی به فتوشاپ نیست. (در این پست من اکثراً با نسخه مبتنی بر مرورگر رایگان Pixlr نشان می دهم، که ابزاری ساده برای ویرایش تصویر اصلی است. اگر به ابزارهای دیگر علاقه مند هستید، پست ما را مشاهده کنید که چگونه می توانید عکس ها را بدون Photoshop ویرایش کنید).

1. با تصاویر با کیفیت بالا شروع کنید

عکاسی سهام: شما لازم نیست یک عکاس حرفه ای باشید تا از تصاویر عالی در وب سایت خود استفاده کنید. به نظر می رسد هر روز سایت های عکس با کیفیت بالا وجود دارند که می توانید برای استفاده تجاری عکس های رایگان را بارگیری کنید. برخی از موارد مورد علاقه ما عبارتند از:

  • Pixabay
  • Unsplash
  • Barn Images
  • PicJumbo
  • SplitShire
  • Little Visuals

با جستجوی عکس مورد نظر میتوانید تصاویر با کیفیت و رایگان را دانلود کنید. گرافیک: اگر به دنبال چیزی گرافیکی تر هستید، یک ابزار آنلاین رایگان و جدید وجود دارد که می توانید برای ساخت اینفوگرافیک یا عکسهای با پوشش فونت خود استفاده کنید. ما عاشق Canva و PiktoChart هستیم. اگر به دنبال یک آرم هستید، توصیه می کنیم از Creator Logo دیدن کنید.

بیشتر بخوانید»»» تعداد افزونه های معقول وردپرس

2. از نوع پرونده مناسب استفاده کنید: JPEG یا PNG

اگر در مورد پرونده های تصویری مختلف مانند JPG PNG GIF و SVG سؤال نمی کنید، فقط بدانید که در وب سایت خود به احتمال زیاد از یک فرمت JPEG (JPG) یا PNG استفاده خواهید کرد. جوانب مثبت و منفی هر یک وجود دارد، اما در بیشتر موارد می توانید موارد زیر را به خاطر بسپارید:

  • عکس ها باید به صورت JPG ذخیره شوند و بارگذاری شوند. این نوع پرونده می تواند با اندازه نسبتاً کوچک و کارآمد از کلیه رنگهای موجود در عکس استفاده کند. با استفاده از JPEGs، در صورتی که عکسی را به عنوان PNG ذخیره کرده اید، به پرونده عظیمی که ممکن است دریافت کنید، خاتمه نمی دهید.
  • گرافیک ها ، به ویژه آنهایی که از مناطق بزرگ و مسطح رنگ استفاده می کنند ، باید به عنوان PNG ذخیره شوند. این شامل بیشتر طرح ها ، اینفوگرافی ها ، تصاویر با متن زیادی در آنها و آرم ها است. PNG ها کیفیت بالاتری نسبت به JPEG دارند اما به طور معمول اندازه پرونده نیز بزرگتر هستند. همانند بستگانشان ، پرونده SVG ، PNG با مناطقی از رنگ و متن با خطوط واضح و زیبا برخورد می کنند ، بنابراین می توانید بزرگنمایی کرده و هیچ کیفیتی را از دست ندهید. آنها همچنین از پس زمینه های شفاف پشتیبانی می کنند (اگر از یک آرم استفاده می کنید). اگر گزینه ای دارید، به دلیل کیفیت بهتر و آرایش غنی تر از رنگ های پشتیبانی شده، توصیه می کنیم PNG ها را به عنوان فرمت “24 بیتی” ذخیره کنید و نه “8 بیتی”.

3. تغییر اندازه تصاویر برای بهینه سازی سرعت و ظاهر صفحه

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

اندازه بهینه پرونده: تعداد بایت های فایل روی رایانه شما طول می کشد. این عاملی است که می تواند باعث کاهش سرعت وب سایت شما شود. تصویر 15 مگابایتی (مگابایت) بسیار زیاد است. یک تصویر 125KB (کیلوبایت) بسیار معقول تر است. اگر اندازه پرونده شما واقعاً بزرگ است، این نشانگر این است که یا ابعاد تصویر شما خیلی بزرگ است یا وضوح تصویر بسیار زیاد است.

اندازه تصویر: ابعاد واقعی تصویر شما در پیکسل ها. شما احتمالاً به عکس های چاپ شده سنتی به اندازه 6 4 4 ، 7 5 5 یا 10 8 8 فکر می کنید. اما در وب، قد و عرض در پیکسل ها اندازه گیری می شود. به عنوان مثال، یک تصویر معمولی در وب سایت یا وبلاگ ممکن است 300 × 300 پیکسل باشد.

وضوح برای تصاویر وب: وضوح تصویر یا کیفیت آن در دنیای چاپ باقی مانده است و اندازه آن در نقاط در هر اینچ (dpi) اندازه گیری می شود. یک چاپگر حرفه ای ممکن است به تصاویر حداقل 300dpi نیاز داشته باشد. اما اکثر مانیتورهای رایانه ای 72dpi یا 92dpi را نشان می دهند ، بنابراین هر چیزی بالاتر از آن overkill است و باعث می شود تصویر شما غیرقانونی بزرگ شود. هنگامی که یک برنامه طراحی گزینه “صرفه جویی در وب” را دارد ، به معنای ذخیره آن با وضوح پایین و مناسب برای وب است.

جمع بندی

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

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

 

 

نوشتن نظر

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *