امتیاز موضوع:
  • 1 رای - 1 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
بهینه سازی تصاویر برای موتورهای جستجو
#1
تصاویر بخش مهمی از محتویات وب سایت شما را تشکیل میدهند و بهینه سازی تصویر برای موتورهای جستجو اهمیت بسیار زیادی دارد. شما میتوانید با استفاده از تگ alt برای تصاویر سایت خود توضیحات قرار دهید. با استفاده از نوشته های alt میتوان تصاویر سایت را برای بخش جستجوی تصاویر گوگل بهینه نمود.
استفاده از این امکان دارای این مزیت است که هنگامی که کاربری سایت شما را مشاهده کند و به هر دلیلی تصاویر سایت نمایش داده نشوند (خطاها، سرعت پایین اینترنت و ...)، به جای آن متنی که برای عکس قرار داده اید را میبیند.
به طور کلی حدود ۶۰ درصد از محتوای وبسایت ها از تصاویر تشکیل شده اند٬ اگر بهینه سازی تصاویر سایت به طور صحیح انجام شود به میزان محسوسی در سئو و بهینه سازی سایت تاثیر خواهد گذاشت.

مهمترین نکاتی که لازم است در بهینه سازی تصاویر استفاده کنیم:
ویژگی alt برای تصاویر (Image Alt)
استفاده از alt مهمترین ویژگی برای بهینه سازی تصاویر میباشد. همچنین بهتر است که این توضیحات به صورت خلاصه و دقیق باشند و به صورت متن طولانی همراه با کلیواژه های زیاد قرار داده نشوند.
انتخاب نام مناسب
برای نام گذاری تصاویر بهتر است که از نام متناسب با موضوع تصویر استفاده نمایید و در نامگذاری از خط تیره به جای خط زیر (under line ) استفاده کنید.
انتخاب پسوند مناسب
پسوندهای زیادی برای ذخیره و نمایش تصاویر سایت وجود دارد که پرکاربردترین آنها PNG و JPGمیباشند. انتخاب پسوند مناسب برای هر تصویر میتواند در بهینه سازی و کاهش حجم آن تاثیر زیادی داشته باشد. برای مثال برای تصاویر به تعداد رنگ بالا و سایز بزرگ بهتر است از پسوند JPG استفاده شود و برای تصاویر با تعداد رنگ پایین و اندازه کوچکتر بهتر است از پسوند PNG استفاده شود.
فرمت GIF مشخص کنندهٔ تصاویر گرافیکی ثابت یا متحرک است.تعداد رنگهای مورد استفاده در این فرمت محدود است. این فرمت برای تصاویرخطی ، عناصر با لبه های تیز و تعداد رنگ محدود مناسب است.
یکی از ویژگی های مهم این فرمت قابلیت ایجاد تصاویر متحرک است که میتوانید با استفاده از ابزارهای مناسب آنها را ایجاد نمایید.
حجم تصاویر
بهتر است همواره حجم تصاویر را برای قرار دادن در وب تا جایی که کیفیت آن دچار مشکل نشود، کم کنیم.
تصاویر با فرمت png یا gif دارای حجم بیشتری نسبت به jpg میباشند.
استفاده از ابعاد درست و مشخص
یکی از مهمترین فاکتورها در بهینه سازی تصاویر سایت این است که تصاویر را با ابعادی آپلود نمایید که در سایت نمایش داده خواهند شد. نکته مهمی که لازم است رعایت شود این است که از قابلیت تغییر اندازه تصاویر در html استفاده نکنید. مثلا به این صورت که تصویری با اندازه ۸۰۰ در ۶۰۰ را جهت نمایش در صفحه سایت با اندازه ۴۰۰ در ۳۰۰ در هاست آپلود نکنید بلکه با استفاده از ابزارهای مناسب ابتدا اندازه آنرا به ۴۰۰ در ۳۰۰ تغییر داده و سپس آپلود نمایید.
ذخیره تصاویر در شاخه مناسب
تصاویر سایت را در مسیر مناسب و یکجا ذخیره کنید . به طور مثال در مسیرhttp://yourdomain.com/images تصاویر را ذخیره کنید و از قرار دادن آنها به صورت پراکنده در قسمت های مختلف خودداری کنید.

منبع: webramz .com/blog
پاسخ
#2
[عکس: image-seo-tools-610x300.gif]

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

