بهینه سازی تصاویر برای افزایش سئو سایت

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

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


- استفاده از ویژگی title برای عکس ها :

این ویژگی یکی از راه های افزایش سئو عکس های سایتمان است . تا حالا شده وقتی اشاره گر خود را بر روی عکسی میبرید یک کادر که تول تیپ نام دارد به نمایش در آید و اطلاعات کوتاهی به ما دهد ؟ این توضیح کوتاه یا همون عنوان عکس با attribute تایتل ( title ) به وجود می آید . این اتریبیوت برای سئو عکس ها بسیار مفید است . برای افزودن آن به عکس فرض کنید شما یک عکس دارید :

<img src="/uploads/test.jpg" title="title dar en ja gharar migirad">

در بالا همان طور که میبینید attribute  title اضافه شده است . شما میتونید در قسمت title یک نام برای تصویر انتخاب کنید و قرار دهید تا وقتی کاربر اشاره گر خود را بر روی آن میبرد نام عکس شما را نشان دهید.

- استفاده از ویژگی alt برای عکس ها :

یکی دیگر از attribute مهم دیگر برای جذب موتور های جستجو اتریبیوت alt است . مطمئنا این را میدانید که روبات ها نمیتوانند عکس ها را مانند انسان تماشا کنند و متن داخل آن را بخوانند . پس راه کاری وجود دارد که میتواند متن داخل عکس یا موضوع عکس را به روبات ها نشان دهد . ویژگی alt یک راه عالی برای بهینه سازی برای جستجوگر هاست . یکی دیگر از مزیت های ویژگی alt ، این است که اگر عکس لود نشود به جای آن متنی که در ویژگی alt نوشته اید به نمایش در می آید. کد زیر یک عکس است که دارای دو ویژگی alt و title میباشد :

<img src="/uploads/test.jpg" alt="in yek test baraye vijegi alt ast" title="title dar in ja gharar migirad">

 

- تعیین اندازه برای تصاویر :

یکی از بهترین راه های بهینه سازی تصاویر دادن ابعاد به آن است . این کار دو خاصیت دارد اول آن که برای سئو سایت شما مفید است و دوم آن که این کار باعث افزایش سرعت سایت شما میشود زیرا دیگر مرورگر نیاز به تغییر سایز خودکار ندارد . برای این کار باید در تصویر خود طول و عرض را مشخص کنید مانند کد زیر :

<img src="/uploads/test.jpg" width="200px" height="200px">

- فشرده سازی تصاویر :

بهترین راه برای بهینه سازی فشرده و کم حجم سازی تصاویر است . این کار باعث افزایش سرعت سایت شما میشود و همچنین باعث افزایش محبوبیت سایت شما نزد گوگل و دیگر موتور های جستجو میشود . برای کم حجم کردن تصاویر میتونید از نرم افزار فتوشاپ استفاده کنید . به این صورت که ابتدا عکس مورد نظر را با فتوشاپ باز کرده سپس از منوی file گزینه save for web  را بزنید حالا در این صفحه میتونید اندازه تصویر میزان فشرده سازی ( کیفیت ) و … را تنظیم کنید و حالا ذخیره نمایید . عکس شما به میزان فراوان بهینه سازی میشود.

- استفاده از فرمت های رایج :

فرمت های مختلف تصویر بر روی سئو سایت شما موثر است . سعی کنید از فرمت هایی مانند : BMP, GIF, JPEG, PNG, WebP استفاده نمایید . و پیشنهاد ما به شما استفاده از فرمت JPEG است زیرا فشرده سازی بالاتری دارد . شما میتوانید از فرمت Web P استفاده کنید که گوگل سرویسی در این زمینه دارد که میتواند عکس های شما را به این فرمت تبدیل کند این فرمت عکس های شما را تا ۳۰ در صد فشرده سازی میکند . لینک سرویس WebP گوگل .

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

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

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

- تعیین نام متناسب با عکس :

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


- عکس را از سایت های دیگر کپی نکنید :

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

یکی دیگر از مشکلات کپی از سایت های دیگر آن است که اگر آن سایت از hotlink protection استفاده کند عکس مورد نظر فقط در سایت اصلی به نمایش در می آید و اگر شما آن را کپی نمایید دیگر به نمایش در نمی آید .

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

 

- Rescale کردن تصاویر پیکسلی

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

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

 

انتخاب PNG برای عملکرد

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

PNG-8 از یک پالت تطبیقی که تا ۲۵۶ رنگ را پشتیبانی می کند استفاده می کند که یکی از این رنگ ها رنگ شفاف یا Transparent است. اما این شفافیت باینری است. یعنی یا بخشی از شکل کاملا شفاف است یا کاملا مات و هیچ درجه بندی جزئی برای آن وجود ندارد. اگر یک تصویر PNG-8 دارای پیکسل های روشنی باشد که روی یک پس زمینه تیره قرار باشد، لبه های ناهمواری ایجاد شده که به وضوح نشان داده می شوند اما قابلیت خوب این فرمت حجم نسبتا مناسب آن است.

PNG-24 از پالت رنگی کامل و شفافیت دارای جزئیات کامل بهره می برد و در نتیجه تصاویر با وضوح و شفافیت در این فرمت خود را نشان می دهند و تنها فرمتی است که برای نشان دادن شفافیت بطور کامل بکار می رود. اما نکته منفی این فرمت حجم بالای آن است.

اگر واقعا مجبورید که از فرمت PNG استفاده کنید بهتر است از PNG-8 استفاده کنید و سعی کنید تا حد امکان پالت رنگی خود را محدود تر کنید و فقط در مواقعی از PNG-24 استفاده کنید که تصویر مورد نظر دارای شفافیت درصدی است. اگر شفافیت در تمام عکس یکسان است می توانید از فرمت کم حجم تر و کمی کد نویسی CSS استفاده کنید.

از فرمت انیمیشنی GIF خیلی کم استفاده کنید

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

 

بارگذاری تصاویر JPEG به صورت تدریجی

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

 

لیست مطالب مرتبط

مراحل طراحی وب سایت چیست؟

تفاوت ورژن Html4 با Html5 بهینه سازی سایت های طراحی شده با Html

مراحل طراحی وب سایت بسیار گسترده تر از جنبه های فنی آن همانند برنامه نویسی می باشد؛ لذا برای اینکه سایتی موفق و سود آور داشته باشیم

در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند.

در این مقاله چندین بهینه ساز صفحات طراحی شده با زبان Html معرفی و نحوه ی کار با آنها توضیح داده می شود.