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

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

web-blog-image

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

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


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

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


تصاویر در وب تنها در صورتی قابل روئیت هستند که بر روی یک سرور آنلاین آپلود شده و در دسترس باشند، به همین دلیل روش کپی تصاویر از صفحات دیگر معمولا توصیه نمی شود چرا که ممکن است آن فایل بعدا توسط مدیر سایت یا وبلاگ اصلی حذف گردد و در نتیجه منبع تصویر از دست رفته و کپی آن در سایت یا وبلاگمان نیز نمایش داده نشود، از طرفی برخی تصاویر دارای حقوق مولف (Copyright) هستند که اصول و اخلاق حرفه ای حکم می کند تا حد امکان سعی کنیم محتوایی جدید ساخته و از کپی برداری صرف اجتناب نمائیم، به هر صورت محض اطلاع بیشتر این شیوه را در ادامه آموزش می دهیم.
اکثر کاربران تصاویر را به صورت مستقیم از صفحه مبداء کپی (Copy) و در محیط ویرایشگر ارسال مطالب درج (Paste) می کنند، این شیوه اگرچه کاربردی است اما روش بهینه نیست و بهتر است درج تصویر به صورت کپی آدرس URL عکس و تنظیم آن در قسمت ویرایشگر ارسال مطالب باشد، همانطور که پیش تر گفتیم هر تصویری که در وب می بینیم بر روی سرور آنلاین قرار دارد و آدرس کامل آن معمولا با کلیک راست بر روی عکس و مشاهده Image Info بدست می آید، به طور مثال آدرس URL یک عکس فرضی ممکن است به صورت زیر باشد:
http://yoursite.com/image/example.jpg
این آدرس در ابتدا با نام و پسوند یک سایت شروع شده و در انتها به یک فرمت مربوط به فایل های تصویری (به فرض jpg، gif، png و...) ختم می شود، این قانون در مورد اکثر تصاویر موجود در وب صدق می کند (به جزء برخی موارد که به صورت کد شده هستند)، پس از به دست آوردن آدرس URL مستقیم عکس در قسمتی از ویرایشگر ارسال مطلب که مایل هستیم کلیک کرده و آیکن ورود تصویر (معمولا به شکل یک منظره کوچک) را انتخاب می کنیم:
web-blog-insert-image
در این قسمت معمولا پنجره کوچکی جهت اعمال تنظیمات تصویر نمایش داده می شود که در فیلد 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) می تواند راه حل این مشکل باشد.
sectionدسته بندی: مهارتهای وب » وبلاگ نویسی
related مطالب بیشتر:
» فوت و فن وبلاگ نویسی حرفه ای چیست؟!
» نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
» محافظت از مطالب وبلاگ در مقابل کپی غیر مجاز!
» نحوه قرار دادن کلیپ فلش در سایت و وبلاگ
» چگونه از تمام امکانات وبلاگ خود استفاده کنیم؟
commentنظرات (۱۱۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: احمدرضا
زمان: ۲۲:۲۱:۳۳ - تاریخ: ۱۳۹۲/۱۱/۱۶
سلام هرچی گفتید رو انجام دادم اما میگه (امکان درج چنین پستی به دلیل وجود اسکریپ یا لینک غیر مجاز وجود ندارد) باید چیکار کنم؟
پاسخ: 
سلام
متاسفانه سرویس بلاگفا محدودیت های بیش از حد معمول به کاربران خود تحمیل می کند! دو راه حل وجود دارد:
- استفاده از یک سرویس دیگر برای آپلود فایل ها که بلاگفا با آدرس آن مشکلی نداشته باشد.
- تغییر سرویس وبلاگ دهی (بلاگفا) و انتخاب یک سرویس دیگر (مانند پرشین بلاگ، میهن بلاگ و...)!
نویسنده: شبديز
زمان: ۲۲:۵۶:۲۴ - تاریخ: ۱۳۹۲/۱۱/۱۸
با سلام، و تشکر از راهنماييهاي بسيار مفيدتون، ميشه سايت هايي راکه ميشه ازآنجا فايل هاي پي دي اف، بازي ها و برنامه هاي موبايلي و... رارايگان آپلودکرد، واسه وبلاگ، را معرفي کنيد، ممنون
پاسخ: 
سلام
متاسفانه به جهت ماهیت تبلیغاتی این کار، از معرفی سایت ها معذوریم! اما با یک جستجوی ساده در وب تعداد زیادی از این سرویس ها (چه داخلی و چه خارجی) را خواهید یافت.
نویسنده: elahe
زمان: ۲۱:۵۰:۵۶ - تاریخ: ۱۳۹۲/۱۱/۱۹
من هر چقدر این کار رو می کنم نمیگیره؟ یعنی آدرس میده بعد ادرس رو که میدم عکس رو نمیاره؟؟؟؟
از چیه مشکل؟؟
من تا فردا به این عکس ها نیاز دارم.
پاسخ: 
لطفا یک نمونه آدرس تصویر، جهت بررسی درج کنید، از چه سرویسی استفاده می کنید؟
نویسنده: مهدی
زمان: ۲۲:۱۹:۴۵ - تاریخ: ۱۳۹۲/۱۱/۳۰
سلام من چگونه میتونم تصویر خودم را به عنوان نویسنده در وبلاگم قرار بدهم . ممنونم
پاسخ: 
سلام
در قسمت مدیریت وبلاگ، معمولا بخشی برای ویرایش پروفایل یا اطلاعات نویسنده وبلاگ وجود دارد که امکان آپلود یک تصویر کوچک نیز در آن تعریف شده است.
نویسنده: رها
زمان: ۱۹:۴۶:۲۴ - تاریخ: ۱۳۹۲/۱۲/۱۵
اخه ما كه از وبلاگ هيچى حاليمون نميشه چى بگيم
پاسخ: 
در یک مطلب نمی توان تمام مباحث وبلاگ نویسی را از ابتدا شرح داد! موارد مقدماتی را باید با مطالعه و تمرین یاد بگیرید، همه ما از همین زمین های خاکی شروع کرده ایم! :-)
نویسنده: نسیم سحر
زمان: ۰۷:۰۰:۰۲ - تاریخ: ۱۳۹۳/۰۱/۰۹
دستت طلا...
بهترین کمک رو بهم کردی
نویسنده: یاسمن
زمان: ۰۴:۵۰:۴۲ - تاریخ: ۱۳۹۳/۰۱/۲۰
سلام من یه روزه که وبلاگ ساختم هنوزم روی صفحه مرورگر نیومده داخلش که مطلب می نویسم ثبت میشه و نشون میده اما عکس رو که از قسمت pictures کامپیوترم با موفقیت اپلود می کنم بعد در درج مطلب شکل درخته رو میزنم اولا درست نمی دونم داخل مربع ها چی بنویسم بعدم وقتی همش رو پر میکنم و تایید رو میزنم می فرستم مینویسه خطا شما باید همه رو بنویسید. میشه جواب سوالام رو بدین لطفا
پاسخ: 
سلام
- از چه سرویس وبلاگی استفاده می کنید؟
- فیلدها چه اسمی دارند و شما چه محتوایی در آنها وارد می کنید؟
نویسنده: zahra
زمان: ۱۲:۰۷:۵۳ - تاریخ: ۱۳۹۳/۰۱/۲۳
سلام ممنون از سایت خیلی خوبتون. من دارم یک سایت فروشگاه آنلاین کتاب طراحی می کنم و می خوام که عکس جلد کتاب ها رو در پایگاه داده ذخیره کنم اما بلد نیستم لطفا کمک کنید خیلی لازم دارم وقت کمی هم دارم. منتظرم. بهم ایمیل کنید. ممنون
پاسخ: 
سلام
آموزش این موارد نیازمند طی مراحل مقدماتی و فرآیندی تدریجی است، امکان طرح در این بخش وجود ندارد.
نویسنده: من
زمان: ۱۶:۰۲:۳۷ - تاریخ: ۱۳۹۳/۰۱/۳۰
بازم سلام
ببخشید من آدرس تصویرم درسته چک هم کردم. اما در قسمت آدرس تصویر آدرس رو وارد کردم و در نوشته جایگزین توضیح کوتاهی درباره عکس دادم. لازمه که فاصله عکس و طول ضخامت آنرا هم مشخص کنم یا خیر؟ یا درج تصویر با موبایل امکان پذیر نیست؟ لطفا کمکم کنید.
پاسخ: 
سلام
در صورتی که آدرس تصویر صحیح باشد (و با وارد کردن آدرس در مرورگر، فایل نمایش داده شود)، همچنین اگر مرورگر گوشی شما از امکانات ویرایشگر ارسال مطلب سرویس دهنده مورد نظر پشتیبانی کند (یعنی بتوانید از امکانات بخش ارسال مطلب استفاده کنید)، نباید مشکلی در درج تصویر باشد، معمولا صرف تنظیم بخش آدرس برای نمایش تصویر کافی خواهد بود، هر چند تنظیم سایر موارد برای SEO صفحه توصیه می شود.
نویسنده: نازیلا
زمان: ۱۵:۵۲:۴۱ - تاریخ: ۱۳۹۳/۰۲/۰۷
سلام. لطفا راهنمایی کنید. من بعد از اینکه عکسم رو اپلود کردم و اندازش رو تغییر دادم وقتی میخوام قرار بدم تو وبلاگ با این پیغام مواجه میشم ” امکان درج چنین پستی به دلیل وجود اسکربپ با لینک غیر مجاز وجود ندارد” چیکار باید بکنم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
پاسخ: 
سلام
این پیغامی آشنا برای کاربران سرویس مذکور است و دلیل آن اعمال سیاست های به شدت محدود کننده از طرف مدیریت بلاگفا است که آدرس بیشتر سرویس های آپلود را در لیست سیاه خود قرار داده!، لذا باید فایلتان را در سرویسی آپلود کنید که بلاگفا نسبت به آن حساس نباشد!
نویسنده: فائزه
زمان: ۲۲:۴۴:۵۷ - تاریخ: ۱۳۹۳/۰۲/۱۴
سلام! من تازگی یه وبلاگ درست کردم از تو اینترنت عکس های کد دار رو میگیرم و توی وبلاگ، بخش ارسال مطلب جدید به راحتی peste میکنم. ولی عکس هایی رو که با گوشی گرفتم و از طریق کابل روی کامپیوتر ریختم رو نمی تونم بگذارم. زمانی که عکس رو کپی می کنم تو قسمت ارسال مطلب جدید گزینه peste غیر فعاله. خواهشا کمکم کنید...
پاسخ: 
سلام
لطفا آموزش را مطالعه کنید، نحوه صحیح درج تصویر در وب توضیح داده شده است!
نویسنده: شادی
زمان: ۰۷:۳۰:۴۱ - تاریخ: ۱۳۹۳/۰۲/۲۸
سلام، من تصویری رو که میخوام بذارم رو اپلود کردم اما بازم خطا میده
چی کار کنم؟
پاسخ: 
سلام
چه خطایی دریافت می کنید؟!
نویسنده: فائزه
زمان: ۱۴:۴۹:۴۶ - تاریخ: ۱۳۹۳/۰۳/۰۵
من هرچی آدرس تصاویر رو تو پیش نمایش میزنم اما تصویر تو وبلاگ بالا نمیاد چرا؟؟؟؟؟؟؟؟
پاسخ: 
آدرس وبلاگ؟
نویسنده: استقلالی
زمان: ۱۴:۳۸:۰۷ - تاریخ: ۱۳۹۳/۰۳/۱۴
سلام. من عکسم رو آپلود کردم ولی وقتی کدش رو توی درج تصویر وبلاگ میذارم، تصویر رو نشون نمیده. چیکارکنم؟
پاسخ: 
سلام
بدون تست و دیدن مراحل کار شما نمی توان نظر خاصی داد، ممکن است ایراد از آدرس تصویر، روش قرار دادن یا مشکلات عجیب بلاگفا باشد!
نویسنده: استقلالی
زمان: ۱۳:۰۳:۲۹ - تاریخ: ۱۳۹۳/۰۳/۱۵
عکس آپلود میشه. من کد عکس رو توی درج تصویر میذارم. تایید که میکنم عکس نمیاد! با سایتای مختلفی هم آپلود کردم ولی بازم همین مشکل هست!
پاسخ: 
آدرس تصاویر خود را در مرورگر وارد کنید، اگر تصویر مورد نظر بارگذاری شد، لذا اشکال از سرویس میزبان فایل نیست، ممکن است مشکل از ویرایشگر بلاگفا، شیوه درج شما یا تبلیغاتی بودن سایت میزبان فایل (از دید بلاگقا) باشد! در هر صورت باید بیشتر بررسی و تست شود.
paged صفحه 3 از 8
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




4 × 6
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

هزینه و بازخورد مناسب