تا به حال فکر کرده اید که می توانید با استفاده از تصاویری که در سایتتون استفاده می کنید بازدید کننده جذب کنید ؟ آیا تا به حال به صورت تصویری در گوگل جست و جو کردید ؟ و آیا …
یکی از نکات مهم در سئو سایت استفاده ی درست است حالا از هرچی , تصاویر می تونه مورد مهمی باشه در نظر بگیرید یک کاربر کلمه ای رو تو گوگل به صورت تصویری جست و جو کی کنه و در نتیجه ی جست وجو تصاویر زیادی رو میبینه به نظر شما برای دریافت نتیجه ی خوب روی چه تصویری کلیک می کنه ؟ اگه درست حدس زده باشید روی تصویری که مربوط به کلمه ی مورد جست وجو کلیک می کنه. ( مثلا متن ” سئو وردپرس ” رو search می کنه و در نتیجه تصاویری از لوگوی وردپرس و سئو و سیستم های دیگه مثل جوملا و …. رو میبینه خوب باید روی تصویری که لوگوی وردپرس و سئو هست کلیک کنه نه جوملا ) هر چند این نتیجه ی جیت و جو با کلمه ی ” سئوی وردپرس ” برای اون نمایش داده شده. در کل تصویر مفهوم پست رو می رسونه مثلا درباره ی سئو صحبت می کنیم بیایم برای پست تصویر لوگوی وردپرس قرار بدیم اصلا درست نیست. ( در انتخاب تصاویر دقت کنید )
یکی از نکات سئو سرعت لود هست سعی کنید تصاویر رو تا حد ممکن کم حج کنید تا با سرعت زیادی لود بشن , برای این کار راه های زیادی وجو داره ( اگر با نرم افزار فتوشاپ کار می کنید برای ذخیره تصاویر از گزینه ی save for web page استفاده کنید فرمت های موجود png , jpg , gif با هر فرمت می تونید ذخیره کنید به حجم تصویر دقت کنید ).
هنگام استفاده از تصویر در سایت برای تصویر متن جایگزین و نام انتخاب کنید در سیستم وردپرس وقتی تصویر رو آپلود می کنید در همون قسمت بخش هایی برای انتخاب نام , متن جایگزین و توضیح وجو داره حتما با دقت این قسمت ها رو کامل کنید.
متن جایگزین ویژگی alt هست برای زمانی که اگر در صورت سرعت کم اینترنت تصویر لود نشد به جای تصویر متن انتخابی نمایش داده شود , عنوان هم ویژگی title هست برای مشخص کردن این که این تصویر مربوط به چیست موتور جست وجو ها نمی توانند تشخیص دهند داخل تصویر چه شکلی قرار داره و فقط با ویژگی های متن جایگزین و عنوان تصویر می فهمند که این تصویر برای چیست.
اگر می خواهید در نتایج جست و جوی تصویر در رتبه های اول باشید با دقت برای تصاویری که در سایت استفاده می کنید عنوان و متن جایگزین بنویسید.
آخرین مورد درباره ی سئو تصاویر نام تصویر هست , فرض کنید این پست را شما نوشته اید و می خواهید برای این پست یک تصویر درست کنید و یک نام براش انتخاب کنید ( یه تصویر مناسب در زمینه ی این پست , حجمش مناسب باشه , نام تصویر رو چی بزرایم خوبه مثلا image seo tools فک کنم خوب باشه ) یکی دیگه از موراد که برای ظاهر شدن در نتایج اول موتور جستوجو هایی مثل گوگل , یاهو , بینگ مهم هست انتخاب نام مناسب برای تصاویر هستش اگر برای نام  تصویر در این پست بنویسیم 12345 به نظر شما باید چه چیزی رو جست وجو کنیم تا در نتایج دیده شویم پس برای تصاویر نام مناسب انتخاب کنید.

منبع: http://bigtheme .ir
پاسخ
#3
سئو و بهینه سازی تصاویر

سئو و بهینه سازی تصاویر یکی از فاکتورهای On Page Optimization میباشد.تصویر نکنید که با سئوسازی تصاویر شما فقط در مکان های بالای جستجو ظاهر خواهید شد بلکه شما با بهینه سازی تصاویر یک تجربه خوب از وبسایتتان برای کاربر ایجاد میکنید.


مانند دیگر بخش های سئو شما هنگامی که دارید بر روی سئوسازی تصاویر کار میکنید باید موتورهای جستجو و شبکه های اجتماعی را با هم در برنامه خود قرار دهید.در این مقاله ما به بررسی هر ۲ بخش میپردازیم.
بهینه سازی تصاویر برای موتورهای جستحو : سئو تصاویر
بهینه سازی تصاویر برای موتورهای جستجو بسیار مهم میباشد زیرا بهینه سازی شما در بخش های دیگر سئو مانند Bounce Rate و کارآیی ( Usability ) تاثیر مستفیم دارد.

۱. کلمه ی کلیدی در نام فایل , توضیحات فایل و ویژگی ALT

این موضوع خیلی ساده و جزو اصول اولیه است.نام فایل اپلود شده شما بسیار مهم است تصور کنید که در حال آپدیت تصویری در مورد تبلت جدید مایکروسافت Surface هستید به ۲ مثال زیر توجه کنید:

cnetmicrosoft.png

microsoftsurface.png

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

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

همچنین سعی کنید اسم فایلی که انتخاب میکنید پر از کلمات کلیدی نباشد یعنی سعی کنید در تصویر خود Keyword Stuffing انجام ندهید.

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

همچنین سعی کنید به جای قرار دادن فاصله ( Space ) در تصاویر از خط فاصله استفاده کنید.(با تشکر از مدیریت وب هاب برای یادآوری و تذکر این مورد )

