تصویر و ویدئو در طراحی سایت؛ انتخاب، دسترس‌پذیری و Performance

تصویر Hero بزرگ، ویدئوی پس‌زمینه و چند آیکن براق ممکن است یک صفحه را «مدرن» نشان دهند؛ اما اگر محصول را اشتباه نمایش دهند، متن را بپوشانند، اینترنت کاربر را مصرف کنند یا Task را کند کنند، طراحی بصری شکست خورده است. رسانه خوب فقط زیبا نیست: یک پرسش واقعی را سریع‌تر و قابل‌اعتمادتر پاسخ می‌دهد، بدون اینکه هزینه پنهان Performance، دسترس‌پذیری، حریم خصوصی یا حقوق نشر بسازد.

به‌جای پرسیدن «چند تصویر و ویدئو بگذاریم؟»، برای هر Asset بپرسید: چه Jobی دارد؟ اگر حذف شود چه چیزی نامفهوم می‌شود؟ چه مدرکی ارائه می‌کند؟ هزینه دانلود و تولیدش چقدر است؟ جایگزین متنی و حالت Failure چیست؟ و اثرش را با کدام Outcome می‌سنجیم؟ اگر پاسخ روشنی ندارید، احتمالاً Decorative است و باید سبک‌تر یا حذف شود.

خلاصه اجرایی: ابتدا Content/asset inventory و Purpose بسازید؛ سپس فرمت، Crop، Responsive source، Alt/Caption/Transcript، Loading و Rights را تعیین کنید. تصویر بالای صفحه را بی‌دلیل Lazy load نکنید، ویدئو را با صدا Autoplay نکنید، Alt را با Keyword پُر نکنید و افزایش Conversion را قطعی ندانید. در پایان Task، سرعت، Accessibility و Outcome تجاری را کنار هم آزمایش کنید.

رسانه بصری چه کاری انجام می‌دهد؟

«جذابیت» معیار مبهمی است. یک Asset باید حداقل یکی از نقش‌های زیر را داشته باشد و Owner بتواند آن را توضیح دهد:

یک تصویر ممکن است چند نقش داشته باشد، اما «پُرکردن فضای خالی» Purpose کسب‌وکار نیست. در طراحی مینیمال نیز حذف همه تصویر پاسخ نیست؛ چارچوب کمترین پیچیدگی مؤثر می‌گوید هر عنصر باید نسبت ارزش به هزینه قابل دفاع داشته باشد.

از Asset inventory شروع کنید

پیش از طراحی Template، همه رسانه‌های موجود و موردنیاز را فهرست کنید. این کار جلوی Placeholderهای اتفاقی، Crop نامناسب و خرید Asset بدون حق استفاده را می‌گیرد.

Alt به خود فایل برای همیشه تعلق ندارد؛ به Purpose آن در Context تعلق دارد. یک عکس محصول در گالری اطلاعاتی Alt توصیفی می‌خواهد، اما همان عکس کنار نام کامل محصول در Link شاید متن تکراری ایجاد کند. DAM یا CMS می‌تواند Default بدهد، ولی Author باید مصرف را تأیید کند.

تصویر اختصاصی، استوک یا تولیدشده با AI؟

انتخاب را با Evidence need، Risk، هزینه و زمان انجام دهید:

• عکاسی اختصاصی: برای محصول، فرایند، تیم و مکان واقعی Evidence قوی می‌سازد؛ اما Brief، نور، Art direction، Model/property release و Refresh می‌خواهد.
• استوک: برای مفهوم عمومی و Decorative سریع است؛ اما کلیشه، استفاده رقیب و ناهمخوانی با واقعیت ایران را بررسی کنید. «Royalty-free» الزاماً رایگان یا بدون شرط نیست.
• Illustration/3D: برای مفهوم نامرئی یا نمایش State مناسب است؛ ولی نباید Feature یا نتیجه‌ای را که وجود ندارد القا کند.
• AI-generated: برای Ideation و Visual غیرواقع‌نما مفید است؛ اما خطای جزئی، Bias، شباهت ناخواسته، Origin، حق استفاده و نیاز به Disclosure را با Policy سازمان و حوزه قضایی بررسی کنید.
• Screenshot/UI capture: برای آموزش دقیق است؛ با هر Release قدیمی می‌شود و ممکن است PII، Token یا داده مشتری را افشا کند.

برای محصول فیزیکی، تصویر زیبا جای نمایش Evidenceمحور رنگ، ابعاد، بافت، مقیاس، Variant و عیب/محدودیت را نمی‌گیرد. عکس تیم استوک نیز شواهد هویت نیست. در هر ادعای مهم از چارچوب اعتمادسازی بر پایه شواهد قابل‌راستی‌آزمایی استفاده کنید.

فرمت تصویر را بر اساس محتوا و Pipeline انتخاب کنید

هیچ فرمت واحدی همیشه بهترین نیست. کیفیت ادراکی، Alpha، Animation، Support، Encode time و توان CDN/Build pipeline را با هم بسنجید.

راهنمای جاری Google Images فرمت‌هایی از جمله JPEG، PNG، WebP، SVG و AVIF را پشتیبانی‌شده می‌داند و توصیه می‌کند پسوند با نوع فایل هماهنگ باشد. این فهرست، انتخاب خودکار بهترین فرمت یا تضمین حضور در Image Search نیست.

Responsive images: یک Master را برای همه Deviceها نفرستید

CSS فقط تصویر بزرگ را کوچک نشان می‌دهد؛ الزاماً Byte کمتر دانلود نمی‌شود. با srcset چند عرض و با sizes اندازه نمایش مورد انتظار را اعلام کنید تا Browser منبع مناسب را برگزیند. <picture> برای Art direction یا Format source مفید است و <img src> باید Fallback بماند. راهنمای Responsive images در web.dev الگوی کامل را توضیح می‌دهد.

<picture>
  <source type="image/avif" srcset="product-480.avif 480w, product-960.avif 960w">
  <source type="image/webp" srcset="product-480.webp 480w, product-960.webp 960w">
  <img src="product-960.jpg"
       srcset="product-480.jpg 480w, product-960.jpg 960w"
       sizes="(max-width: 640px) 100vw, 50vw"
       width="960" height="720"
       alt="کفش مشکی مدل آریا از نمای کنار">
</picture>

کد نمونه Recipe جهانی نیست. Breakpoint باید از Layout واقعی بیاید، نه نام Device. Variantهای زیاد Build/Storage و Cache miss می‌سازند؛ چند عرض معنادار بر اساس Histogram اندازه نمایش و DPR انتخاب کنید. Crop موبایل نیز نباید بخش Evidence یا متن ضروری را ببُرد؛ Focal point و Safe area تعریف کنید.

Performance budget برای رسانه بسازید

«هر تصویر زیر ۱۰۰KB» یا «هر ویدئو زیر ۱۰MB» قواعد عمومی نیستند. بودجه را از Journey، شبکه، Device، تعداد Asset و SLO بسازید. Hero با ارزش بالا و Gallery پایین صفحه بودجه یکسان ندارند.

راهنمای سرعت سایت، RUM و Performance budget کمک می‌کند این سقف‌ها به Outcome و Segment متصل شوند.

Lazy loading را انتخابی اجرا کنید

تصاویر پایین Viewport معمولاً می‌توانند loading="lazy" بگیرند. اما Hero یا تصویری که احتمالاً LCP است نباید بی‌دلیل Lazy load شود؛ Browser دیرتر آن را کشف می‌کند. راهنمای بهینه‌سازی LCP بر کشف زودهنگام Resource و Priority درست تأکید دارد. fetchpriority="high" را برای چندین تصویر پخش نکنید؛ Priority زیاد برای همه یعنی Priority واقعی برای هیچ‌کدام.

برای جلوگیری از Layout shift، width/height یا aspect-ratio درست بدهید. Lazy loading را روی Carousel hidden، Tab، Infinite scroll و تصاویر Injectشده جدا تست کنید. Placeholder باید نسبت درست داشته باشد و Blur/Color باعث Flash یا کنتراست بد نشود.

CDN و Cache معجزه نیستند

Image CDN می‌تواند Resize، Format negotiation و Cache را خودکار کند؛ ولی URL transformation، Signature، Origin protection، Purge، TTL، Cache key، هزینه Egress و رفتار Failure را طراحی کنید. اگر URL Vendor در همه صفحات و Index ثبت شود، Exit پرهزینه می‌شود. Stable URL یا Migration map داشته باشید.

Alt text برای Accessibility است؛ نه محل Keyword stuffing

راهنمای تصویر W3C WAI Alt را بر پایه Purpose تقسیم می‌کند. یک درخت تصمیم کوتاه:

1. آیا تصویر اطلاعاتی می‌دهد؟ اطلاعات ضروری را کوتاه و در Context بنویسید.
2. آیا Link/Button است؟ عمل یا مقصد را توصیف کنید، نه شکل تصویر را.
3. آیا Decorative و واقعاً بدون اطلاعات است؟ alt="" بدهید تا Screen reader آن را نخواند؛ حذف Attribute همان معنا را ندارد.
4. آیا Chart/Map/Diagram پیچیده است؟ Alt کوتاه برای شناسایی + توضیح بلند یا جدول/متن مجاور برای داده و نتیجه.
5. آیا متن داخل تصویر است؟ جز Logo یا مورد ضروری، متن HTML را ترجیح دهید؛ در صورت استفاده، همان اطلاعات باید قابل دسترسی باشد.

عبارت «تصویر» را معمولاً لازم نیست تکرار کنید؛ Screen reader نوع Element را می‌داند. رنگ، جنسیت، قومیت یا ویژگی ظاهری را فقط وقتی برای Context لازم و محترمانه است ذکر کنید. Alt را با Keywordهای نامرتبط پُر نکنید؛ Google نیز در راهنمای Image SEO علیه Keyword stuffing هشدار می‌دهد.

Caption با Alt یکسان نیست

Caption برای همه قابل مشاهده است و می‌تواند Source، زمان، Context یا نتیجه را توضیح دهد. Alt جایگزین Purpose تصویر هنگام ندیدن آن است. Credit درباره مالکیت است. Long description داده پیچیده را کامل می‌کند. این چهار را در یک Field ادغام نکنید.

رنگ، متن و حرکت در تصویر

• اطلاعات را فقط با رنگ منتقل نکنید؛ Label، Pattern یا Symbol دوم بدهید.
• متن روی عکس باید در Cropها Contrast پایدار داشته باشد؛ Scrim یا Surface مستقل بهتر از Shadow تصادفی است.
• نسخه موبایل را جدا ببینید؛ متن Hero ممکن است روی چهره یا محصول بیفتد.
• Animation باید Pause/Stop داشته باشد اگر بیش از حد تعریف WCAG حرکت می‌کند؛ prefers-reduced-motion را رعایت کنید.
• Flashing و الگوهای حساس را با معیار WCAG بررسی کنید.
• Carousel خودکار غالباً Content را پنهان و کنترل را سخت می‌کند؛ اگر استفاده شد، Pause، Keyboard، Focus و Announcement را تست کنید.

برای Guardrailهای اخلاقی Autoplay، Countdown و تعامل اجباری، راهنمای طراحی اخلاقی و Dark pattern را اجرا کنید.

ویدئو چه زمانی از تصویر یا متن بهتر است؟

ویدئو وقتی ارزش دارد که زمان، حرکت، ترتیب، لحن یا Demonstration بخشی از پاسخ باشد: نصب قطعه، کار با Gesture، نمایش صدای محصول، مصاحبه یا فرایند. برای قیمت، Specification، مراحل قابل اسکن یا پاسخ کوتاه، متن/تصویر اغلب سریع‌تر و قابل جست‌وجوتر است.

«Dwell time بیشتر» هدف نیست. شاید کاربر چون پاسخ را پیدا نکرده ویدئو را جلو‌وعقب می‌کند. Completion بالا نیز ممکن است از ویدئوی بسیار کوتاه بیاید، نه فهم بهتر. معیار را به Task و Outcome وصل کنید.

میزبانی ویدئو: Self-host یا پلتفرم ثالث؟

در ایران دسترسی Platform خارجی، سرعت Route، نمایش تبلیغ، Cookie، تحریم/ToS و Player باید روی شبکه واقعی آزموده شود. از حساب/هویت صوری برای دورزدن محدودیت Vendor استفاده نکنید. اگر سرویس در دسترس نیست، Alternative مجاز و نسخه متنی/تصویری مستقل فراهم کنید.

