کانال تلگرام

چطور تصاویر را برای طراحی وب و سئو وب سایت بهینه سازی کنیم؟

تاریخ : ۱۱ مهر ۱۳۹۸
نویسنده : آروین سعادت نیا
دسته بندی ها : طراحی وب , سئو

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

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

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

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

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

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

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

گرافیک : اگر به دنبال تصاویری هستید که گرافیکی تر به نظر برسند، ابزار های آنلاین و رایگان زیادی وجود دارند که می توانید از آنها برای ساخت اینفوگرافیک استفاده کنید.

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

اگر در فرمت تصاویر مانند JPG ، PNG ، GIF و SVG دچار سردرگمی هستید، فقط بدانید که در وبسایت خود احتمالاً بیشتر از فرمت های JPEG و PNG استفاده خواهید کرد. هر کدام از این فرمت ها معایب و مزایایی دارد و در بیشتر موارد باید موضوعات زیر را در نظر بگیرید :

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

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

اغلب بزرگنمایی در این نوع تصاویر نتیجه بهتری خواهد داشت، تصاویر PNG از پس زمینه transparent نیز پشتیبانی می کنند، این موضوع به خصوص زمانی که لوگو طراحی میکنید بسیار مفید است. برای پشتیبانی بهتر از رنگ ها و بهرمندی از تصاویر با کیفیت پیشنهاد می کنیم که تصاویر PNG را با فرمت ۲۴ بیتی به جای ۸ بیت ذخیره سازی کنید.

با همه این توضیحات اگر از تصویری استفاده می کنید که در آن متون به کار رفته است، از چه فرمتی استفاده می کنید؟ اگر اکثریت را تصویر تشکیل می‌دهد بهتر است همچنان از تصاویر JPG استفاده کنیم، اکثر برنامه های تصویری ساده به شما این امکان را می‌دهند که با استفاده از بخش Save As یا Save for web تصویر مورد نظر خود را با فرمت دلخواه ذخیره سازی کنید.

البته در این میان ابزارهای مبتنی بر مرورگری نیز هستند مانند Zamzar که به صورت آنلاین تبدیل فایل های تصویری را برای شما انجام میدهند. می توانید یک تصویر PNG را به تصویر JPEG تبدیل کنید، اما با تبدیل فایل JPEG به PNG چیزی به دست نمی آورید، زیرا عملاً PNG با کیفیت تر از JPEG است و تصاویر JPEG در زمان فشرده سازی جزئیات را از دست داده‌اند و نمی‌توان آنها را بازگردانی کرد.

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

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

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

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

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

  • اندازه بهینه فایل : به تعداد بایت هایی که یک تصویر بر روی رایانه شما اشغال می‌کند، گفته می‌شود این فاکتوری است که می تواند سرعت وب سایت شما را پایین بیاورد تصویری با اندازه ۱۵ مگابایت خیلی بزرگ است، تصویری با اندازه ۱۲۵ کیلوبایت معقولانه تر به نظر می رسد. وقتی حجم تصویر شما بزرگ باشد، این یعنی که ابعاد و رزولوشن آن نیز بالاست.
  • اندازه تصویر : به اندازه ابعاد یک تصویر به پیکسل گفته می‌شود در وب ارتفاع و عرض با پیکسل اندازه گیری می شود. به عنوان مثال اندازه یک تصویر معمولی در یک وبلاگ چیزی حدود 795×300 است.
  • رزولوشن برای تصاویر وب : وضوح تصویر یا کیفیت آن چیزی است که در دنیای چاپ به آن توجه بیشتری می شود، این مقدار معمولاً با dpi اندازه گیری می شود. پرینترهای حرفه‌ای به تصویری با رزولوشن 300dpi نیاز دارند. اما بیشتر کامپیوترها تصاویر را با رزولوشن 72dpi تا 92dpi نشان می‌دهند.

چطور می‌توانید اندازه فایل، اندازه تصویر و رزولوشن آن را به دست آورید؟

به سادگی می توانید اندازه فایل و تصویر را در کامپیوتر تان به دست آورید. اگر بر روی کامپیوتر شخصی خود کار می کنید با راست کلیک کردن بر روی فایل تصویر و انتخاب منوی 300dpi و سپس انتخاب سربرگ Summary می توانید به این اندازه ها دسترسی داشته باشید.

