شنبه ۱۱ آذر ۱۴۰۲

Saturday, December 2, 2023 GMT +3:30

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

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



 refresh
10 × 10
2 × 5
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
معراج
سلام من در قدیم‌ سیستم‌ مدیریت محتوا استفاده میکردن که وقتی متغیر بدون محتوا ایجاد میکردی ارور نمیداد و‌ نیازی هم به @ قبلش...
۱۴۰۲/۰۹/۰۸

ابوالفضل
سلام استاد وقتتون بخیر مثل همیشه من با یک مشکل بزرگ مواجه شدم و مجدد مزاحمتون میشم من به یک regex نیاز دارم تا...
۱۴۰۲/۰۹/۰۶

بهاره هوشمندی
استاد ببخشید وقتی یه متن طولانی رو باهاش چک می کنم اگه تگ span و b داشته باشه چون تگ رو نمی بنده تا...
۱۴۰۲/۰۹/۰۲

بهاره هوشمندی
با سلام استاد بزرگوار از لطف و محبت شما بسیار ممنون و سپاسگزارم خیلی عالی بود اینطوری خیلی خوب شد دستتون درد نکنه...
۱۴۰۲/۰۹/۰۱

بهاره هوشمندی
با سلام و از شما من این کد رو امتحان کردم واسه متن عادی خوبه و جواب میده ولی واسه متن طولانی که رنگ...
۱۴۰۲/۰۹/۰۱

بهاره هوشمندی
با سلام و خسته نباشید استاد بزرگوار آیا راهی وجود داره تفاوت دو تا متن رو با php پیدا کرد؟ مثلا با...
۱۴۰۲/۰۸/۳۰

مهراد
سلام در جدول موقعی که عکس رو با php فراخوانی میکنم نمیاره تصویر عکس. لطفا راهنمایی کنید.
۱۴۰۲/۰۸/۱۷

بهاره هوشمندی
با سلام و درود استاد بزرگوار یه مشکل برام پیش اومده توی مطالب ارسالی سایت محتوایی به این صورت به متن ها اضافه شده...
۱۴۰۲/۰۸/۱۷

بهاره هوشمندی
با تشکر از شما استاد گرامی پس کد رو باید اینطوری وارد کنم؟ اینطوری واسه من کار می کنه سپاسگزارم از شما...
۱۴۰۲/۰۸/۰۹

بهاره هوشمندی
با سلام از لطف و محبت شما بسیار ممنون و سپاسگزارم دست شما درد نکنه لینکهای شما رو بررسی کردم یعنی باید کل کدهایی...
۱۴۰۲/۰۸/۰۸

بهاره هوشمندی
با سلام و تشکر از شما من توی یه صفحه خالی هم امتحان کردم و یه amar.html هم توی پوشه root هاست ساختم بازم...
۱۴۰۲/۰۸/۰۸

بهاره هوشمندی
با سلام با تشکر از شما من کاری که گفتید رو انجام دادم ولی بازم صفحه لاگین رو که میزنم باز آمارگیر اونو...
۱۴۰۲/۰۸/۰۸

بهاره هوشمندی
سلام خسته نباشید من یه کد واسه آمارگیر دارم که جاو هست از سایت وبگذر بعد توی همه صفحه ها فعاله چطوری می تونم...
۱۴۰۲/۰۸/۰۷

hossein
سلام وقت شما بخیر کدی هست که بشود با کمک اون، به محض حذف محصول توسط فروشندگان (افزونه دکان)، تصاویر محصول نیز حذف شوند...
۱۴۰۲/۰۷/۲۵

امیر علی برغمدی
آقا متچکرم ممنونم
۱۴۰۲/۰۷/۱۶

hossein
سلام وقت شما بخیر ممنون میشم اگه راهنماییم کنید میخوام کدی در اختیارم بزارید که بتونه برام سقف درصد مدیر را تعیین کنه توی...
۱۴۰۲/۰۷/۱۴
  در انتظار بررسی: ۲
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.