ویدئوی سبک و کنترل‌پذیر بسازید

راهنمای Video performance در web.dev نقش poster، preload و Loading را توضیح می‌دهد. برای ویدئوی User-initiated، preload="none" یا metadata و Poster مناسب معمولاً جلوی دانلود بی‌مصرف را می‌گیرد؛ مقدار preload Hint است و Browser ممکن است رفتار متفاوتی داشته باشد.

• چند Rendition معنادار و Codec/Container سازگار ارائه کنید؛ Quality را روی حرکت، متن و چهره ببینید.
• برای محتوای طولانی یا کاربران با شبکه متغیر، Adaptive bitrate را ارزیابی کنید.
• Poster باید محتوای واقعی را نمایندگی کند، Aspect ratio و ابعاد رزروشده داشته باشد و Clickbait نباشد.
• Player باید Play/Pause، Seek، Volume، Fullscreen، Caption، Keyboard و Focus قابل استفاده داشته باشد.
• Third-party iframe را در صورت عدم نیاز اولیه با Facade بار کنید؛ Consent و Cookie را پیش از Request بررسی کنید.
• Error state، Retry، فایل جایگزین و لینک Transcript را هنگام قطع ویدئو نشان دهید.
• QoE شامل Time to first frame، Startup failure، Rebuffer، Error و Completion را Segment کنید.

Autoplay را استثنا بدانید

ویدئو با صدای خودکار تجربه آزاردهنده و مانع دسترس‌پذیری است. WCAG برای Audio خودکار بیش از سه ثانیه کنترل مستقل می‌خواهد و Content متحرک نیز شرایط Pause/Stop/Hide دارد. اگر Motion پس‌زمینه واقعاً ضروری است: Muted، کوتاه، بدون پیام ضروری، با Pause، احترام به Reduced motion و Stop هنگام خروج از Viewport باشد؛ اما تصویر ثابت اغلب انتخاب بهتر است.

Caption، Subtitle، Transcript و Audio description فرق دارند

راهنمای رسانه W3C WAI این اجزا را جدا می‌کند:

• Caption: گفتار و صدای غیرگفتاریِ لازم را زمان‌بندی‌شده منتقل می‌کند؛ برای افراد ناشنوا/کم‌شنوا و محیط پرسروصدا.
• Subtitle ترجمه‌ای: زبان گفتار را ترجمه می‌کند؛ لزوماً همه صدای معنادار را Caption نمی‌کند.
• Transcript: نسخه متنی گفتار و اطلاعات صوتی؛ قابل جست‌وجو، اسکن و کپی.
• Descriptive transcript: اطلاعات بصری ضروری را هم در متن می‌آورد.
• Audio description: اطلاعات بصری لازم را در فاصله‌های مناسب به صوت تبدیل می‌کند.

Caption خودکار Draft است، نه خروجی نهایی. نام، اصطلاح تخصصی، عدد، تومان/ریال، انگلیسی داخل فارسی، نشانه‌گذاری و RTL را انسان بازبینی کند. Caption نباید اطلاعات شخصی پنهان یا سخن اشتباه را بی‌بررسی منتشر کند. Transcript را با نسخه ویدئو Version کنید تا پس از Edit ناهماهنگ نشود.

برای معیار کامل رسانه، Keyboard و Screen reader به راهنمای طراحی فراگیر وب و WCAG ۲.۲ رجوع کنید.

SEO تصویر: Context، کشف‌پذیری و صفحه مقصد

• تصویر را با <img> یا <picture> در HTML ارائه کنید؛ تصویر CSS برای Content اصلی کشف‌پذیری مشابهی ندارد.
• src fallback، URL پایدار، Status درست و عدم Block در robots را بررسی کنید.
• فایل کوتاه و توصیفی می‌تواند سرنخ خفیف بدهد؛ فارسی طولانی/Keyword stuffing لازم نیست.
• Alt مفید، Caption و متن مجاور مرتبط بنویسید؛ Context صفحه مهم است.
• تصویر نماینده Page را برای Structured data/OG بر اساس نوع صفحه و نسبت مناسب انتخاب کنید.
• Image sitemap فقط وقتی Discovery مسئله است مفید است؛ تضمین Index یا Rank نیست.
• CDN domain را در Search Console و Log/Crawl بررسی کنید و URL را بی‌دلیل عوض نکنید.