بر روی کامپیوترهای مکینتاش Ctrl+click بر روی یک تصویر و سپس انتخاب Get Info می تواند اطلاعات تصویر را به شما نمایش دهد. با این حال برای به دست آوردن رزولوشن یک تصویر نیاز به برنامه های پیشرفته تری مانند فتوشاپ دارید.

نکاتی برای اندازه تصاویر و فایل ها و همینطور رزولوشن

اکنون که می دانید چطور اندازه و حجم یک تصویر را به دست آورید، نکاتی وجود دارند که باید به آنها توجه کنید.

  • اندازه بهینه فایل تصاویر بزرگ و یا آنهایی که به عنوان پس زمینه استفاده می‌شوند، نباید حجمی بیش از یک مگابایت داشته باشند.
  • بیشتر تصاویر گرافیکی وب حجمی در حدود ۳۰۰ کیلوبایت یا کمتر دارند.
  • اگر از تصاویر پس زمینه تمام صفحه استفاده می کنید، تصویری با پهنای ۲۰۰۰ پیکسل پیشنهاد می شود.
  • بهتر است همیشه از گزینه Save for web برای بهینه سازی تصاویر خود استفاده کنید.
  • می توانید به سادگی تصاویر بزرگ تر را کوچک کنید، اما خیلی دشوار است که بتوان تصاویر کوچک را بزرگ تر کرد. شما نمی توانید با یک گالن آب در یک استخر شنا کنید. 

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

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

  • اندازه تصویر خود را تغییر دهید : اگر تصویری با پهنای ۵۰۰۰ پیکسل دارید می توانید به سادگی آن را به ۲۰۰۰  یا ۱۲۰۰ پیکسل کاهش دهید، این کار به شدت اندازه فایل شما را کاهش خواهد داد. در زمان تغییر اندازه ها حتماً نسبت ها را یکسان نگه دارید، در این صورت تصاویر متناسب کوچک خواهند شد.
  • رزولوشن را کاهش دهید : بیشتر برنامه هایی که تصاویر را ویرایش می کنند به صورت اتوماتیک رزولوشن تصویر شما را به 72dpi و یا  92dpi تغییر می دهند، شما می توانید این کار را در فتوشاپ با استفاده از گزینه ای به نام save for web انجام دهید، همین کار در برنامه های دیگر با استفاده از گزینه ای به نام Save As و تنظیم سطح کیفیت قابل انجام است.
  • تصاویر خود را با ابزارهای رایگانی مانند TinyPNG و TinyJPG فشرده سازی کنید : هر دوی این ابزارها اندازه فایل شما را کاهش می دهند، بدون اینکه تاثیر محسوسی در کیفیت تصویر شما داشته باشند.

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

در صورتی که از استایل و اندازه های یکسانی در صفحات وب خود استفاده کنید، تصاویر بهتر به نظر خواهند رسید. برای اینکه این مورد را به خوبی درک کنید مثالی در زیر آورده شده است. در اولین تصویر عکسها در ابعاد های مختلفی وجود دارند، یکی به صورت عمودی قرار گرفته است در حالی که عکس های دیگر به صورت افقی دیده می شوند، این کار باعث می‌شود صفحه شما بی‌نظم به نظر برسد :
images-different-sizes

 اما در مثال بعدی تمام تصاویر را با اندازه های یکنواختی مشخص کرده ایمT همانطور که کاملاً مشاهده می شود، صفحه وب کاملاً منظم است. از آنجایی که همه تصاویر دارای اندازه های یکسانی هستند، همگی در یک ستون قرار گرفته‌اند و در کنار آنها متونی برای توضیح مشاهده می شود :

mages-uniform-size

برای اینکه به سئوی تصاویر خود کمک کنید از اسامی مناسبی برای آنها استفاده کنید

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

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

مشخصه alt را برای تصاویر خود تنظیم کنید

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

مشخصه alt را ترجیحا با کلمات کلیدی هدفمند پر کنید. این مشخصه همچنین برای کاربرانی از وب سایت شما که کم بینا هستند و از نرم‌افزارهای صوتی بهره می‌برند بسیار مفید است.

#بهینه سازی_تصاویر_برای_سایت
۰ نظر

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید