این کاری است که برای کسانی که در وب کار میکنند به طور مرتب پیش می‌آید، زیرا حین طراحی وب‌سایت‌ها، و تولید محتوا استفاده میشود. ممکن است با یک اینفوگرافیک شروع کنیم که نیاز دارد به چندین پلتفرم و نماهای مختلف تقسیم یا تغییر اندازه داده شود. کاری که به نظر ساده می‌آید می‌تواند با تار شدن متن‌ها و یا چهره‌ها باعث تداخل بخش‌های مهم طراحی شود.
این یک مهارت کوچک اما برای کسانی که در زمینه فعالیت میکنند مهم است که باید آن را تسلط یابید زیرا تصاویر برای ایجاد محتوای دیجیتال اساسی هستند. چه در حال ایجاد یک وب‌سایت باشید، چه در حال انتشار یک پست وبلاگ یا پست در شبکه‌های اجتماعی، استفاده از تصاویر با کیفیت بالا ضروری است. اما وقتی یک تصویر به درستی برای یک مورد خاص اندازه نشده باشد، چه باید کرد؟
در این پست، پنج روش ساده و سریع برای تغییر اندازه هر تصویری بدون از دست دادن کیفیت را به شما معرفی می‌کنم.
چرا تصاویر تغییر اندازه داده شده کیفیت خود را از دست می‌دهند؟
برای تغییر اندازه تصویر، دو روش رایج وجود دارد: تغییر اندازه با بازنمونه‌گیری و تغییر اندازه با مقیاس‌بندی.
تغییر اندازه با بازنمونه‌گیری شامل افزودن یا حذف پیکسل‌ها از تصویر است که منجر به تغییر در تعداد کل پیکسل‌ها میشود. این فرآیند می‌تواند باعث از دست دادن کیفیت شود زیرا نرم‌افزار باید پیکسل‌های جدیدی بر اساس پیکسل‌های اطراف حدس بزند و ایجاد کند. این می‌تواند منجر به تاری یا پیکسلی شدن شود، به ویژه اگر تصویر به طور قابل توجهی کوچک شود.
اما تغییر اندازه با مقیاس‌بندی، از سوی دیگر تعداد کل پیکسل‌ها را حفظ می‌کند اما اندازه تصویر را با تغییر تعداد پیکسل‌ها در هر اینچ (PPI) تنظیم می‌کند. در حالی که این روش به طور کلی کیفیت تصویر را بهتر از بازنمونه‌گیری حفظ می‌کند، همچنان می‌تواند منجر به از دست دادن جزئیات شود، به ویژه اگر تصویر بزرگ شود.
چرا مهم است که تصاویر را بدون از دست دادن کیفیت تغییر اندازه دهید؟
تغییر اندازه صحیح تصاویر، اندازه فایل تصویر را کاهش می‌دهد و در نتیجه، زمان بارگذاری محتوای وب‌سایت شما را کاهش می‌دهد. بنابراین، این فقط یک سوال از تصاویر با کیفیت نیست، تصاویر با اندازه نادرست می‌توانند بر عملکرد و تجربه کاربری وب‌سایت شما تأثیر بگذارند.
تصاویر با وضوح بالا و اندازه بزرگ ممکن است در سایت خوب به نظر برسند، اما حجم فایل‌های آن‌ها بزرگ است. بطوری که مرورگرها به زمان بیشتری برای بارگذاری آن‌ها نیاز خواهند داشت که این کار زمان بارگذاری کلی وب‌سایت شما را افزایش می‌دهد. مطالعات نشان داده که سرعت بارگذاری تأثیر زیادی بر نرخ تبدیل‌ها دارد؛ و به مراتب سایت هایی که سرعت لود مناسبی دارند دارای نرخ تبدیل بهتری هستند تا سایت هایی که لود خوبی ندارند.
اما این به معنایی نیست که تصاویر با کیفیت بالا مهم نیستند. تصور کنید دو فروشگاه آنلاین یک جفت کفش را می‌فروشند، اما یکی از آن‌ها عکس‌های محصول تار دارد در حالی که دیگری عکس‌های واضح و شفاف دارد. از کدام فروشگاه احتمال بیشتری دارد که خرید کنید؟
احتمالاً فروشگاه دوم. دلیلش این است که علاوه بر نشان دادن صحیح محصول، داشتن تصاویر خوب در یک صفحه، حرفه‌ای بودن را نشان می‌دهد. برعکس، تصاویر نامرتب جلوه و وجهه خوبی ندارد. خریدار فکر می‌کند، "اگر نمی‌توانند تصاویر را درست کنند، آیا می‌توانم به آن‌ها اعتماد کنم که محصولات را درست کنند؟"
این اتفاق زمانی می‌افتد که یک تصویر را تغییر اندازه دهید و کیفیت را قربانی کنید. مطمئناً، تصویر در بنر یا پست شما جا می‌گیرد، اما به چه قیمتی؟ برخی از این نکات ممکن است کاملا بدیهی و از قبل اثبات شده باشد، اما شما شگفت‌زده خواهید شد که چه میزان از توسعه‌دهندگان وب و کاربران اینرنتی به آن توجه نمیکنند.
بهترین روش‌ها برای تغییر اندازه تصویر بدون از دست دادن کیفیت
در اینجا چند نکته از بهترین روش‌ها برای تغییر اندازه یک تصویر در حالی که کمترین کاهش کیفیت را داشته باشیم، آورده شده است:
- استفاده از تصاویر با وضوح بالا
در صورت امکان، همیشه با یک تصویر با وضوح بالا که جزئیات بیشتری را ارائه می‌دهد و امکان تغییر اندازه با انعطاف‌پذیری بیشتر و بدون کاهش کیفیت قابل توجه را فراهم می‌کند، شروع کنیم. تصاویر با وضوح بالاتر پیکسل‌های بیشتری دارند، بطوری که انعطاف پذیری بیشتری برای کار در فرآیند تغییر اندازه وجود دارند.
- تغییر اندازه تدریجی
برای جلوگیری از تغییرات ناگهانی، معمولاً تصویر را به تدریج و به صورت گام به گام تغییر اندازه بدهیم تا اینکه به طور ناگهانی تغییر اندازه زیادی انجام شود. این روش کمک می‌کند کیفیت تصویر را حفظ کرده و احتمال ایجاد اشکالات قابل مشاهده را به حداقل برسانیم.
- حفظ نسبت ابعاد اصلی
در هنگام تغییر اندازه، معمولاً نسبت ابعاد اصلی تصویر را حفظ کنیم. این روش باعث میشود اطمینان حاصل کنیم که تناسب‌ها حفظ می‌شوند و از تحریف جلوگیری شود. کشیدن یا فشردن یک تصویر به طور نامتناسب می‌تواند منجر به کاهش قابل مشاهده کیفیت شود.
- استفاده از افزونه‌های وردپرس
هنگام استفاده از وردپرس، اغلب فرآیند تغییر اندازه تصویر را با استفاده از یک افزونه ساده کنیم. این افزونه‌ها کیفیت تصویر را با استفاده از الگوریتم‌های پیشرفته حفظ کرده و گزینه‌هایی برای بهینه‌سازی خودکار ارائه می‌دهند، اندازه فایل‌ها را بدون از دست دادن کیفیت کاهش می‌دهند. آن‌ها همچنین از طراحی ریسپانسیو با تولید تصاویر با اندازه مناسب برای سایز های مختلف صفحه نمایش پشتیبانی میکنند.
این ویژگی به خصوص در برخی از پروژه‌های بهینه‌سازی موتور جستجو (SEO) که نیاز به بهینه‌سازی سریع عملکرد یک وب‌سایت بزرگ دارد، مفید است. برخی از افزونه‌های محبوب در این زمینه شامل Smush، Optimus و EWWW Image Optimizer هستند.
- استفاده از ابزارهای خط فرمان
اگر با ابزارهای خط فرمان تجربه دارید، مانند ImageMagick، از آن‌ها برای تغییر اندازه تصاویر استفاده کنید. چیزی که در مورد این ابزارها جالب است، این است که امکان پردازش دسته‌ای را فراهم میکنند و حتی به شما اجازه می‌دهند اسکریپت‌هایی برای خودکار کردن تغییر اندازه تصاویر ایجاد کنید که می‌تواند زمان زیادی را صرفه‌جویی کند.
برای تغییر اندازه یک تصویر با استفاده از ImageMagick، از فرمان “convert” با گزینه “-resize” استفاده می‌کنم.
برای مثال، فرمان “ convert input.jpg -resize 700x400 output.jpg ” تصویر ورودی را به عرض 700 پیکسل و ارتفاع 400 پیکسل تغییر اندازه می‌دهد و آن را به عنوان output.jpg ذخیره می‌کند.
بزرگ‌نمایی و کوچک‌نمایی تصاویر
بزرگ‌نمایی و کوچک‌نمایی دو فرآیند مختلف برای تغییر وضوح یا اندازه تصویر هستند.
بزرگ‌نمایی شامل افزایش اندازه یا وضوح تصویر است. این کار معمولاً نیاز به افزودن پیکسل‌های جدید به تصویر اصلی دارد، اغلب از طریق الگوریتم‌ها انجام میشود، و منجر به یک تصویر بزرگتر با جزئیات بیشتر احتمالی میشود، هرچند جزئیات اضافه شده فقط یک تخمین بر اساس پیکسل‌های موجود است. بزرگ‌نمایی در واقع اطلاعات جدید ایجاد نمی‌کند یا کیفیت را فراتر از وضوح اصلی بهبود نمی‌بخشد.
کوچک‌نمایی، از سوی دیگر، فرآیند کاهش اندازه یا وضوح یک تصویر است. این عمل شامل حذف پیکسل‌ها با میانگین‌گیری یا نمونه‌برداری از پیکسل‌های مجاور تصویر اصلی است. کوچک‌نمایی به منظور کاهش اندازه فایل و به طور بالقوه ساده‌سازی تصویر با حذف جزئیات غیرضروری انجام میشود. با این حال، کوچک‌نمایی می‌تواند منجر به از دست دادن جزئیات دقیق و نرمی شود، زیرا برخی اطلاعات حذف می‌شوند.
هر دو روش بزرگ‌نمایی و کوچک‌نمایی بسته به استفاده خاص خود کاربرد دارند. بزرگ‌نمایی ممکن است برای افزایش اندازه چاپ یک تصویر یا آماده‌سازی آن برای نمایشگرهای با وضوح بالا استفاده شود. کوچک‌نمایی ممکن است برای بهینه‌سازی اندازه فایل تصاویر برای استفاده وب یا ایمیل، کاهش زمان بارگذاری استفاده شود.
توصیه هایی جهت تغییر اندازه یک تصویر بدون از دست دادن کیفیت
در اینجا چند توصیه بیشتر برای تغییر اندازه تصاویر آورده شده است:
- به ابعاد هنگام کاهش اندازه پیکسل‌های تصویر توجه کنید
هیچ عرض یا ارتفاع استانداردی وجود ندارد که باید هنگام تغییر اندازه پیکسل‌های تصویر خود هدف بگیرید. این کار به عوامل مختلفی بستگی دارد، از جمله جایی که آن‌ها را در یک وب‌سایت قرار می‌دهم، اینکه آیا اکثر بازدیدکنندگان سایت از دسکتاپ یا موبایل استفاده میکنند و غیره. معمولا بین 600 تا 1200 پیکسل برای بیشتر تصاویر وب مناسب است و همچنان کیفیت را حفظ می‌کند.
- فشرده‌سازی تصاویر وب به 100 کیلوبایت
یک قانون کلی این است که باید بین کمترین اندازه فایل و کیفیت قابل قبول تعادل برقرار کنید. به طور کلی، اندازه فایل تصویری 100 کیلوبایت یا کمتر برای تصاویری که در وب‌سایت شما قرار می‌گیرند، قابل قبول است. مقداری از دست دادن کیفیت رخ خواهد داد، اما اگر به درستی انجام شود، قابل توجه نخواهد بود.
- استفاده از نوع فایل تصویری مناسب
ممکن است فکر کنید که فرمت فایل که تصویر شما در آن ذخیره میشود مهم نیست. با این حال، نوع فایل شما بر کیفیت تصویرتان هنگام تغییر اندازه آن تأثیر دارد.
معمولاً برای لوگوها یا نماهای گرافیکی از PNG استفاده میشود، در حالی که تصاویر و گرافیک‌های بزرگتر در قالب JPEG بهتر هستند. دلیلش این است:
JPEGها معمولاً تصاویر با کیفیت و جزئیات بالا را ذخیره میکنند. هنگامی که فشرده می‌شوند، به راحتی به اشتراک گذاشته می‌شوند، با این حال، به دلیل فرآیند فشرده‌سازی، برخی از داده‌های تصویر به هنگام کوچک شدن حذف می‌شوند. هر چقدر بیشتر از آن استفاده کنید، کیفیت تصویرتان به مرور زمان به دلیل از دست دادن داده‌ها به خطر می‌افتد.
از سوی دیگر، PNGها برای این نوع تغییر اندازه طراحی شده‌اند. PNGها هیچ داده‌ای را به هنگام تغییر اندازه از دست نمی‌دهند، بنابراین تصویر تحریف یا تار نمی‌شود. این امر آن‌ها را برای لوگوها و تصاویری که دارای نوشته زیاد یا اشکال و کاراکترهای کوچک هستند، ایده‌آل می‌کند. به هنگام تغییر اندازه، این گرافیک‌ها برای مخاطبان شما قابل خواندن باقی خواهند ماند.
چه صاحب سایت باشید، چه بازاریاب رسانه های اجتماعی یا وبلاگ نویس، تغییر اندازه تصاویر به راحتی می تواند در لیست کارهای سخت به نظر برسد. بنابراین، هنگام تغییر اندازه تصاویر نکات گفته را شده نادیده نگیرید. امیدواریم که این آموزش به شما کمک کرده باشد. برای دیدن باقی آموزش ها میتوانید وارد منوی پشتیبانی بخش آموزش ها شوید، در صورتی که درباره این آموزش به مشکل یا سوالی برخورد کردید، میتوانید آن را در بخش دیدگاه بیان کنید.