SEO ویدئو: Embed به‌تنهایی کافی نیست

طبق راهنمای جاری Video SEO گوگل، Watch page باید Indexable باشد، ویدئو روی آن Embed شود، Thumbnail معتبر و پایدار داشته باشد و Player پشت عناصر پنهان نباشد. Index شدن Page نیز Index شدن ویدئو را تضمین نمی‌کند.

• برای ویدئوی مهم، صفحه اختصاصی با Title، Description، Transcript و Context اصیل بسازید.
• ویدئو باید Purpose اصلی/پررنگ صفحه باشد؛ Embed کوچک پایین Article احتمالاً Watch page خوبی نیست.
• VideoObject، Thumbnail، duration، uploadDate و URLها را با محتوای واقعی هماهنگ نگه دارید.
• Video sitemap را برای Discovery و Metadata بسنجید؛ URL و Thumbnail نباید Expire یا Block شوند.
• Video indexing report، Rich result report و Performance را پایش کنید.
• حذف/محدودکردن ویدئو را با Status، Expiry و Metadata هماهنگ کنید.

امنیت، حریم خصوصی و حقوق Asset

فایل و Player سطح حمله‌اند

• Upload را با Type واقعی، Size، Decode، Malware scanning و ذخیره خارج مسیر Executable کنترل کنید.
• SVG یا فایل Metadataدار را از منبع غیرقابل‌اعتماد بدون Sanitize نپذیرید.
• EXIF شامل موقعیت یا اطلاعات دستگاه را طبق Purpose پاک/حفظ کنید.
• Embed و Player ثالث را با CSP، Sandbox/Permissions در صورت تناسب، Script inventory و Update بررسی کنید.
• Token/URL خصوصی و محتوای Protected را در HTML عمومی یا Analytics نشت ندهید.

Consent و داده

Embed ثالث ممکن است پیش از Play Request، Cookie یا شناسه ارسال کند. Data-flow map بسازید و بر اساس قانون حوزه هدف، Consent و Privacy notice را تعیین کنید. Click-to-load facade می‌تواند Request را تا انتخاب کاربر عقب بیندازد، ولی باید واقعاً قبل از Consent هیچ Resource ناخواسته‌ای نگیرد.

Copyright، Talent و ادعای真实性

برای هر Asset، Creator، License، Scope رسانه/کشور/زمان، امکان Edit، Credit، Model/property release، Music/Font و Expiry را ثبت کنید. داشتن فایل در پیام‌رسان، سرچ یا ابزار AI به معنی حق انتشار نیست. برای کار حساس از مشاور حقوقی کمک بگیرید. تصاویر Before/After، Testimonial و Demo نباید نتیجه غیرواقعی یا شرایط پنهان را القا کنند.

Design system رسانه‌ای

استاندارد فقط Pixel و Aspect ratio نیست. Component contract باید Purpose، محتوا، State و دسترسی را تعریف کند:

Content author باید Preview فارسی/موبایل و Accessibility cue ببیند. CMS می‌تواند Alt خالی را Flag کند، اما نباید Decorative را مجبور به متن بی‌معنی کند. Expiry و Usage map کمک می‌کنند عکس عضو سابق، UI قدیمی یا قیمت نامعتبر در صدها صفحه باقی نماند.

شرایط ایران: Data، Device و زبان را واقعی آزمایش کنید

• RUM را بر اساس ISP، Mobile/Desktop، Device memory، Region و Effective connection تحلیل کنید؛ میانگین جهانی کافی نیست.
• هزینه و محدودیت Data را در Autoplay، Background video و Gallery بزرگ لحاظ کنید.
• Player، CDN، Captcha و Host خارجی را از شبکه‌های هدف و در Failure بیازمایید.
• Caption فارسی با اعداد، نام انگلیسی، نیم‌فاصله و Direction را روی Player واقعی تست کنید.
• Text overlay، Price و Badge تومان/ریال در Crop موبایل و Zoom باید خوانا بمانند.
• برای Video آموزش خرید، اختلال OTP/درگاه و UI نسخه‌های مختلف را ثبت و تاریخ بازبینی بگذارید.
• تصاویر محصول باید تفاوت رنگ نمایشگر را با توضیح متنی و سیاست مرجوعی مدیریت کنند؛ «رنگ دقیق» وعده ندهید.

