نحوه درج تصویر در وبلاگ و سایت

شیوه های درج تصویر در وبلاگ و سایت

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

کپی و درج تصویر از صفحه وب در وبلاگ و سایت

تصاویر در وب تنها در صورتی قابل روئیت هستند که بر روی یک سرور آنلاین آپلود شده و در دسترس باشند، به همین دلیل روش کپی تصاویر از صفحات دیگر معمولا توصیه نمی شود چرا که ممکن است آن فایل بعدا توسط مدیر سایت یا وبلاگ اصلی حذف گردد و در نتیجه منبع تصویر از دست رفته و کپی آن در سایت یا وبلاگمان نیز نمایش داده نشود، از طرفی برخی تصاویر دارای حقوق مولف (Copyright) هستند که اصول و اخلاق حرفه ای حکم می کند تا حد امکان سعی کنیم محتوایی جدید ساخته و از کپی برداری صرف اجتناب نمائیم، به هر صورت محض اطلاع بیشتر این شیوه را در ادامه آموزش می دهیم.
اکثر کاربران تصاویر را به صورت مستقیم از صفحه مبداء کپی (Copy) و در محیط ویرایشگر ارسال مطالب درج (Paste) می کنند، این شیوه اگرچه کاربردی است اما روش بهینه نیست و بهتر است درج تصویر به صورت کپی آدرس URL عکس و تنظیم آن در قسمت ویرایشگر ارسال مطالب باشد، همانطور که پیش تر گفتیم هر تصویری که در وب می بینیم بر روی سرور آنلاین قرار دارد و آدرس کامل آن معمولا با کلیک راست بر روی عکس و مشاهده Image Info بدست می آید، به طور مثال آدرس URL یک عکس فرضی ممکن است به صورت زیر باشد:

http://yoursite.com/image/example.jpg

این آدرس در ابتدا با نام و پسوند یک سایت شروع شده و در انتها به یک فرمت مربوط به فایل های تصویری (به فرض jpg، gif، png و...) ختم می شود، این قانون در مورد اکثر تصاویر موجود در وب صدق می کند (به جزء برخی موارد که به صورت کد شده هستند)، پس از به دست آوردن آدرس URL مستقیم عکس در قسمتی از ویرایشگر ارسال مطلب که مایل هستیم کلیک کرده و آیکن ورود تصویر (معمولا به شکل یک منظره کوچک) را انتخاب می کنیم:

در این قسمت معمولا پنجره کوچکی جهت اعمال تنظیمات تصویر نمایش داده می شود که در فیلد URL آن آدرس کامل تصویر و در قسمت Description و Title توضیحات و عنوان تصویر را درج می کنیم (شکل و نحوه این تنظیمات ممکن است در سرویس ها و برنامه های مختلف اندکی متفاوت باشد)، در گام آخر موارد درج شده را با زدن دکمه مربوطه تایید می کنیم، اگر همه چیز را درست انجام داده باشیم تصویر مورد نظر در ویرایشگر ارسال مطلب مشاهده خواهد شد.
نکته: برای اطمینان از صحیح بودن آدرس URL تصویر، اگر آن را به صورت مستقیم در نوار آدرس مرورگر وارد کرده و دکمه Inter یا Go را بزنیم تصویر از روی سرور میزبان بارگذاری شده و در صفحه مرورگر نمایش داده خواهد شد، اگر این اتفاق رخ ندهد به احتمال زیاد آدرس URL صحیح نیست.

درج تصویر در وبلاگ و سایت از حافظه های شخصی

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

nic.ir

