← → · Space · F

SESSION 04 · 120 MIN

مدیریت تصاویر و رسانه‌ها

متن بدون تصویر مثل اتاق بدون نور است. امروز یاد می‌گیریم رسانه را درست، سبک و حرفه‌ای وارد سایت کنیم.

media library jpg / webp alt text compress

مدرس: یک پوشه عکس خام بیاورید؛ در کلاس فشرده و آپلود کنید — فقط حرف نزنید.

پل از جلسه ۳

نوشته نوشتی — حالا چهره می‌خواهد

تصویر شاخص، عکس داخل مطلب، لوگو، PDF کاتالوگ، حتی ویدئو معرفی — همه از یک جا مدیریت می‌شوند: رسانه‌ها (Media).

کتابخانه رسانه = انبار فایل‌های سایت. هر چیزی که آپلود می‌کنی آنجا می‌ماند.

هدف جلسه

تا پایان باید بتوانی:

  • عکس/PDF را آپلود و در نوشته استفاده کنی
  • فرمت درست را انتخاب کنی (JPG، PNG، WebP، SVG)
  • حجم را کم کنی و alt معنادار بنویسی
  • گالری ساده یا ویدئو در صفحه بگذاری

داستان کلاس

انبار نامرتب = سایت کند و زشت

تصویر ۲۰ مگابایتی از موبایل را مستقیم آپلود کردن مثل این است که یک کمد لباس را با چمدان سفر پر کنی. سایت نفس‌نفس می‌زند، گوگل عصبانی می‌شود، کاربر فرار می‌کند.

قانون طلایی: قبل از آپلود، سبک و مرتب کن — بعد وارد انبار کن.

بخش ۱ · کتابخانه رسانه · ۲۰ دقیقه

رسانه‌ها ← کتابخانه

01

آپلود

فایل را بکش و رها کن، یا «افزودن پرونده» بزن.

02

جزئیات

عنوان، متن جایگزین (alt)، توضیح، نام فایل را ببین.

03

درج در محتوا

از بلوک تصویر یا «افزودن رسانه» داخل نوشته/برگه انتخاب کن.

بخش ۲ · فرمت‌ها · ۲۵ دقیقه

هر فایل یک شغل دارد

JPG / JPEG

عکس واقعی

پرتره، محصول، منظره. حجم خوب، شفافیت ندارد.

PNG

شفافیت / گرافیک

لوگو با پس‌زمینه شفاف، آیکون. معمولاً سنگین‌تر از JPG.

WebP

قهرمان سرعت

کیفیت خوب با حجم کمتر. انتخاب مدرن برای وب.

SVG

وکتور تیز

لوگو و آیکون ساده. بی‌نهایت مقیاس؛ مراقب SVG ناامن باش.

راهنمای سریع انتخاب

چی آپلود کنم؟

عکس محصول JPG یا WebP — سبک و تمیز
لوگو شفاف PNG یا SVG
کاتالوگ PDF — حجم معقول، نام فایل فارسی شلخته نه

کوییز فرمت

لوگوی شفاف با پس‌زمینه خالی؟

بخش ۳ · حجم · ۲۰ دقیقه

سبک کردن قبل از آپلود

هدف تقریبی برای عکس وب: اغلب زیر ۲۰۰–۳۰۰ کیلوبایت برای تصاویر معمولی صفحه؛ هرو بزرگ‌تر، بهینه‌تر فکر کن.

ابعاد

عکس ۴۰۰۰ پیکسل برای کارت بلاگ لازم نیست. برای عرض محتوا معمولاً ۱۲۰۰–۱۶۰۰ کافی است.

ابزار

Squoosh، TinyPNG، یا خروجی WebP از فتوشاپ/فیگما. افزونه فشرده‌ساز هم بعداً.

سایت سریع = عکس مسئولیت‌پذیر، نه فقط هاست گران.

متن جایگزین · Alt

عکس را برای نابینا و گوگل توصیف کن

بد

خالی یا «تصویر۱»

نه سئو، نه دسترسی‌پذیری، نه حرفه‌ای.

خوب

توصیف کوتاه و واقعی

«میز کار چوبی با لپ‌تاپ باز در دفتر مدرن» — دقیق، بدون keyword stuffing.

اگر تصویر صرفاً تزئینی است، alt را خالی معنادار مدیریت کن؛ اگر محتواست، توصیف واجب است.

