ஒரு நல்ல வட்ட வெட்டுக்குப் பின்னால் உள்ள வேலைப்பாடு, வடிவங்கள் மற்றும் சிறிய முடிவுகள் குறித்த எங்கள் குழுவின் குறிப்புகள்.
வட்ட வெட்டு எப்படி வரையப்படுகிறது
வட்ட வடிவம் ஒரு CSS வளைந்த மூலை அல்ல. இருண்ட வளையத்துக்குக் கீழே நீங்கள் எப்போதும் முழுப் படத்தையும் பார்க்கிறீர்கள், இழுக்கும் போது உயிருள்ள வட்டம் உங்கள் handle-களைப் பின்தொடரும். சேமிக்கும் போது படம் நீங்கள் தேர்ந்த அளவில் வரையப்பட்டு, வட்ட விளிம்புக்கு அப்பால் உள்ள அனைத்தும் வெட்டப்படும். PNG, WebP மற்றும் AVIF வெட்டைச் சுற்றி ஒரு வெளிப்படையான alpha வளையத்தை வைத்துக்கொள்கின்றன, alpha இல்லாத JPEG கோப்பு உருவாகும் முன் அந்த வளையத்தை நீங்கள் தேர்ந்த நிறத்தால் நிரப்பும். இவற்றில் எதுவும் ஒரு server-ஐத் தொடாது, எல்லாம் local-ஆக நடக்கிறது.
வட்ட வெட்டில் PNG, WebP, AVIF மற்றும் JPEG
ஒரு படத்தை வட்டத்துக்குள் வைக்கும் போது, format கோப்பைத் தீர்மானிக்கிறது. PNG இழப்பற்றது, எங்கும் படிக்கப்படும், 8 megapixel மூலத்திலிருந்து 512 x 512 வட்டம் விவரத்தைப் பொறுத்து பொதுவாக 180 முதல் 350 KB எடைகொள்ளும். WebP 85 முதல் 90 நிலையில் கிட்டத்தட்ட அதே காட்சித் தரத்தைத் தந்து 25 முதல் 40 சதவீதம் இலகுவாக வெளிவரும், 2023 முதல் எல்லா browser-களிலும் படிக்கப்படும். AVIF, AV1 மூலம் ஒத்த தரத்தில் WebP-ஐ விட மேலும் 40 முதல் 50 சதவீதம் சேமிக்கும், ஆனால் மெதுவாகக் கட்டப்படும், அந்த 8 megapixel input-இல் laptop-இல் சில வினாடிகளும் நடுத்தர தொலைபேசியில் 30 வரையும். JPEG வேகமானது, கணினியில் கிட்டத்தட்ட 400 ms, ஆனால் வெளிப்படைத்தன்மை இல்லை, எனவே வெளிப்படையான கோப்புகள் மறுக்கப்படும் இடங்களில் மட்டும் பயன்படுத்தவும், எடுத்துக்காட்டாக சில Slack integration-களிலும் email client-களிலும். பெரும்பாலானவர்களுக்கு PNG அல்லது WebP சரியான தேர்வு.
platform வாரியாக வட்ட avatar அளவு வழிகாட்டி
வட்ட mask-க்குள் avatar அளவுகள் platform-க்குப் platform மாறுபடும். LinkedIn குறைந்தது 400 x 400 px விரும்பும், profile-இல் வட்டமாகவும் feed-இல் சுமார் 48 px-ஆகவும் காட்டப்படும். Discord server icon-ஐ 512 x 512-ஆக வரம்பிட்டு, பயனர் avatar-களை பட்டியலில் 128 x 128-ஆகவும் chat-இல் 32 x 32-ஆகவும் காட்டும். Instagram mobile profile-இல் சுமார் 110 px, thumbnail-இல் 32 px. Slack 512 x 512 வரையிலான பதிவேற்றத்திலிருந்து channel பட்டியலில் சுமார் 36 px-ஐ வரையும். இந்தக் கருவி மூலத் தெளிவைக் காப்பதால், சரியான வெளியீட்டு அளவு தேவைப்படும் போது முதலில் படத்தை /resize/ வழியாக அனுப்பவும், அப்போது பெரிதாக்கத்தால் மங்கல் ஏற்படாது.
HEIC மற்றும் Safari வரம்பு
HEIC என்பது Apple-இன் HEVC அடிப்படையிலான பட format. Safari 17 மற்றும் புதியது அதை நேரடியாகப் படிக்கும், அதனால் iPhone படத்தின் வட்ட வெட்டு Safari-இல் மாற்றமின்றி இயங்கும். Chrome, Firefox மற்றும் Edge 2026-இலும் HEIC-ஐப் படிக்காது, read error தரும். கருவி பதிவேற்றத்தின் போது உண்மையான signature byte-களைச் சரிபார்க்கும், எனவே ஒரு HEIC Safari அல்லாத browser-இல் விழுந்தால், அதை JPG ஆக மாற்ற நட்பான குறிப்பு கிடைக்கும். Safari இல்லாதவர்களுக்குத் தீர்வு எளிது, iPhone Photos app-இல் இருந்து படத்தை JPG ஆகப் பகிரவும், அல்லது கணினியில் உள்ள கோப்பை /heic-to-jpg/ வழியாக அனுப்பவும். ஒரு .heic-ஐ .jpg எனப் பெயர்மாற்றுவது ஏமாற்றாது, signature சரிபார்ப்பு அதைப் பிடித்துவிடும்.
வட்டத்துக்கு வெளியே ஏன் வெளிப்படையானது
நீங்கள் ஒரு வட்ட வெட்டை PNG அல்லது WebP ஆக ஏற்றும் போது, வட்டத்துக்கு அப்பால் உள்ள ஒவ்வொரு pixel-ம் alpha 0-ஐச் சுமக்கிறது, முழுமையாக வெளிப்படையானது. avatar-களை வட்டத்தில் சட்டமிடும் network-களில் இந்த வெளிப்படைத்தன்மை மறைந்து, அவற்றின் சொந்த background சுத்தமாகத் தெரியும். அதே கோப்பை முழு அளவில், எடுத்துக்காட்டாக ஒரு attachment preview-இல் காட்டினால், வெற்று வளையம் ஒரு சதுரங்கப் பலகை போலத் தெரியும். வட்டத்தை Figma அல்லது Canva-வுக்கு இழுத்தால், அது வெள்ளை விளிம்பு இல்லாமல் எந்த நிறத்தின் மேலும் அமரும். கடினமான சந்தர்ப்பங்களுக்கு JPEG உள்ளது, ஏனெனில் சில email client-கள், CMS uploader-கள் மற்றும் பழைய platform-கள் வெளிப்படைத்தன்மையை நீக்கி கருப்பாக வண்ணம் தீட்டுகின்றன, நிரப்பு நிற JPEG அதைத் தவிர்க்கிறது.
DevTools மூலம் browser-இல் செயலாக்கத்தைச் சரிபார்
பதிவேற்றம் இல்லை என்ற வாக்கை நீங்களே சோதிக்கலாம். DevTools-ஐத் திறந்து (F12 அல்லது வலது click செய்து Inspect), Network தாவலுக்குச் சென்று, Clear-ஐ அழுத்தி, பின் வட்டக் கருவியில் பதிவேற்றி handle-களை இழுக்கவும். ஒரே entry-கள் பக்கத்தின் பகுதிகள், அதாவது நீங்கள் கோப்பைத் தேர்வதற்கு முன் ஏற்றப்பட்ட JS, CSS மற்றும் font-கள். உங்கள் பட தரவுடன் எந்த POST அல்லது PUT-ம் எப்போதும் தோன்றாது. சேமிக்கும் போது ஒரு குறுகிய blob: கோரிக்கை கடந்துசெல்லும், அது உங்களுக்கு local கோப்பைத் திருப்பித் தரும் browser, வெளியே அனுப்புதல் அல்ல. Chrome, Firefox, Safari மற்றும் Edge-இல் இதுவே பொருந்தும்.