این شیوه عموما مورد استفاده صاحبان سایت ها و وبلاگ نویسانی که می خواهند وبلاگی با آدرس مستقل داشته باشند قرار می گیرد.
- استفاده از سرویس های رایگان میزبان فایل (سایت های ارائه دهنده خدمات آپلود رایگان فایل):
با جستجوی عباراتی چون "میزبانی فایل وبلاگ"، "آپلود رایگان"، فضای رایگان آپلود" و... در موتورهای جستجو و پس از تحقیق و بررسی کافی یکی از سایت های معتبر ارائه دهنده خدمات میزبانی رایگان فایل را انتخاب و در صورت نیاز ثبت نام می کنیم، این شیوه اغلب مورد استفاده وبلاگ نویسان قرار می گیرد و متاسفانه با توجه به کیفیت پائین سرویس دهی برخی سایت های میزبان شاهد مشکلات زیادی در این زمینه هستیم که به همین دلیل در انتخاب برند مناسب باید دقت و تحقیق کافی کنیم.
در هر دو شیوه فوق فایل مورد نظر باید ابتدا به سرور منتقل شود و سپس آدرس URL کامل آن در اختیارمان قرار گیرد، این آدرس در هاست شخصی با دنبال کردن دایرکتوری فایل و در سرویس دهنده های رایگان معمولا توسط خود سرویس دهنده قابل دریافت است، مثال:

http://yoursite.com/user/image/example.jpg

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

کد HTML درج تصویر در وبلاگ و سایت

برای آنهایی که همیشه دوست دارند سر از زیر و بم مسائل در آورند معمولا تکیه صرف بر امکانات اولیه ویرایشگر مطلب سیستم مدیریت سایت و وبلاگ قانع کننده نیست، از طرفی گاهی نیاز به اعمال تنظیمات بیشتر و رفع ایرادات سبب می شود که دست به ویرایش سورس کدهای HTML بزنیم، چرا که تصاویر درج شده در محیط ویرایشگر مطلب نهایتا به صورت کد در صفحات وب منتشر می شوند.
در HTML از تگ img برای درج تصویر استفاده می شود، تگ img را معمولا خاصیت های src، alt، title، width، height و border همراهی می کنند، مثال زیر نمونه کد تصویری با ابعاد 200 در 200 پیکسل را با حاشیه صفر نشان می دهد:

<img src="http://yoursite.come/image/example.jpg" alt="Image" title="Image" width="200" height="200" border="0">

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

نکاتی که در مورد درج تصاویر در وبلاگ و سایت باید رعایت کنیم

در پایان این آموزش بد نیست نکات زیر را نیز در خصوص درج تصویر در وبلاگ و سایت به خاطر داشته باشیم:
- از درج تصاویر خیلی حجیم (به طور مثال بیش از یک مگابایت) در وب خودداری کنیم، این نوع تصاویر علاوه بر اشغال میزان زیادی از فضای سرور، موجب بارگذاری طولانی مدت و به زحمت افتادن کاربران می شوند.
- از تصاویر خام که حجم و ابعاد پیکسلی بسیار زیادی دارند استفاده نکنیم، تصاویر گرفته شده با دوربین عکاسی یا تلفن همراه را ابتدا با برنامه های گرافیکی مانند فتوشاپ ویرایش کرده و از نظر حجم و ابعاد کاهش دهیم.
- از تغییر اندازه تصاویر پس از درج در محیط ویرایشگر مطلب اجتناب کنیم، این کار موجب می شود تا تصویر از فرم و ابعاد طبیعی خود خارج شود، از طرفی باعث کاهش رتبه وبلاگ یا سایتمان در موتورهای جستجو شده و در هنگام نمایش لیست جستجو یک فاکتور منفی خواهد بود.
- حتما برای تصاویر خود از تگ alt (متن جایگزین تصویر) و اندازه عرض و ارتفاع استفاده کنیم، اهمیت این کار در کمک به استاندارد شدن کدنویسی صفحه و بالا رفتن اعتبار وبلاگ و سایت نزد موتورهای جستجو نهفته است.
- از کپی تصاویر دیگران تا حد امکان پرهیز کنیم و در صورت کپی برداری حتما لینک و نام سایت یا وبلاگ منبع را ذکر نمائیم.
- از به کار بردن تصاویر بیش از اندازه در یک صفحه خودداری کنیم، اجتناب از این کار موجب بارگذاری سریع تر مطالبمان خواهد شد.
- تصاویر با پهنای پیکسلی بزرگتر از قالب خود در وبلاگ و سایت قرار ندهیم، عدم توجه به این مسئله ممکن است سبب نمایش به هم ریخته ظاهر قالب شود، البته استفاده از شیوه های نوین طراحی وب مانند قالب های واکنش گرا (Responsive) می تواند راه حل این مشکل باشد.