learn

تغییر اندازه تصاویر برای سایت با حفظ خوانایی و تناسب

راهنمای تغییر ابعاد تصویر بدون کشیدگی، با مثال عملی و توضیح محدودیت حفظ کیفیت.

تغییر اندازه تصاویر باید با توجه به محل نمایش و خوانایی انجام شود. کوچک کردن تصویر تعداد پیکسل‌ها را کاهش می‌دهد؛ بزرگ کردن آن نیز جزئیات واقعی ازدست‌رفته را بازنمی‌گرداند. هدف عملی، خروجی مناسب سایت با کمترین افت محسوس است، نه وعدهٔ حفظ کامل اطلاعات در هر اندازه.

پیش از تغییر اندازه تصاویر

ابتدا عرض و ارتفاع پیکسلی فایل و اندازهٔ نمایش در صفحه را مشخص کنید. برای یک کارت مقاله، تصویر بسیار بزرگ ممکن است هزینهٔ انتقال اضافه ایجاد کند. در مقابل، اسکرین‌شات آموزشی باید آن‌قدر واضح باشد که کاربر نام گزینه و مقدار تنظیم را بخواند.

عدد PPI بیشتر به رابطهٔ پیکسل و اندازهٔ فیزیکی مربوط است. تغییر آن به‌تنهایی، وقتی تعداد پیکسل‌ها ثابت می‌ماند، راه عمومی کاهش حجم تصویر وب نیست. عرض و ارتفاع، فرمت و تنظیم فشرده‌سازی را جدا بررسی کنید.

نسبت ابعاد را حفظ کنید

در ابزار ویرایش، گزینهٔ حفظ نسبت عرض به ارتفاع را فعال نگه دارید. برای نمونه، تصویر فرضی ۱۲۰۰×۸۰۰ با عرض ۶۰۰، ارتفاع ۴۰۰ خواهد داشت. مجبور کردن همین تصویر به ۶۰۰×۶۰۰ می‌تواند آن را کشیده کند؛ برای مربع باید برش مناسب یا فضای حاشیه انتخاب شود.

نمایش اندازه‌های متفاوت تصویر با توجه به نسبت عرض و ارتفاع

نمونهٔ عملی با ImageMagick

در محیطی که ImageMagick نسخهٔ ۷ نصب است، دستور زیر یک خروجی جدا ایجاد می‌کند. نام input.jpg را با فایل واقعی جایگزین کنید؛ نام خروجی را متفاوت نگه دارید تا اصل تصویر باقی بماند.

magick input.jpg -resize "700x400>" output.jpg

طبق مرجع اندازه‌ها در ImageMagick، این دستور تصویر را با حفظ نسبت در محدودهٔ ۷۰۰×۴۰۰ جا می‌دهد و علامت > جلوی بزرگ کردن تصویر کوچک‌تر را می‌گیرد. نتیجه لزوماً دقیقاً ۷۰۰×۴۰۰ نیست؛ برای تصویر ۱۲۰۰×۸۰۰، خروجی ۶۰۰×۴۰۰ خواهد بود.

قرار دادن عبارت اندازه داخل کوتیشن از تفسیر علامت بزرگ‌تر به‌عنوان هدایت خروجی توسط پوسته جلوگیری می‌کند. استفاده از علامت ! نسبت ابعاد را نادیده می‌گیرد و برای عکس معمولی انتخاب مناسبی نیست. دستور قدیمی convert را نیز با ابزارهای هم‌نام سیستم‌عامل اشتباه نگیرید.

فرمت خروجی و کیفیت

PNG بدون اتلاف است، اما ذخیرهٔ تصویر کوچک‌شده با این فرمت، پیکسل‌های حذف‌شده هنگام تغییر اندازه را برنمی‌گرداند. برای عکس، خروجی JPEG یا WebP مناسب را مقایسه کنید؛ برای اسکرین‌شات متن‌دار، لبهٔ نوشته‌ها و خطوط اهمیت بیشتری دارد. راهنمای فرمت‌ها به انتخاب بر اساس کاربرد کمک می‌کند.

همیشه از نسخهٔ اصلی خروجی بگیرید. کوچک و بزرگ کردن مکرر یا ذخیرهٔ چندباره با فشرده‌سازی با اتلاف می‌تواند کیفیت را بدتر کند. ابزارهای افزایش اندازه با هوش مصنوعی ممکن است جزئیات تازه بسازند؛ برای اعداد، دستورات و تصویر مستند پنل، نتیجه را مدرک دقیق فرض نکنید.

بررسی نهایی در صفحه

  • تصویر کشیده یا بریدهٔ نامناسب نباشد.
  • متن آموزش در موبایل قابل خواندن بماند.
  • نسخهٔ بندانگشتی و تصویر کامل هر دو درست باز شوند.
  • حجم با کاربرد تصویر متناسب باشد، نه یک سقف ثابت برای همه.

ابعاد مناسب را از طراحی واقعی سایت به دست آورید؛ عرض یا حجم واحدی وجود ندارد که برای همهٔ تصاویر بهترین باشد.

مطالعهٔ مرتبط

بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.

مطالب مرتبط

ارسال نظر

فهرست مطالب