آموزش ذخیره سازی تصاویر
فرمت تصاویر در طراحی سایت
با پیشرفت تکنولوژی و همگانی شدن اینترنت اکثر کاربران اینترنت به دنبال سایت های با بارگزاری سریع هستند و اگر سایت شما تصاویری با حجم بالا داشته باشد مدت زمان زیادی برای لود سایت صرف می شود و موجب نارضایتی کاربرای می شود. برای بیشتر شدن سرعت لود و رضایت کاربران بهتر است از تصاویر با حجم کم و فرمت مناسب استفاده کنید. در این مطلب ذخیره سازی تصاویر من شما را تو این زمینه راهنمایی می کنم.
انواع فرمت ذخیره سازی تصاویر
فرمت های زیادی برای ذخیره سازی تصاویر از جمله PNG,TIFF.GIF,SVG,HEIC,WebP,JPG وجود دارد که PNG , JPG دو فرمت معروف و اصلی عکس در انواع سیستم عامل ها می باشند اما اگر بیش از حد روی آن ها زوم کنیم کیفیت آن کم می شود و حالت پیکسل پیکسل به خود می گیرد چرا که نوع گرافیک bitmap یا پیکسلی است و نه برداری در گرافیک برداری همه چیز از خطوط و منحنی ها تشکیل می شود. فرمت دیگری از تصویر به نام SVG یا فرمت فکتوری و برداری وجود دارد که با زوم زیاد از کیفیت آن کم نمی شود چرا که با معادله ی خط و منحنی روبه رو هستیم درست مثل بزرگ کردن فونت یا زوم کردن روی خطوط.
شاید برای شما این سوال پیش آمده باشد که تفاوت JPG وPNG در چیست یا اینکه چرا طراحان وب در مواقعی از فرمت JPG و در مواقعی از فرمت PNG استفاده می کنند.
تفاوت فرمت های PNG و JPG
اول باید بدانید که هر دوی این فرمتها برای تصاویر استفاده می شود و در اکثر مواقع برای طراحی سایت اصفهان تفاوت کمی بین استفاده از آن ها می باشد ولی در طراحی سایت تفاوت بسیاری بین استفاده از این دو فرمت است.
فرض کنید میخواهید تصویر یک جوجه را روی چمن در وب سایتتان با فرمت JPG داشته باشید بعد از چند خط کد نویسی و افزودن دو تصویر خروجی به صورت زیر در می آید:
آموزش ذخیره تصاویر
حال همین کار را با فرمتPNG انجام می دهیم و خروجی به صورت زیر در می آید:
فرمت png تصاویر در طراحی سایت
میبینید که در تصویر پایین پس زمینه عکس جوجه شفاف است ولی عکس اول پس زمینه عکس جوجه سفید می باشد. تفاوت این دو فرمت تصویر در طراحی وب دقیقا همین است.
چگونه فایل PNG JPG, , GIF را به پسوند SVG برای ذخیره سازی تصاویر تبدیل کنیم؟
برای انجام این کار می توان از نرم افزار های مختلف تخصصی مانند Adobe Illustrator ,Inkscape photoshop Vectorizer,و نرم افزار draw از آفیس LibreOffice استفاده کرد .همچنین برخی وب اپلیکیشن ها مانند Aconvert نیز به صورت رایگان این کار را انجام می دهند.
برای مثال ما با نرم افزار Aconvert برای ذخیره سازی تصاویر به فایل SVG استفاده می کنیم.
تبدیل انواع فرمت ها به فرمت SVG با استفاده از نرم افزار Aconvert:
ابتدا به آدرس aconvert.com مراجعه کنید در صفحه باز شده روی دکمه ی Add files کلیک کنید و فایل مورد نظر خود را با هر فرمتی انتخاب کنید از منوی بازشو Target format فرمت SVG را انتخاب کنید.
آموزش ذخیره سازی تصاویر
پس از آن گزینه convert now را کلیک کنید.
تبدیل فرمت تصویر طراحی سایت
پس از چند ثانیه نتیجه ی تبدیل فایل در قسمت Conversion Results نمایش داده می شود با کلیک بر روی آن می توان فایل SVG را دانلود کرد.
تبدیل فرمت تصویر
آموزش نرم افزار Aconvert
تبدیل فرمت فایل به SVGدر فتوشاپ
در فتوشاپ چند روش برای ذخیره سازی تصاویر به فرمت SVGوجود دارد که به سه مورد آن اشاره می کنیم.
روش اول برای تبدیل تصویر برای وب:
از منوی file گزینه ی export را کلیک کرده و از زیر منوی باز شده export as…. را انتخاب می کنیم صفحه ای مانند تصویر باز می شود:
ذخیره کردن تصویر در فتوشاپ
از قسمت format می توان چهار نوع فرمت JPG,PNG,SVG,GIF را برای ذخیره سازی تصاویر انتخاب کرد.
در قسمت image size میتوان طول و عرض عکس را تنظیم کرد ودر قسمت scale به صورت درصدی سایز را تغییر داد. تغییر کیفیت عکس با استفاده از متد resampleهم امکانپذیر است.
Canvas size برای مشخص کردن سایز برای تبدیل عکس می باشد.
همچنین تنظیمات فشرده سازی و کپی رایت را هم میتوان انتخاب کرد. در نهایت گزینه یexport all… را کلیک می کنیم.
روش دوم برای تبدیل تصویر برای طراحی سایت:
از منوی file گزینه ی export را کلیک کرده و از زیر منوی باز شده save for web را انتخاب می کنیم صفحه ای مانند تصویر زیر باز می شود:
فرمت تصاویر در طراحی وب
نوع فرمت را از کشوی دوم انتخاب و گزینه هایی همچون پالت رنگ, سایز تصویر , انیمیشن که به ترتیب برای تنظیم تعداد رنگ , سایز تصویر بر اساس pixcell یا درصدی, کنترل و کار برروی تصاویر با فرمتGIF می باشد. ابزارهایی مانند برش, بزرگنمایی, ذخیره رنگ ونمایش رنگ در سمت چپ تصویر می باشد.
روش سوم برای تبدیل تصویر برای سایت:
از منوی file گزینه ی save as را کلیک کرده تنظیماتی مانند مسیر و نام را وارد میکنیم و از قسمت save as type که مانند زیر باز شده فرمت دلخواه را انتخاب میکنیم.
فرمت ذخیره سازی تصاویر طراحی سایت
امیدوارم که این آموزش برای شما کاربردی باشد و بتوانید سایت های با کیفیت خوب و سرعت بالا طراحی کنید.
موفق باشید.
انجام تبلیغات کاندیدای شورای شهر استان اصفهان انجام تبلیغات کاندیدای شورای شهر و کشور توسط یکی از حرفه‌ای‌ترین تیم‌های تبلیغات و دیجیتال مارکتینگ استان اصفهان امکانپذیر می‌باشد. کاندیداهای محترم شورای شهر می توانند جهت دریافت مشاوره تخصصی و همچنین انجام تبلیغات تخصصی با تیم تبلیغات کاندیداهای شورای شهر و کشور تماس حاصل فرمایند. خدمات و تبلیغات گسترده ی تیم دیجیتال مارکتینگ وب یار در این زمینه شامل موارد زیر است: ارسال انبوه پیامک های تخصصی، مهندسی اجتماعی و تبلیغاتی به مشاغل و فعالان کسب کار با هدف جذب و ایجاد قشر حمایت کننده بر اساس منطقه خاص ارسال تبلیغات انبوه تخصصی بدون محاسبه هزینه هر ارسال در واتساپ و ایجاد گروه های حمایتی ومدیریت آنها ارسال تبلیغات کاندیدای شورا به شماره ها و آی دی های گروه های تلگرام و کاربران بر اساس منطقه و شهر و افزون افراد بر اساس منطقه مسکونی و شهر به گروه های حمایتی شما کاندیدای محترم شورای شهر و کشور. طراحی وبسایت سریع و سبک برای کاندیداها با هدف پاسخگویی و پرسنال برندینگ چند جانبه با قابلیت استفاده در عرصه های محتلف شرکتی یا شخصی با قیمت مناسب. بررسی روش های تبلیغاتی و سخنرانی و مشاوره برای مردم و همچنین یادگیری روش های بازخورد گیری از تبلیغات اینترنتی برای انتخابات شوراها وب یار یک تیم متشکل از متخصصین دیجیتال مارکتینگ و بازاریابی که […]
وب سایت یا وب اپلیکیشن کدام یک انتظارات شما را برآورده می کند؟ تفاوت اصلی چیست و کدام یک بهترین راه حل برای تجارت شما خواهد بود؟ در این مقاله وب یار به بررسی تفاوت وب سایت و وب اپلیکیشن می پردازیم. وب سایت چیست؟ وب سایت گروهی از صفحات وب قابل دسترسی جهانی است که به هم پیوسته اند و دارای یک نام دامنه واحد هستند. توسط فردی ، تجاری یا سازمانی قابل توسعه و نگهداری است. یک وب سایت در یک وب سرور منفرد یا چندگانه میزبانی می شود.هدف اصلی آن ارائه اطلاعات به کاربران است. در وب سایت ، ما می توانیم متن و پرونده های مختلف چندرسانه ای ، مانند تصاویر یا فیلم ها را پیدا کنیم. چه زمانی به وب سایت نیاز دارید؟ وب سایت یک روش موثر برای ارائه محصولات و خدمات شما است. این می تواند به شما کمک کند: مشتری جدید پیدا کنید بهبود شناخت برند افزایش فروش و درآمد ارائه اطلاعات مهمی مانند: اطلاعات شرکت ، اطلاعات تماس ، لیست قیمت ، پیشنهادات ویژه و .. وب اپلیکیشن چیست؟ وب اپلیکیشن ، نرم افزار یا برنامه ای است که در مرورگر اجرا می شود و از طریق رابط کاربری سرویس خاصی را به کاربر ارائه می دهد. معمولاً به سرور مرکزی متصل می شود تا محتوا را به کاربر […]
در زمینه طراحی رابط کاربری نرم افزار های مختلفی وجود دارند که قبلا با آن ها آشنا شده اید در ادامه یه چند مورد خواهیم پرداخت. فیگما یکی از نرم افزار های رابط کاربری است که از آن برای طراحی رابط کاربری وب سایت ها و اپلیکیشن ها استفاده می شود.در این مقاله به بررسی همه چیز درباره فیگما می پردازیم. فیگما چیست؟ همان طور که گفته شد فیگما یک نرم افزار برای طراحی رابط کاربری می باشد. این نرم افزار به صورت یک وب اپ می باشد که در بروزر خود اجرا می کنید. بر خلاف تصور عموم یک وب اپ نمی تواند گرافیک یک وب سایت یا اپلیکیشن را به خوبی و با کیفیت عالی ارائه دهد. اما با رفتن به سایت figma و دیدن امکانات این سایت به این باور می رسید که فیگما ، یکی از قدرتمند ترین نرم افزار های طراحی رابط کار بری می باشد. طریقه دسترسی به نرم افزار فیگما: این نرم افزار را هم می توانید به صورت تحت وب باز و مرورگر خود باز کنید. فقز در هر دو صورت باید سیستم شما به اینترنت متصل باشد. ویژگی ها: فیگما یک نرم افزار تحت وب گسترده می باشد که ویژگی های بسیار جذابی دارد.اکنون به چند ویژگی این اپلیکیشن بی نظیر اشاره می کنیم. قابلیت استفاده در همه سیستم […]
اگر قصد راه اندازی فروشگاه آنلاین خود را دارید ، ممکن است به یک دو راهی برخورد کرده باشید: ووکامرس یا پرستاشاپ ؟ هر دو سیستم عامل عالی هستند و هیچ برنده مشخصی وجود ندارد. این انتخاب به ماهیت تجارت آنلاین و قدرت فنی شما بستگی دارد. در این مقاله به مقایسه ووکامرس و پرستاشاپ می پردازیم. ووکامرس چیست؟ ووکامرس یک افزونه تجارت الکترونیکی است که به شما امکان می دهد فروشگاه تجارت الکترونیک را در وب سایت تحت وردپرس راه اندازی کنید. ووکامرس در سال 2011 توسط توسعه دهنده تم WooThemes منتشر شد. بعداً ، در سال 2015 ، توسط Automattic ، شرکت صاحب وردپرس خریداری شد. ووکامرس محبوب ترین پلتفرم تجارت الکترونیکی در جهان است که میلیون ها فروشگاه آنلاین را قدرت می دهد. وردپرس بزرگترین CMS جهان است که بستر مناسبی برای ساخت هر نوع وب سایت است و با چند کلیک می توانید آن را به یک فروشگاه آنلاین زیبا و کاربردی تبدیل کنید. به همین دلیل WooCommerce به عنوان بهترین راه حل تجارت الکترونیکی برای وردپرس در نظر گرفته شده است. هنگام نصب آن ، کلیه ابزارهای لازم برای راه اندازی فروشگاه آنلاین خود را دریافت خواهید کرد. از جمله: گزینه های مختلف حمل و نقل ، محصولات ، سیستم مدیریت سفارش ، گزارش های تجاری و … از آنجا که ووکامرس یک […]
یکی دیگر از مهم ترین کارها برای افزایش سئو و بهبود جایگاه سایت بروزرسانی سایت و محتواهای آن است. برای آنکه بتوانید در میان رقبای خود جایگاه خوبی داشته باشید و کسب و کار اینترنتی موفقی داشته باشید نیاز است که از اهمیت بروزرسانی سایت غافل نشوید. در ادامه چند استراتژی مهم و کاربردی را به شما عزیزان ارائه می کنیم. بروزرسانی سایت به چه معناست؟ منظور از بروزرسانی در واقع تغییر در محتواها، کلمات کلیدی، لینک ها، بروزرسانی سرور و … است. این کار به معنای از نو طراحی کردن نیست در حقیقت شما با توجه به بازخوردی که از سایت و مخاطبین خود دیده اید یک سری تغییرات در راستای بهبود و رشد سایت تان انجام می دهید. استراتژی بروزرسانی سایت وقت آن رسیده که سایت خود را به روز و همگام با رقبای خود جلو ببرید. برای این کار انجام کارهای زیر الزامی و تا حد زیادی کمک کننده است. 1-بررسی گوگل آنالیتیکس با بررسی گوگل آنالیتیکس شما می توانید رفتار کاربران را به راحتی در سایت خود مشاهده کنید. این که چه صفحه ای محبوبیت بیشتری دارد یا این که کدام صفحه نرخ کلیک بالایی دارد و … با بررسی و آنالیز رفتار کاربران می توانید صفحاتی که نیاز به بروزرسانی دارند را نیز به راحتی کشف کنید. 2-حذف محتواهای قدیمی به مرور […]
وردپرس همان طور که میدانید یک سیستم مدیریت محتوا بر پایه زبان برنامه نویسی پی اچ پی می باشد. شغل های گوناگونی در زمینه وردپرس وجود دارند. در این مقاله ما به پنج شغل پردرآمد وردپرس می پردازیم.شغل هایی که قرار است در مورد آن ها به شما توضیح دهیم و شما را با آن ها بیش تر آشنا کنیم عبارت اند از: ساخت قالب وردپرس ساخت افزونه اختصاصی برای وردپرس ترجمه افزونه های وردپرس به فارسی مدیریت سایت های وردپرسی مسئول امنیت وردپرس پنج شغل پردرآمد وردپرس: ساخت قالب وردپرس: یکی از رایج ترین و پر درآمد ترین مشاغل وردپرس ساخت قالب وردپرس می باشد. مراحل ساخت یک قالب طبق مقاله طراحی سایت در اصفهان را برای شما توضیح دادیم. اما کمی بیش تر در مورد آن بخواهیم برای شما توضیح دهیم، بعد از این که بخش ویژوال سایت را تکمیل کردیم، به بخش داینامیک سازی قالب ها میرسیم، در ورد پرس همانطور که گفتیم زبان php استفاده شده است. یک سری توابع به صورت پیشفرض در خود فایل های وردپرس وجود دارند. بخش هایی که می شود را به وسیله توابع آماده، آماده می کنیم. برخی از توابع سفارشی در اصطلاح پست تایپ ها را نیز برای آن ها می نویسیم. در موردپست تایپ ها بیشتر بدانید. پس از این که توابع را پیاده سازی کردید […]