با پیشرفت تکنولوژی و همگانی شدن اینترنت اکثر کاربران اینترنت به دنبال سایت های با بارگزاری سریع هستند و اگر سایت شما تصاویری با حجم بالا داشته باشد مدت زمان زیادی برای لود سایت صرف می شود و موجب نارضایتی کاربرای می شود. برای بیشتر شدن سرعت لود و رضایت کاربران بهتر است از تصاویر با حجم کم و فرمت مناسب استفاده کنید. در این مطلب فرمت تصاویر در طراحی سایت را معرفی می کنیم. با وب یار همراه باشید.
فرمت های زیادی برای ذخیره سازی تصاویر از جمله PNG,TIFF.GIF,SVG,HEIC,WebP,JPG وجود دارد که PNG , JPG دو فرمت معروف و اصلی عکس در انواع سیستم عامل ها می باشند اما اگر بیش از حد روی آن ها زوم کنیم کیفیت آن کم می شود و حالت پیکسل پیکسل به خود می گیرد چرا که نوع گرافیک bitmap یا پیکسلی است و نه برداری در گرافیک برداری همه چیز از خطوط و منحنی ها تشکیل می شود.
فرمت دیگری از تصویر به نام SVG یا فرمت فکتوری و برداری وجود دارد که با زوم زیاد از کیفیت آن کم نمی شود چرا که با معادله ی خط و منحنی روبه رو هستیم درست مثل بزرگ کردن فونت یا زوم کردن روی خطوط.
شاید برای شما این سوال پیش آمده باشد که تفاوت JPG وPNG در چیست یا اینکه چرا طراحان وب در مواقعی از فرمت JPG و در مواقعی از فرمت PNG استفاده می کنند.
اول باید بدانید که هر دوی این فرمتها برای تصاویر استفاده می شود و در اکثر مواقع برای طراحی سایت اصفهان تفاوت کمی بین استفاده از آن ها می باشد ولی در طراحی سایت تفاوت بسیاری بین استفاده از این دو فرمت است.
فرض کنید میخواهید تصویر یک جوجه را روی چمن در وب سایتتان با فرمت JPG داشته باشید بعد از چند خط کد نویسی و افزودن دو تصویر خروجی به صورت زیر در می آید:
حال همین کار را با فرمتPNG انجام می دهیم و خروجی به صورت زیر در می آید:
میبینید که در تصویر پایین پس زمینه عکس جوجه شفاف است ولی عکس اول پس زمینه عکس جوجه سفید می باشد. تفاوت این دو فرمت تصویر در طراحی وب دقیقا همین است.
برای انجام این کار می توان از نرم افزار های مختلف تخصصی مانند Adobe Illustrator ,Inkscape photoshop Vectorizer,و نرم افزار draw از آفیس LibreOffice استفاده کرد .همچنین برخی وب اپلیکیشن ها مانند Aconvert نیز به صورت رایگان این کار را انجام می دهند.
برای مثال ما با نرم افزار Aconvert برای ذخیره سازی تصاویر به فایل SVG استفاده می کنیم.
ابتدا به آدرس aconvert.com مراجعه کنید در صفحه باز شده روی دکمه ی Add files کلیک کنید و فایل مورد نظر خود را با هر فرمتی انتخاب کنید از منوی بازشو Target format فرمت SVG را انتخاب کنید.
پس از آن گزینه convert now را کلیک کنید.
پس از چند ثانیه نتیجه ی تبدیل فایل در قسمت Conversion Results نمایش داده می شود با کلیک بر روی آن می توان فایل 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 که مانند زیر باز شده فرمت دلخواه را انتخاب میکنیم.
امیدوارم که این آموزش تبدیل فرمت تصاویر در طراحی سایت برای شما کاربردی باشد و بتوانید سایت های با کیفیت خوب و سرعت بالا طراحی کنید. در آموزش بهینه سازی تصاویر وردپرس می توانید بهبود تصاویر را برای بهبود سئوی سایت بیاموزید.
چرا دانش برنامه نویسی برای هک و امنیت اهمیت دارد؟چه زبانی را برای شروع باید انتخاب کنیم؟ هک واژه ای است که این روز ها برای همه افراد ، به خصوص افرادی که در حوزه IT و فناوری اطلاعات فعالیت می کنند بسیار جالب و هیجان انگیز است. به یک هکر یک اسباب بازی جدید بده، اولین کاری که می کنه جدا کردن قطعاتش و…
این روزها ، داشتن یک صفحه اینستاگرام پر بازدید، آرزوی خیلی‌هاست. در دنیای امروز رسانه‌های اجتماعی به یکی از ابزارهای قدرتمند و پرطرفدار تبدیل شده‌اند و هر روز به میزان محبوبیت آن‌ها افزوده می‌شود. در کشور ما، رسانه اجتماعی اینستاگرام محبوبیت بسیار زیادی دارد و بخش قابل توجهی از ایرانیان در گروه‌های سنی مختلف زمان زیادی را به حضور در این رسانه اختصاص می‌دهند. در…
“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…