جزئیات حرفه‌ای

نام فایل هم بخشی از برند است

بد

IMG_9932.JPG

یا فاصله و کاراکتر عجیب در نام.

خوب

office-desk-hero.webp

انگلیسی کوتاه، خط تیره، بدون فاصله.

تصویر شاخص دوباره

چهره کارت وبلاگ و شبکه‌های اجتماعی

نسبت تقریبی ۱.۹۱:۱ (مثلاً ۱۲۰۰×۶۳۰) برای اشتراک‌گذاری خوب است. سوژه مهم را وسط/امن کادر بگذار تا قالب‌ها برش نزنند.

1200×630 چهره واضح متن روی عکس کم

تمرین · alt نویسی

این عکس را توصیف کن

ACTIVITY · ۲ دقیقه

تصور کن عکس «میز کار با لپ‌تاپ باز در دفتر» داری. یک alt بد و یک alt خوب روی کاغذ بنویس. بعد با بغل‌دستی عوض کنید.

بد: تصویر۱ / عکس · خوب: توصیف کوتاه و واقعی بدون keyword stuffing

بخش ۴ · در صفحه · ۲۰ دقیقه

گالری، PDF، ویدئو

گالری

بلوک Gallery چند عکس را کنار هم می‌چیند — برای پروژه و قبل/بعد عالی است.

PDF

آپلود کن و با بلوک فایل یا لینک دکمه «دانلود کاتالوگ» بساز.

ویدئو

ترجیحاً آپارات/یوتیوب را Embed کن؛ آپلود ویدئوی سنگین روی هاست معمولی توصیه نمی‌شود.

تله‌های رایج

این‌ها را انجام نده

کندی

عکس خام موبایل

چند مگابایت مستقیم روی صفحه اصلی.

حقوق

عکس دزدی گوگل

از Unsplash/مجوزدار یا عکس خودت استفاده کن.

آشغال انبار

آپلود تکراری بی‌نام

کتابخانه را مثل دسکتاپ شلوغ نکن؛ نام‌گذاری کن.

گردش‌کار حرفه‌ای

۵ قدم تا عکس سایت‌پسند

01

انتخاب

عکس باکیفیت، مرتبط، با مجوز.

02

برش و اندازه

به عرض مورد نیاز صفحه برسان.

03

فشرده‌سازی / WebP

حجم را پایین بیاور بدون نابودی کیفیت.

04

نام فایل + alt

نام انگلیسی مرتب و توضیح معنادار.

05

آپلود و درج

در رسانه بگذار؛ در محتوا یا تصویر شاخص استفاده کن.

کوییز

ویدئوی ۵ دقیقه‌ای معرفی شرکت را کجا بگذاری؟

تمرین عملی غنی

خط تولید رسانه

  • ۳ عکس را resize + فشرده/WebP کن
  • نام فایل انگلیسی مرتب بگذار و آپلود کن
  • برای هر کدام alt بنویس
  • یکی تصویر شاخص نوشته شود
  • گالری ۲–۴ تایی در برگه خدمات

تمرین عملی · ۲۵ دقیقه

آماده‌سازی رسانه برای سایت شرکتی

  • ۳ عکس را فشرده/WebP کن و آپلود کن
  • برای هر کدام alt درست بنویس
  • یکی را تصویر شاخص یک نوشته کن
  • یک گالری ۲–۴ تایی در برگه خدمات بساز
  • (اختیاری) یک PDF نمونه با دکمه دانلود

سه سؤال شفاهی

بدون نگاه به اسلاید:

  • JPG را کی و PNG را کی انتخاب می‌کنی؟
  • alt چیست و چرا مهم است؟
  • چرا ویدئوی بزرگ را مستقیم روی هاست آپلود نمی‌کنیم؟

برای جلسه بعد

جلسه ۵: قالب، منو و ظاهر سایت

محتوا و رسانه آماده‌اند. حالا لباس سایت را می‌پوشانیم: انتخاب قالب، لوگو، منوی اصلی، صفحه خانه و وبلاگ.

امروز انبار. جلسه بعد ویترین و راهروها.

END · SESSION 04

عکس خوب، سایت را نصف راه می‌برد

سبک، با معنی، با نام درست — این استاندارد حرفه‌ای است.

hamedebrahimi.ir · Session 04 · Media & Images

۱ / —