۲. فرمت تصاویر

گوگل میتواند فرمت های  BMP, GIF, JPEG, PNG, WebP و  SVG را ایندکس کند.واقعا سخت هست که انتخاب کنیم چه فرمتی را در تصاویر قرار دهیم رایج ترین فرمت ها PNG و JPG هستند.همچنین شما میتوانید از سرویس WebP گوگل هم استفاده کنید.براساس ادعای گوگل شما ۳۰ درصد فشرده سازی بیشتر بدون از دست دادن کیفیت انجام خواهید داد.

همچنین بخوانید : سایت بهینه با تصاویر بهینه

۳. از سایت های دیگر لینک تصویر قرار ندهید

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

[عکس: Hotlink-Protection.jpg]
Hotlink Protection | بهینه سازی تصاویر

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

۵. خودداری از قرار دادن متون در تصاویر

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

۶. نقشه تصاویر اضافه کنید

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

۱. از تصاویر عجیب غریب با فرمت GiF در پروفایل خود استفاده نکنید

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

سعی کنید به جای تصاویر پر زرق و برق از تصاویر با کیفیت بالا استفاده کنید.در بهینه سازی تصاویر برای شبکه های یک شعار وجود دارد : Quality Quality and Quality.

۲. از تصاویری استفاده کنید که پیامی را به کاربر منتقل کند 

تا به حال در مورد عشق در نگاه اول چیزی شنیده اید؟ ما نمیخواهیم اینجا بحث کنیم که آیا شما به این اصطلاح باور دارید یا نه اما میخواهیم بگوییم اگر شما به این اصطلاح باور دارید پس باید به این اصل هم باور داشته باشید که مهم ترین تاثیر شما بر کاربران در ۱۰ ثانیه اول میباشد.

تصاویر میتوانند بهترین و بدترین تاثیر را بر کاربر بگذارند یا شما کاربر خود را جذب میکنید یا او را از خود متنفر میکنید.پس سعی کنید تصویری را انتخاب کنید که در ۱۰ ثانیه اول منظور شما را به کاربر در شبکه های اجتماعی منتقل کند.بهترین نمونه این تصاویر را برای فیسبوک میتوانید در پست Facebook Timeline Cover : Creative Examples پیدا کنید.

۳. استفاده از Open Graph در فیسبوک

اگر یکی از شبکه های اجتماعی که شما در آن فعالیت میکنید فیسبوک است ,حتما از Open Graph استفاده کنید.Open Graph پروتکل فیسبوک میباشد برای انتخاب تصاویر شاخص ( Thumbnail ) :

[عکس: Open-Graph-300x131.png]


[عکس: Open-Graph-Thumbnail-300x154.png]
Open Graph Thumbnail | بهینه سازی تصاویر در شبکه های اجتماعی


۴. استفاده از Pinterest


از زمانی که این شبکه اجتماعی تصاویر ایجاد شد بحث های زیادی پیرامون بهینه سازی سایت برای این شبکه ی اجتماعی مطرح شد.برای انتخاب تصاویر خود حتما از این شبکه استفاده کنید.


و در اخر هم همیشه به یاد داشته باشید تصاویر خود را ایتدا برای بازدید کننده های خود انتخاب و بهینه کنید سپس برای موتورهای جستجو زیرا سئو فقط و فقط یعنی ارتباط قوی بین وبسایت و کاربران.

منبع: seomoz .ir/image-optimization-seo.html
پاسخ
#4
یافت و زمان نمایش سایت را کاهش دهیم

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

[عکس: behine2.jpg]
استفاده از ویژگی 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 برتری خود را نشان می دهند. با این حال هنوز هم امکان ارتقا و بهبود هست. این خیلی بهتر است که تصاویر را برای دستگاه هایی ارائه بدهیم که قادر به استفاده از آن ها هستیم. پروژه هایی مانند [url=http://responsiveimages.org/]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 اصولا به این صورت است که هر بخش از تصویر از بالا به پایین دانلود می شود و بصورت بخش به بخش روی صفحه به نمایش در می آید. اما می توان آنها را بصورت تدریجی بارگذاری کرد به این صورت که ابتدا تصویر تار بارگذاری می شود و پس از چند ثانیه تصویر واضح و نهایی نشان داده می شود. این روش هیچ تاثیری روی سرعت بارگذاری تصویر ندارد اما به خاطر تاثیر ادراکی روی بیننده به نظر می رسد که سرعت بارگذاری سایت بیشتر است. چشم انسان در یک زمان تنها می تواند روی یک بخش بسیار کوچک متمرکز شود بنابراین از دید کاربران، بارگذاری تدریجی تصاویر از تار به کاملا شفاف سریعتر از حالت بارگذاری از بالا به پایین به نظر می رسد.


http://forum.montakhabweb.ir/showthread.php?tid=218
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  چگونه می توانم توسط دایرکت ادمین دیتابیس را optimize (بهینه سازی) کنم؟ حسن مصطفوی 0 706 21-01-2016, 06:34 PM
آخرین ارسال: حسن مصطفوی

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان