Guidelines

Asset & Media Guide

ஊடக வடிவமைப்பு வழிகாட்டி

Optimize visual media for high performance and clarity. This guide defines standard rules for SVGs, next-generation image formats (AVIF, WebP), legacy fallbacks (PNG), and modern web loading strategies.

இணையப் பக்கங்களின் செயல்திறனை அதிகரிக்கவும் தெளிவான காட்சிகளைப் பெறவும் படக் கோப்புகளை மேம்படுத்தும் வழிகாட்டி.

நவீன இணைய வடிவங்கள் (Next-Gen Formats)

இணையப் பக்கங்களின் வேகத்தை மேம்படுத்த, உள்ளடக்கத்திற்கு ஏற்ற சரியான வடிவமைப்பைத் தேர்வு செய்ய வேண்டும்.

வடிவம்	வகை	ஊடுருவல் (Transparency)	பயன்பாடு	சேமிப்பு அளவு
AVIF	Lossy / Lossless	ஆம்	உயர்தர புகைப்படங்கள், வண்ணமயமான பின்னணிகள்	~50% குறைவு
WebP	Lossy / Lossless	ஆம்	சாதாரண விளக்கப்படங்கள், திரைக்காட்சிகள்	~30% குறைவு
PNG	Lossless Only	ஆம்	சின்னங்கள், லோகோக்கள், எழுத்து வரைபடங்கள்	அதிகம் (மாற்றமில்லை)
SVG	Vector	ஆம்	சின்னங்கள், ஜியோமெட்ரிக் கோடுகள்	அளவிடக்கூடியது

ஊடக அளவீட்டுக் கருவி (Optimizer Calculator)

உங்களிடம் உள்ள தற்போதைய கோப்பின் அளவை உள்ளிட்டு, நவீன வடிவங்கள் மூலம் எவ்வளவு சேமிக்க முடியும் மற்றும் இணைய வேகம் எவ்வாறு மேம்படும் என்பதை அறியலாம்.

ஊடகச் செயல்திறன் அளவீடு

கோப்பின் சேமிப்பு மற்றும் பதிவிறக்க நேரத்தைக் கணக்கிடுக.

அசல் கோப்பின் அளவு

50 KB5000 KB

ஊடக வகை

புகைப்படம் (உதாரணம்: JPG/PNG)

இணைய விளக்கப்படம் / வரைபடம்

சின்னம் / லோகோ / வெக்டர்

அசல் கோப்பு (PNG/JPEG)800 KB

WebP -35%520 KB

AVIF -55%360 KB

கோப்பை 800 KB-லிருந்து நவீன வடிவங்களுக்கு மாற்றுவதன் மூலம், AVIF வடிவில் 55% வரையிலும் (360 KB), WebP வடிவில் 35% வரையிலும் (520 KB) இணையப் பக்கத்தின் சுமையைக் குறைக்கலாம்.

மதிப்பிடப்பட்ட பதிவிறக்க நேரம்

வடிவம்	கோப்பு அளவு	மெதுவான 3G (1.6 Mbps)	4G LTE (15 Mbps)	அதிவேக பிராட்பேண்ட் (100 Mbps)
அசல் கோப்பு (PNG/JPEG)	800 KB	4.10 s	0.44 s	66 ms
WebP-35%	520 KB	2.66 s	0.28 s	43 ms
AVIF-55%	360 KB	1.84 s	0.20 s	29 ms

பரிந்துரை:

AVIF (மிகவும் பரிந்துரைக்கப்படுகிறது)

WebP (பரிந்துரைக்கப்படுகிறது)

PNG/JPG (பழைய பதிப்புகளுக்கு மட்டும்)

வெக்டர் சின்னங்கள் வழிகாட்டி (SVG)

சின்னங்கள் மற்றும் விளக்கப்படங்கள் உரையோடு சரியாகப் பொருந்த கீழ்வரும் அளவீடுகளைப் பின்பற்ற வேண்டும்.

1. 24px கட்டமைப்பு

அனைத்து சின்னங்களையும் 24px × 24px அளவிலான சட்டகத்திற்குள் வடிவமைக்கவும்.

2. பாதுகாப்பு இடைவெளி

பக்கங்களின் விளிம்பில் சின்னங்கள் வெட்டப்படாமல் இருக்க, வரைபடத்தை 20px × 20px எல்லைக்குள் வைக்கவும் (2px விளிம்பு இடைவெளி).

3. வண்ணப் பொருத்தம்

நிலையான வண்ண குறியீடுகளுக்குப் பதிலாக currentColor-ஐப் பயன்படுத்தவும், அப்போதுதான் சின்னங்கள் பக்கத்தின் நிறத்தோடு ஒத்திசையும்.

தானியங்கு சின்னத் தொகுப்பு முறை

படி 1:SVG கோப்பினைச் சேமிக்க வேண்டிய தளம்: data/svg-icons/tamil-gopuram.svg

படி 2:தானியங்கு தொகுப்பானை (Compiler) இயக்கவும்:

node scripts/compile-svgs.js

படி 3:ரியாக்ட் குறியீட்டிற்குள் பயன்படுத்துதல்:

import { TamilGopuram } from "@/components/ui/icons";

export function HeaderSection() {
  return <TamilGopuram className="size-6 text-primary hover:scale-105 transition-all" />
}

கோபுரச் சின்னம் (Gopuram)

குத்துவிளக்குச் சின்னம் (Traditional Lamp)

இணைப்பு மாதிரிகள்

உங்களது இணையதளத்தில் படங்களை ஏற்ற கீழ்வரும் உத்திகளைப் பயன்படுத்தவும்:

1. மாற்று வடிவங்கள் கொண்ட Picture லேபிள் (HTML)

உலவி ஆதரிக்கும் மிகச் சிறிய கோப்பினைத் தானாகத் தேர்வு செய்யும் முறை:

<picture>
  {/* நவீன உலவிகளுக்கான AVIF வடிவம் */}
  <source srcSet="/images/hero-visual.avif" type="image/avif" />
  
  {/* மாற்று WebP வடிவம் */}
  <source srcSet="/images/hero-visual.webp" type="image/webp" />
  
  {/* பழைய உத்திகளுக்கான PNG வடிவம் */}
  <img 
    src="/images/hero-visual.png" 
    alt="Civic service dashboard visual" 
    loading="lazy" 
    decoding="async"
    className="w-full h-auto object-cover"
  />
</picture>

2. Next.js படக் கூறு (Image Component)

தானியங்கு பட மேம்பாட்டிற்கு Next.js படக்கூறைப் பயன்படுத்தவும்:

import Image from "next/image";

export function HeroBanner() {
  return (
    <div className="relative aspect-video w-full overflow-hidden rounded-md">
      <Image
        src="/images/banner.png"
        alt="Official schemes announcement visual"
        fill
        sizes="(max-width: 768px) 100vw, 50vw"
        priority // உடனடியாகத் திரையில் ஏற்றப்படும்
        className="object-cover"
      />
    </div>
  );
}

3. W3C படங்களுக்கான நெறிமுறைகள் (WCAG)

அனைத்து முக்கியப் படங்களும் திரை வாசிப்பான்களுக்கான (Screen Readers) தெளிவான alt உரையைக் கொண்டிருக்க வேண்டும். வெறும் அலங்காரத்திற்காகப் பயன்படுத்தப்படும் படங்களுக்கு alt="" என்று அமைக்க வேண்டும், அப்போதுதான் அவை தொழில்நுட்பங்களால் தவிர்க்கப்படும்.

Command Palette