راهنمای تست Mobile-friendly برای شبکه و دستگاه واقعی Matrix اجرای این آزمون‌ها را فراهم می‌کند.

اندازه‌گیری اثر تصویر و ویدئو

Play rate یا Zoom click فقط رفتار میانی است. Metric tree را از Job تا Outcome بسازید:

A/B test را فقط با Conversion خام قضاوت نکنید؛ Refund، Lead quality و Conversion lag را وارد کنید. اگر Traffic کم است، تست کاربردپذیری و Comprehension قبل/بعد شواهد بهتری از «سلیقه مدیر» می‌دهد. معماری Event و Reconciliation را با راهنمای تحلیل داده بازاریابی بسازید.

برای فروشگاه، رسانه را در کل Journey محصول→Variant→سبد→Checkout بسنجید؛ راهنمای بهینه‌سازی UX فروشگاه اینترنتی Guardrailهای سفارش، موجودی و مرجوعی را اضافه می‌کند.

Workflow تولید تا انتشار

1. Brief: Audience، Job، پیام، Evidence، Channel، Aspect ratio، زبان و معیار موفقیت.
2. Rights check: Creator، License، Talent، Music، Location، AI policy و Expiry.
3. Master production: کیفیت کافی بدون Commit شدن به Crop نهایی.
4. Derivatives: Crop/Focal point، Widthها، Format/Encode و Poster/Thumbnail.
5. Access package: Alt/Caption/Long description یا Caption/Transcript/Audio description.
6. Technical QA: MIME، Dimension، Size، Cache، Status، Range، Loading و Error.
7. Experience QA: Mobile/RTL، Keyboard، Screen reader، Zoom، Reduced motion و شبکه ضعیف.
8. SEO/metadata: URL، Context، Structured data/OG، Sitemap در صورت نیاز.
9. Publish and observe: RUM/QoE، Crawl، Task/Outcome و خطا.
10. Lifecycle: Review، Refresh، Archive، Rights expiry و Purge/Redirect.

برنامه ۳۰روزه اصلاح رسانه سایت

1. هفته اول: ۲۰ Template/صفحه پرترافیک یا حیاتی را Inventory کنید؛ Purpose، Owner، Rights و وزن Media را ثبت کنید.
2. هفته دوم: LCP/CLS، Responsive source، Lazy loading، Third-party embed و Error را روی Device/Network هدف ممیزی کنید.
3. هفته سوم: Alt decision، Chart description، Caption/Transcript، Player/Keyboard و Reduced motion را اصلاح کنید.
4. هفته چهارم: Component contract، DAM fields، Performance budget، QA automation، Dashboard و Review cadence را تثبیت کنید.

چک‌لیست انتشار تصویر و ویدئو

• Purpose و Outcome هر Asset مشخص است؛ Decorative بودن نیز آگاهانه است.
• Source، License، Release، Credit، Expiry، Owner و Usage map ثبت شده‌اند.
• فرمت/Quality با مشاهده واقعی انتخاب شده، نه صرفاً نام مدرن‌ترین Codec.
• srcset/sizes و Art direction با Layout واقعی هماهنگ‌اند.
• ابعاد یا Aspect ratio فضای Media را رزرو می‌کند و CLS نمی‌سازد.
• LCP image Lazy نیست و Priority بالا بی‌رویه استفاده نشده است.
• تصاویر پایین صفحه و Embed سنگین با سیاست مناسب Deferred شده‌اند.
• Alt بر اساس Purpose است؛ Decorative alt="" و Chart توضیح کامل دارد.
• متن داخل تصویر، Color-only info، Contrast و Crop بررسی شده‌اند.
• ویدئو Poster، Controls، Error state، Caption، Transcript و در صورت نیاز Audio description دارد.
• Autoplay ضروری، Muted، قابل Pause و سازگار با Reduced motion است؛ در غیر این صورت حذف شده.
• Player/Embed از نظر Consent، Cookie، Script، CSP و Availability بررسی شده است.
• SEO تصویر/ویدئو، URL، Thumbnail، Context و Structured metadata معتبرند.
• فارسی/RTL، تومان/ریال، شبکه/Device ایران و سرویس‌های خارجی تست شده‌اند.
• Outcome، RUM/QoE، Accessibility و Guardrail پس از انتشار پایش می‌شوند.

