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 مطالب بیشتر:
» چگونه از تمام امکانات وبلاگ خود استفاده کنیم؟
» اشتباهات رایج در وبلاگ نویسی غیر حرفه ای!
» فوت و فن وبلاگ نویسی حرفه ای چیست؟!
» پاسخ به سوالات و حل مشکلات وبلاگ نویسان
» آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
commentنظرات (۱۱۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: جواد ماروسی
زمان: ۱۸:۳۳:۵۹ - تاریخ: ۱۳۹۶/۰۱/۱۶
سلام . من تازه وبلاگ ساختم . همه مراحل درج تصویر در وبلاگ رو انجام میدهم . ولی عکس در وبلاگ قرار نمیگیرد . لطفا راهنمایی کنید تشکر
پاسخ: 
طبق بررسی وبلاگ شما، ظاهرا تصاویر در وب آپلود نشده و صرفا آدرس وبلاگتان را به عنوان منبع تصاویر درج کرده اید، باید ابتدا تصاویر خود را در یک سایت میزبان فایل آپلود کرده و سپس از آدرس فایل آپلود شده مطابق با آموزش جهت درج تصویر استفاده نمائید.
نویسنده: محدثه
زمان: ۱۸:۳۸:۲۲ - تاریخ: ۱۳۹۶/۰۸/۰۴
سلام چه سایت آپلود عکسی خوبه که بعد چند وقت عکسات حذف نشه ؟
پاسخ: 
متاسفانه نمی توانیم نام سایت خاصی را عنوان کنیم، کمی در انجمن های وب جستجو کنید، سایت ها و سرویس هایی در این زمینه معرفی شده اند که می توانید در خصوص کیفیت هر کدام تحقیق کنید.
نویسنده: niloofar
زمان: ۱۸:۲۴:۴۱ - تاریخ: ۱۳۹۶/۰۹/۰۲
با سلام
من مشکلم اینه که عکس رو میخوام در بین متن بذارم عکس رو آپلود میکنم و بعد آدرس رو برای درج تصویر میزنم همه مراحل رو درست میرم اما در متن نمایش داده نمیشه
میشه لطف کنید بگید مشکل میتونه از کجا باشه؟
ممنونم
پاسخ: 
فایل را در چند سایت مختلف آپلود و تست نمائید، اگر مشکل بر طرف نشد نیاز به درج آدرس صفحه جهت بررسی بیشتر است.
نویسنده: مسعود
زمان: ۰۸:۰۸:۵۶ - تاریخ: ۱۳۹۶/۰۹/۰۷
با سلام خدمت شما چگونه عکس را در بلاگفا جا به جا کنم یا کشیدن عکس هرجا که خودم بخوام به چه صورته؟؟
پاسخ: 
ویرایشگر فعلی مطالب بلاگفا امکانات محدودی در این زمینه دارد که در قسمت انتشار یا ویرایش مطالب مشخص است، متاسفانه خارج از این چارچوب امکان کشیدن یا تغییر عکس وجود ندارد!
نویسنده: غلامرضا
زمان: ۱۳:۰۲:۳۴ - تاریخ: ۱۳۹۶/۰۹/۱۵
سلام
من از راه ساده شروع کردم من نمی دونم درج تصاویر در سایت یعنی چی؟
لطفا راهنمایی نمایید.
پاسخ: 
لطفا مطلب را مطالعه کنید، تا حد امکان به صورت ساده توضیح داده شده است.
نویسنده: مهدیه
زمان: ۱۶:۲۲:۱۲ - تاریخ: ۱۳۹۶/۱۰/۲۵
سلام تو بلاگ اسکای چطوری میتونم اندازه عکس رو تغییر بدم؟
پاسخ: 
در ویرایشگر ارسال مطلب اگر بر روی تصویر کلیک کنید، معمولا امکان تغییر اندازه آن با کشیدن گوشه های تصویر فراهم می شود.
نویسنده: الهام
زمان: ۱۵:۱۷:۰۲ - تاریخ: ۱۳۹۷/۰۸/۰۴
سلام من مراحل درج تصویر رو انجام دادم ولی تصویر رو تو وبلاگ نصفه نشون میده باید چیکار کنم که کل تصویر رو نشون بده؟؟؟؟؟
پاسخ: 
وبلاگ بررسی شد، مشکلی که مطرح کرده اید مشاهده نشد! در هر صورت عدم نمایش کامل تصویر ممکن است به دلیل بیشتر بودن عرض تصویر نسبت به عرض قالب باشد، در این صورت کافی است در قسمت ویرایشگر ارسال مطلب روی تصویر مورد نظر کلیک کنید و با کشیدن اطراف تصویر به داخل اندازه آن را کاهش داده و با قالب سازگار کنید.
paged صفحه 8 از 8
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




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

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