تغییر اندازهٔ یک تصویر
اندازهٔ یک PNG، JPEG، WebP یا GIF را به یک کادر، یک عرض، یک ارتفاع، یک درصد یا یک اندازهٔ دقیق تغییر میدهد و آن را بهصورت PNG یا JPEG مینویسد. رمزگشایی، بازنمونهبرداری و رمزگذاری همه در همین تب مرورگر انجام میشود.
PNG، JPEG، WebP یا GIF. فایل در همین تب خوانده میشود و سروری برای فرستادن آن وجود ندارد.
چگونگی کار
این چه کاری انجام میدهد
یک تصویر را کوچکتر میکند — یا اگر اصرار دارید، بزرگتر — بدون اینکه از رایانهٔ شما خارج شود. اندازه، فرمت و کیفیت JPEG همه به انتخاب شماست، و نسبت ابعاد حفظ میشود مگر اینکه صریحاً بخواهید نشود.
تغییر اندازه به نظر میرسد باید یک خط حساب باشد، و حساب آن در واقع یک خط است. بخشهایی که خراب میشوند جای دیگریاند: وقتی عکسی چرخش EXIF دارد چه ابعادی را محاسبه کنیم، چگونه ده برابر کوچک کنیم بدون اینکه بازنمونهبردار مرورگر جزئیات را محو کند، وقتی فرمت خروجی شفافیت ندارد با شفافیت چه کنیم، و فایل را چه بنامیم تا نتواند تنها نسخهای را که هنوز پیکسلها در آن است بازنویسی کند.
روش
هر دو ضلع در یک ضریب ضرب میشوند. محاسبهٔ جداگانهٔ عرض و ارتفاع، و گرد کردن هر یک، همان راهی است که یک عکس ۳:۲ را به ۱٫۴۹۹۹:۱ میرساند — روی صفحه نامحسوس، و به محض اینکه کنار عکس دیگری قرار گیرد فوراً دیده میشود. در حالت کادر این ضریب کوچکترِ دو حدی است که کادر اجازه میدهد، تا تصویر به جای سرریز از یک لبه، درون آن جا شود. فقط حالت اندازهٔ دقیق از دو ضریب استفاده میکند، و این کار را میکند چون به آن گفته شده است.
کاهش به صورت مرحلهای انجام میشود. drawImage مرورگر با یک کرنل کوچک بازنمونهبرداری میکند، بنابراین اگر از آن بخواهیم در یک مرحله از عرض ۴۰۰۰ پیکسل به ۴۰۰ برود، از هر ده پیکسل ورودی فقط حدود یکی را میخواند و نُه تای دیگر را دور میریزد: جزئیات ریز به آلیاسینگ تبدیل میشود و متن سوسو میزند. نصف کردن پیاپی یعنی هر پیکسل خروجی میانگین دقیقاً چهار پیکسل ورودی است، که همان کاری است که یک فیلتر باکس درستوحسابی میکند. نردبان تا وقتی متوقف میشود که هر دو ضلع هنوز بیش از دو برابر هدف باشند، بنابراین آخرین رسم همیشه کاهشی کمتر از ۲ برابر است — اندازهای که یک کرنل کوچک درست از پسش برمیآید.
جهت EXIF به جای اینکه به موتور واگذار شود صریحاً درخواست میشود. یک گوشی تصویر افقی حسگر را بهعلاوهٔ برچسبی مینویسد که میگوید «این را یکربع بچرخان»، و اینکه رمزگشا بهطور پیشفرض آن برچسب را رعایت میکند یا نه، در طول عمر مشخصات فنی تغییر کرده و هنوز بین موتورها متفاوت است. بیان صریح آن یعنی یک عکس عمودی در هر مرورگری ۳۰۰۰ در ۴۰۰۰ است، نه در یکی از آنها ۴۰۰۰ در ۳۰۰۰ و در خروجی لهشده.
اندازه و فرمت پیش از رمزگشایی هر چیزی از سرآیند خود فایل خوانده میشوند. این همان چیزی است که اجازه میدهد یک پانورامای ۳۰۰ مگاپیکسلی با یک جمله رد شود، نه با تمام شدن حافظهٔ تب در نیمهٔ راه، و به همین دلیل است که پیام یک HEIC به جای «فایل پشتیبانینشده»، HEIC میگوید.
پیش از ادامهٔ مطلب
یک عکس ۴۰۰۰ در ۳۰۰۰ درون یک کادر ۱۲۰۰ در ۱۲۰۰ جا داده میشود. در واقع چند بار رسم میشود؟
دو بار — به ۲۰۰۰ در ۱۵۰۰ نصف میشود، سپس یک رسم نهایی ۱٫۶۷ برابری به ۱۲۰۰ در ۹۰۰. drawImage مرورگر با یک کرنل کوچک بازنمونهبرداری میکند، بنابراین اگر از آن بخواهیم در یک مرحله از عرض ۴۰۰۰ به ۴۰۰ برود، از هر ده پیکسل ورودی فقط حدود یکی را میخواند و نُه تای دیگر را دور میریزد: جزئیات ریز به آلیاسینگ تبدیل میشود و متن سوسو میزند. نصف کردن یعنی هر پیکسل خروجی میانگین دقیقاً چهار پیکسل ورودی است، که همان کاری است که یک فیلتر باکس درستوحسابی میکند، و متوقف کردن نردبان در حالی که هر دو ضلع هنوز بیش از دو برابر هدفاند آخرین رسم را زیر ۲ برابر نگه میدارد — اندازهای که یک کرنل کوچک درست از پسش برمیآید.
factor = min(1200 / 4000, 1200 / 3000)کادر دو حد میدهد. هر دو ضلع در یکی از آنها ضرب میشوند، هرگز هر یک در حد خودش.
= min(0.30, 0.40) = 0.30کوچکترِ این دو، تا تصویر به جای سرریز از یک لبه درون کادر جا شود. اینجا حد ارتفاع هرگز محدودکننده نمیشود، چون عرض عکس از ارتفاعش بیشتر است.
width = round(4000 x 0.30) = 1200محاسبهٔ جداگانهٔ عرض و ارتفاع، و گرد کردن هر یک، همان راهی است که یک عکس ۳:۲ را به ۱٫۴۹۹۹:۱ میرساند.
height = round(3000 x 0.30) = 900بهتنهایی نامحسوس است، و به محض اینکه کنار عکس دیگری قرار گیرد فوراً دیده میشود.
یک مثال کارشده
یک عکس ۴۰۰۰ در ۳۰۰۰، جادادهشده درون یک کادر ۱۲۰۰ در ۱۲۰۰، با بقیهٔ تنظیمات در حالت پیشفرض:
factor = min(1200 / 4000, 1200 / 3000)
= min(0.30, 0.40)
= 0.30
width = round(4000 x 0.30) = 1200
height = round(3000 x 0.30) = 900
حد ارتفاع هرگز محدودکننده نمیشود، چون عرض عکس از ارتفاعش بیشتر است. به جای یک مرحله، در دو مرحله رسم میشود:
| مرحله | اندازه | کاهش نسبت به مرحلهٔ قبل |
|---|---|---|
| رمزگشاییشده | ۴٬۰۰۰ × ۳٬۰۰۰ | — |
| نصفشده | ۲٬۰۰۰ × ۱٬۵۰۰ | ۲٫۰۰ برابر |
| نهایی | ۱٬۲۰۰ × ۹۰۰ | ۱٫۶۷ برابر |
و به نام photo-1200x900.png ارائه میشود. همین ارقام دقیق — دو مرحله، اندازهٔ نهایی و نام فایل — در فایل آزمون این ابزار تثبیت شدهاند، بنابراین اگر روزی فرمول بدون همراهشدن این صفحه تغییر کند، ساخت شکست میخورد.
عمداً هیچ اندازهٔ فایلی در اینجا منتشر نشده است. بایتهایی که بیرون میآیند به رمزگذارهای PNG و JPEG مرورگر بستگی دارند، که بین موتورها و بین نسخهها متفاوتاند، و عددی که در این صفحه نقل شود برای اکثر خوانندگان اشتباه خواهد بود.
کاری که انجام نمیدهد
برش نمیزند، نمیچرخاند و حاشیه اضافه نمیکند. هر حالت کل تصویر را مقیاس میکند؛ حالت اندازهٔ دقیق نسبت ابعاد را با کشیدن تغییر میدهد، نه با بریدن چیزی. اندازهٔ فایل را هدف نمیگیرد — شما پیکسلها و کیفیت JPEG را انتخاب میکنید، و بایتها هر چیزی است که رمزگذار تولید کند. PNG، JPEG، WebP و GIF را میخواند و PNG و JPEG مینویسد، که HEIC، AVIF، TIFF، SVG و فرمتهای خام دوربین را شامل نمیشود. هر بار یک فایل میگیرد. و از هر چیز متحرکی فقط فریم اول را نگه میدارد.
همچنین فرمت را برایتان عوض نمیکند. تبدیل PNG به JPEG تصمیمی جداگانه با بدهبستان خاص خودش است، و انجام آن پس از تغییر اندازه ترتیبی است که فایل کوچکتر را تولید میکند.
مراحل انجام کار
- اولین بایتهای فایل انتخابشده را بخوان و فقط از روی همانها تشخیص بده که PNG است یا JPEG، WebP یا GIF، و ادعا میکند چند پیکسل دارد. نوع اعلامشدهٔ فایل بررسی نمیشود، چون Safari یک HEIC را بدون هیچ نوعی گزارش میکند.
- هر چیزی بالاتر از ۸۰ مگاپیکسل را همینجا، پیش از تخصیص حتی یک بایت، رد کن. یک تصویر رمزگشاییشده، فارغ از حجم فایل، به ازای هر پیکسل چهار بایت جا میگیرد، بنابراین یک پانورامای ۱۰۰ مگاپیکسلی ۴۰۰ مگابایت حافظه است که یک تب مرورگر ندارد.
- تصویر را با رمزگشای خود مرورگر رمزگشایی کن و صریحاً بخواه که جهت EXIF اعمال شود، تا عکسی که عمودی گرفته شده همانطور که دیده میشود اندازهگیری شود، نه آنطور که حسگر ثبتش کرده است.
- یک ضریب مقیاس را از ابعاد رمزگشاییشده محاسبه کن و هر دو ضلع را در آن ضرب کن، و هر یک را به یک پیکسل کامل گرد کن. فقط حالت اندازهٔ دقیق از دو ضریب استفاده میکند، و آن هم فقط چون به آن گفته شده نسبت ابعاد را نادیده بگیرد.
- تصویر را پیاپی نصف کن تا جایی که یک نصفکردن دیگر از هدف رد شود، سپس آخرین مرحله را مستقیماً به اندازهٔ هدف رسم کن. مرورگر با یک کرنل کوچک بازنمونهبرداری میکند، بنابراین یک کاهش ۱۰ برابری در یک مرحله از هر ده پیکسل فقط حدود یکی را نمونه میگیرد و بقیه را دور میریزد.
- وقتی خروجی JPEG است، ابتدا بوم را با رنگ پسزمینه (مت) پر کن، چون JPEG کانال آلفا ندارد و یک پیکسل شفاف باید به چیزی تبدیل شود.
- بوم نهایی را بهصورت PNG یا JPEG رمزگذاری کن، نوعی را که مرورگر میگوید واقعاً نوشته بازخوانی کن، و آن را بهصورت دانلودی ارائه بده که به نام فایل اصلی با ابعاد جدید افزودهشده به آن نامگذاری شده است.
فرضها
- هر دو ضلع با یک ضریب مقیاس میشوند و سپس به پیکسل کامل گرد میشوند، بنابراین نسبت ابعاد میتواند تا نیم پیکسل جابهجا شود. روی یک عکس ۴۰۰۰ پیکسلی این تغییری حدود ۰٫۰۱٪ است، و تنها راه پرهیز از رانش بسیار بزرگتری است که از گرد کردن جداگانهٔ دو ضلع پیش میآید.
- جهت EXIF اعمال میشود. عکسی که سرآیند فایلش ۴۰۰۰ در ۳۰۰۰ میگوید اما برچسب یکربع چرخش دارد، ۳۰۰۰ در ۴۰۰۰ در نظر گرفته میشود، چون این همان چیزی است که در نمایشگر عکس خود میبینید و هر بُعدی که از آن مشتق میشود باید با آن سازگار باشد.
- کلید «هرگز آن را بزرگتر نکن» برای حالتهای کادر، عرض و ارتفاع اعمال میشود، که هدفی را توصیف میکنند که تصویر باید درون آن جا شود. یک درصد یا یک اندازهٔ دقیق عیناً اعمال میشود، بنابراین ۲۰۰٪ واقعاً بزرگ میکند.
- از یک GIF یا WebP متحرک فقط فریم اول باقی میماند. یک بوم یک فریم را در خود جا میدهد، و سرهمکردن دوبارهٔ یک انیمیشن به رمزگذاری نیاز دارد که مرورگر در اختیار نمیگذارد.
- پروفایل رنگی تعبیهشده معمولاً حذف میشود. اکثر موتورها یک عکس با گاموت وسیع را هنگام رسم روی بوم به sRGB تبدیل میکنند، بنابراین یک تصویر Adobe RGB میتواند کمی بیرمقتر از اصل به نظر برسد.
- یک JPEG رمزگشایی و دوباره رمزگذاری میشود، هرگز کپی نمیشود. حتی با کیفیت ۱۰۰٪ هم این کار اندکی جزئیات بیشتر را از دست میدهد، و به همین دلیل است که «حفظ فرمت اصلی» یک WebP یا GIF را بهصورت PNG بیاتلاف مینویسد، نه JPEG.
- KB یعنی ۱٬۰۲۴ بایت و MB یعنی ۱٬۰۲۴ KB، که همان چیزی است که مدیر فایل دسکتاپ نشان میدهد و بنابراین همان چیزی است که این رقم با آن مقایسه میشود.
پرسشهای رایج
آیا تصویر من جایی بارگذاری میشود؟
خیر. فایل در همین تب مرورگر خوانده میشود و اندازهاش را یک worker که روی دستگاه خود شما اجرا میشود تغییر میدهد، با همان رمزگشای تصویری که مرورگر برای نمایش عکس در هر صفحهٔ دیگری به کار میبرد. سروری برای فرستادن آن وجود ندارد، و اگر در حالی که تصویری بارگذاری شده درخواستی از این سایت خارج شود، آزمون خودکار این صفحه شکست میخورد.
چرا GIF متحرک من حالا یک فریم است؟
چون یک بوم هر بار یک فریم را نگه میدارد. فریم اول رمزگشایی، تغییراندازه و نوشته میشود و بقیه کنار گذاشته میشوند. تغییر اندازهٔ درست یک انیمیشن به رمزگذاری نیاز دارد که بتواند فریمها را با زمانبندیشان دوباره بنویسد، و مرورگر چنین چیزی را نه برای GIF و نه برای WebP در اختیار نمیگذارد.
چرا فایل به جای کوچکتر شدن بزرگتر شد؟
معمولاً چون یک عکس بهصورت PNG نوشته شده است. PNG بیاتلاف است، بنابراین عکسی که دوباره بهصورت PNG رمزگذاری شود میتواند چند برابر JPEG اصلیاش باشد، حتی با کسری از پیکسلها. زیر «نوشتن بهصورت» JPEG را انتخاب کنید تا فایل بسیار کوچکتر شود. علت دیگر یک تصویر بسیار کوچک است، که در آن سربار ثابت فرمت بیشترِ فایل را تشکیل میدهد.
چرا عکس کوچک من را بزرگتر نمیکند؟
«هرگز آن را بزرگتر نکن» بهطور پیشفرض روشن است و حالتهای کادر، عرض و ارتفاع به آن پایبندند. بزرگ کردن یعنی از خود پیکسل درآوردن: یک عکس ۶۰۰ پیکسلی که تا ۱۹۲۰ کشیده شود فایلی بزرگتر و تارتر است که هیچ جزئیات بیشتری در آن نیست. اگر با این حال آن را میخواهید، کلید را زیر «گزینههای بیشتر» خاموش کنید، یا از حالت درصد استفاده کنید که عیناً اعمال میشود.
آیا میتوانم اندازهٔ یک عکس HEIC از آیفونم را تغییر دهم؟
اینجا نه. HEIC و AVIF با پیامی که همین را میگوید رد میشوند، چون بوم مرورگر نمیتواند هیچکدام را بهطور قابل اعتماد رمزگشایی کند و یک عکس نیمهرمزگشاییشده بدتر از رد کردن است. عکس را از برنامهٔ Photos بهصورت JPEG خروجی بگیرید، یا دوربین را روی «Most Compatible» بگذارید، و بهطور عادی تغییر اندازه میدهد.
آیا رنگها تغییر میکنند؟
اندکی، اگر اصل عکس پروفایل رنگی گاموتوسیع داشته باشد. رسم یک تصویر روی بوم آن را به فضای رنگی بوم تبدیل میکند، که در اکثر موتورها sRGB است، بنابراین یک عکس Adobe RGB یا Display P3 میتواند کمی بیرمقتر به نظر برسد. یک تصویر sRGB، که تقریباً هر چیزی از وب همین است، بیتأثیر میماند.