اشتباه‌های رایج

• استفاده از سه آمار بازاریابی قدیمی برای وعده افزایش قطعی Conversion.
• انتخاب Hero video چون «مدرن» است، بدون Purpose و Data budget.
• فرستادن یک تصویر ۳۰۰۰پیکسلی و کوچک‌کردن آن فقط با CSS.
• Lazy load کردن تصویر LCP یا دادن fetchpriority="high" به همه تصاویر.
• نوشتن لیست Keyword در Alt یا تکرار Caption در آن.
• تصویر Chart بدون داده/نتیجه متنی یا ویدئو بدون Caption/Transcript.
• Autoplay صدا، Motion بی‌وقفه یا Player بدون Keyboard و Pause.
• Embed ثالث پیش از Consent و بدون Failure/Availability test.
• اعتماد به «Royalty-free» یا خروجی AI بدون ثبت Scope حقوق استفاده.
• قضاوت موفقیت با Play/Watch time به‌جای Task، کیفیت مشتری یا کاهش خطا.

سؤالات متداول

بهترین فرمت تصویر برای سایت چیست؟

فرمت واحدی وجود ندارد. برای عکس AVIF/WebP را با کیفیت و Support واقعی مقایسه و در صورت نیاز JPEG fallback بدهید؛ برای بردار SVG امن، برای Transparency یا Screenshot گاهی PNG/WebP مناسب است. Pipeline، Browser هدف و کیفیت ادراکی تصمیم را تعیین می‌کنند.

آیا همه تصاویر باید Alt داشته باشند؟

هر img باید تصمیم Alt داشته باشد، اما متن آن همیشه غیرخالی نیست. تصویر اطلاعاتی Alt مفید، تصویر عملکردی نام عمل/مقصد و تصویر کاملاً Decorative alt="" می‌گیرد. Chart پیچیده علاوه بر Alt کوتاه به توضیح کامل متنی یا جدول نیاز دارد.

Lazy loading برای همه تصاویر خوب است؟

خیر. تصاویر پایین Viewport معمولاً سود می‌برند؛ Hero یا LCP باید زود کشف شود و Lazy loading می‌تواند آن را دیر کند. موقعیت در Layout، Priority، Network waterfall و Field data را بررسی کنید.

آیا ویدئو نرخ تبدیل را افزایش می‌دهد؟

ممکن است، اگر ابهام یا ریسک تصمیم را بهتر از متن/تصویر حل کند. ممکن است هم Conversion را کم کند، چون صفحه را کند یا پیام را پنهان می‌کند. فرضیه را با Outcome نهایی، Refund/Lead quality و Guardrail سرعت/Accessibility آزمایش کنید؛ آمار عمومی تضمین نیست.

برای سئو ویدئو چه چیزهایی ضروری است؟

Watch page قابل Index، ویدئوی پررنگ و قابل‌دسترسی در صفحه، Thumbnail پایدار، Metadata سازگار، Title/Description/Transcript مفید و امکان Crawl/Render لازم‌اند. Structured data و Video sitemap می‌توانند Discovery را کمک کنند، اما Index یا Rich result را تضمین نمی‌کنند.

جمع‌بندی

تصویر و ویدئو زمانی طراحی سایت را بهتر می‌کنند که نقششان از Decoration فراتر رود و هزینه‌شان مدیریت شود. Purpose، Evidence، Rights و Lifecycle را پیش از Pixel تعیین کنید؛ Responsive source، Loading، LCP/CLS، Player و Failure را مهندسی کنید؛ Alt، Caption، Transcript و Audio description را بخشی از تولید بدانید؛ و نتیجه را با Task و Outcome بسنجید. سایت مدرن سایتی نیست که Media بیشتری دارد؛ سایتی است که برای هر کاربر، در هر شبکه و توانایی، دقیق‌ترین رسانه لازم را با کمترین اصطکاک ارائه می‌دهد.