رسانهها در وردپرس و نحوه گرفتن بهترین خروجی تصویر در فتوشاپ
تصاویر بخش مهمی از تقریباً هر وبسایتی هستند. از تصویر شاخص مقالات و تصاویر محصولات گرفته تا بنرها، لوگوها و تصاویر صفحات مختلف، همگی میتوانند روی ظاهر سایت و تجربه کاربر تأثیر زیادی داشته باشند.
استفاده از تصویر در سایت فقط به انتخاب یک عکس زیبا و آپلود آن در وردپرس محدود نمیشود. اگر تصاویر با ابعاد بسیار بزرگ یا حجم بالا در سایت قرار بگیرند، میتوانند باعث افزایش حجم صفحات و کاهش سرعت بارگذاری شوند.
به همین دلیل، در این جلسه ابتدا با رسانهها در وردپرس و کتابخانه رسانه آشنا میشویم و سپس یاد میگیریم چگونه تصاویر را قبل از آپلود، در فتوشاپ برای استفاده در وب آماده کنیم و خروجی مناسبی از آنها بگیریم.
رسانهها در وردپرس چیست؟
وردپرس برای مدیریت فایلهایی که در سایت بارگذاری میکنید، بخشی به نام رسانه (Media) دارد.
برای دسترسی به این قسمت کافی است از منوی پیشخوان وردپرس وارد بخش «رسانه» شوید.
تصاویر، فایلهای صوتی، ویدئوها، فایلهای PDF و بسیاری از فایلهایی که در بخشهای مختلف سایت آپلود میکنید، میتوانند در کتابخانه رسانه وردپرس قرار بگیرند.
بنابراین کتابخانه رسانه را میتوان محل مدیریت بسیاری از فایلهای آپلودشده سایت در نظر گرفت.
کتابخانه رسانه وردپرس
با ورود به بخش رسانه ← کتابخانه میتوانید فایلهای رسانهای موجود در سایت را مشاهده کنید.
این قسمت امکان مشاهده و مدیریت فایلهایی را که قبلاً در وردپرس آپلود شدهاند در اختیار شما قرار میدهد.
با انتخاب یک تصویر میتوانید اطلاعات و جزئیات مربوط به آن را مشاهده کنید. بسته به فایل و نسخه وردپرس، اطلاعاتی مانند نام فایل، نوع فایل، تاریخ بارگذاری، ابعاد تصویر و سایر مشخصات در دسترس خواهند بود.
همچنین میتوانید برخی اطلاعات مرتبط با تصویر را مدیریت کنید.
چگونه در وردپرس تصویر آپلود کنیم؟
یکی از روشهای اضافه کردن فایل جدید، مراجعه به بخش رسانه ← افزودن پرونده رسانهای تازه است.
در این قسمت میتوانید فایل موردنظر خود را انتخاب کرده و در وردپرس آپلود کنید.
البته برای استفاده از تصاویر همیشه لازم نیست مستقیماً وارد کتابخانه رسانه شوید. هنگام ویرایش نوشتهها و برگهها نیز میتوانید فایل جدید آپلود کرده یا یکی از تصاویر موجود در کتابخانه را انتخاب کنید.
اطلاعات تصاویر در کتابخانه رسانه
هنگام انتخاب یک تصویر در کتابخانه رسانه با اطلاعات و فیلدهای مختلفی مواجه میشوید که شناخت بعضی از آنها اهمیت زیادی دارد.
یکی از مهمترین این موارد متن جایگزین یا Alt Text است.
متن جایگزین یا Alt تصاویر چیست؟
متن جایگزین یا Alternative Text توضیح متنی تصویر است و نقش مهمی در دسترسپذیری محتوای وب دارد.
متن جایگزین باید متناسب با هدف تصویر و محتوایی که در آن استفاده شده نوشته شود. اگر تصویر اطلاعات مهمی را منتقل میکند، Alt باید آن اطلاعات یا هدف تصویر را به شکل مختصر و مفید بیان کند.
برای مثال، اگر تصویری از صفحه کتابخانه رسانه وردپرس در یک آموزش دارید، متن جایگزینی مانند:
«کتابخانه رسانه وردپرس برای مدیریت تصاویر سایت»
میتواند مناسب باشد.
نباید کلمات کلیدی را بهصورت مصنوعی و تکراری در Alt تصاویر قرار دهید. هدف اصلی این بخش، ارائه جایگزین متنی مناسب برای تصویر است.
همچنین تصاویر کاملاً تزئینی الزاماً به Alt توصیفی نیاز ندارند و بسته به نحوه پیادهسازی بهتر است متن جایگزین آنها خالی باشد.
عنوان و توضیحات تصاویر
علاوه بر Alt، ممکن است هنگام مدیریت یک تصویر فیلدهایی مانند عنوان، توضیح و زیرنویس را نیز مشاهده کنید.
این موارد کاربرد یکسانی ندارند.
برای مثال، زیرنویس میتواند برای نمایش توضیحی در کنار تصویر به کار رود، در حالی که Alt برای ارائه جایگزین متنی تصویر استفاده میشود.
بنابراین بهتر است تمام این فیلدها را صرفاً با یک عبارت یکسان یا کلمه کلیدی مقاله پر نکنید و فقط زمانی از هرکدام استفاده کنید که واقعاً کاربرد داشته باشد.
چرا باید تصاویر را قبل از آپلود در وردپرس بهینه کنیم؟
یکی از اشتباهات رایج این است که تصویر مستقیماً با همان ابعاد و حجم فایل اصلی در وردپرس آپلود شود.
برای مثال، فرض کنید تصویری با عرض چند هزار پیکسل دارید، در حالی که حداکثر عرض نمایش آن در محتوای سایت بسیار کمتر است. نگهداری و استفاده از چنین فایل بزرگی در بسیاری از مواقع ضرورتی ندارد.
تصاویر سنگین میتوانند حجم صفحه را افزایش دهند و در نتیجه زمان بیشتری برای انتقال آنها به مرورگر کاربر نیاز باشد.
به همین دلیل بهتر است قبل از آپلود تصویر، حداقل سه مورد را بررسی کنید:
ابعاد تصویر، فرمت فایل و حجم نهایی آن.
فتوشاپ یکی از ابزارهایی است که میتوانیم برای آمادهسازی تصاویر سایت از آن استفاده کنیم.
ابعاد مناسب تصویر برای سایت چقدر است؟
برای ابعاد تصاویر سایت نمیتوان یک عدد ثابت و مناسب برای همه وبسایتها تعیین کرد.
ابعاد مناسب به طراحی سایت، قالب، محل نمایش تصویر و نمایشگرهای هدف بستگی دارد.
تصویر شاخص یک مقاله، بنر تمامعرض صفحه، تصویر محصول و یک تصویر کوچک داخل محتوا الزاماً نباید ابعاد یکسانی داشته باشند.
قاعده مهم این است که تصویر را متناسب با اندازهای که قرار است در سایت نمایش داده شود آماده کنید و از آپلود تصاویر بسیار بزرگ بدون نیاز واقعی خودداری کنید.
برای مثال اگر طراحی سایت شما تصاویر یک بخش را در عرض محدودی نمایش میدهد، معمولاً نیازی نیست فایل اصلی چند هزار پیکسلی را بدون تغییر در همان بخش استفاده کنید.
تغییر ابعاد تصویر در فتوشاپ
برای تغییر اندازه تصویر در فتوشاپ میتوانید از مسیر:
Image → Image Size
استفاده کنید.
در این پنجره امکان مشاهده و تغییر عرض و ارتفاع تصویر وجود دارد.
هنگام تغییر ابعاد، نسبت طول و عرض تصویر را نیز در نظر بگیرید تا تصویر بهصورت ناخواسته کشیده یا فشرده نشود.
بهتر است قبل از شروع کار با تصاویر سایت، ابعاد موردنیاز بخشهای مختلف طراحی مشخص شوند؛ برای مثال ابعاد تصویر شاخص، تصاویر مقالات، تصاویر محصولات و بنرها.
با این کار تصاویر سایت علاوه بر حجم مناسب، ظاهر منظمتری نیز خواهند داشت.
رزولوشن 72 DPI برای سایت ضروری است؟
یکی از باورهای رایج هنگام آمادهسازی تصاویر برای وب این است که تمام تصاویر حتماً باید روی 72 DPI تنظیم شوند.
برای تصاویر معمولی که در صفحات وب بر اساس پیکسل نمایش داده میشوند، چیزی که اهمیت مستقیم بیشتری دارد ابعاد پیکسلی تصویر است.
یعنی برای بهینهسازی یک تصویر وب بهتر است بیشتر روی عرض و ارتفاع واقعی فایل، حجم، فرمت و میزان فشردهسازی تمرکز کنید.
بنابراین صرفاً تغییر عدد DPI بدون تغییر ابعاد پیکسلی، راهحل اصلی کاهش حجم یا بهینهسازی تصویر برای سایت نیست.
بهترین فرمت عکس برای وردپرس چیست؟
انتخاب فرمت مناسب یکی از مهمترین مراحل آمادهسازی تصاویر است.
فرمتهای مختلف ویژگیهای متفاوتی دارند و نمیتوان یک فرمت را برای تمام تصاویر بهترین گزینه دانست.
فرمت JPEG یا JPG
JPEG برای بسیاری از تصاویر عکاسی و تصاویری که دارای رنگها و جزئیات زیادی هستند مناسب است.
این فرمت امکان فشردهسازی خوبی دارد و با انتخاب کیفیت مناسب میتوان تعادل قابل قبولی میان حجم فایل و کیفیت تصویر ایجاد کرد.
اگر تصویر شما یک عکس معمولی است و به پسزمینه شفاف نیاز ندارید، JPEG همچنان میتواند گزینه مناسبی باشد.
فرمت PNG
PNG در شرایطی کاربرد دارد که به ویژگیهایی مانند شفافیت نیاز دارید یا نوع تصویر با این فرمت سازگاری بیشتری دارد.
اما استفاده از PNG برای هر نوع تصویر، مخصوصاً عکسهای بزرگ و پرجزئیات، ممکن است فایلهایی با حجم بیشتر ایجاد کند.
بنابراین صرفاً به دلیل کیفیت، تمام تصاویر سایت را PNG ذخیره نکنید.
فرمت WebP
WebP یکی از فرمتهای مناسب برای استفاده در وب است که میتواند برای بسیاری از تصاویر، حجم مناسبی در کنار کیفیت قابل قبول فراهم کند و از فشردهسازی با اتلاف و بدون اتلاف و همچنین شفافیت پشتیبانی میکند.
وردپرس در نسخههای جدید از آپلود WebP پشتیبانی میکند.
اگر ابزارها و فرآیند کاری شما اجازه میدهند، WebP میتواند برای بسیاری از تصاویر سایت انتخاب خوبی باشد.
با این حال بهتر است به جای انتخاب فرمت صرفاً بر اساس نام آن، حجم و کیفیت خروجی واقعی را مقایسه کنید.
JPEG، PNG یا WebP؛ کدام را انتخاب کنیم؟
انتخاب فرمت باید بر اساس نوع تصویر انجام شود.
برای عکسهای معمولی میتوانید JPEG و WebP را بررسی و حجم و کیفیت آنها را مقایسه کنید.
اگر تصویر به شفافیت نیاز دارد، PNG یا WebP بسته به شرایط میتوانند مناسب باشند.
برای عناصر گرافیکی ساده، لوگو و آیکونها نیز در شرایطی که امکان استفاده از SVG به شکل امن و مناسب وجود دارد، فرمت برداری میتواند گزینه دیگری باشد؛ هرچند مدیریت SVG در وردپرس ملاحظات امنیتی خاص خود را دارد و وردپرس بهصورت پیشفرض آپلود آن را مانند فرمتهای تصویری رایج مجاز نمیکند.
چگونه از فتوشاپ برای سایت خروجی بگیریم؟
پس از اصلاح تصویر و تعیین ابعاد مناسب، نوبت به گرفتن خروجی میرسد.
یکی از روشهای کاربردی در فتوشاپ استفاده از گزینه:
File → Export → Export As
است.
بسته به نسخه فتوشاپ و نوع فایل، گزینههای خروجی در دسترس ممکن است متفاوت باشند.
در پنجره خروجی میتوانید فرمت مناسب را انتخاب و تنظیمات مربوط به اندازه و کیفیت را بررسی کنید.
هدف این نیست که کیفیت تصویر را تا حد ممکن کاهش دهید؛ بلکه باید نقطهای پیدا کنید که تصویر از نظر بصری کیفیت قابل قبولی داشته باشد و در عین حال حجم غیرضروری ایجاد نکند.
کیفیت خروجی تصویر را روی چه عددی قرار دهیم؟
برای کیفیت تصاویر نیز یک عدد جادویی وجود ندارد که برای تمام تصاویر بهترین نتیجه را ایجاد کند.
نوع تصویر، ابعاد، جزئیات، فرمت و نحوه نمایش آن در سایت روی نتیجه تأثیر میگذارند.
روش بهتر این است که چند سطح کیفیت را آزمایش کنید و خروجیها را در اندازه واقعی نمایش با یکدیگر مقایسه کنید.
اگر با کاهش کیفیت، تفاوت بصری قابل توجهی ایجاد نمیشود اما حجم فایل به شکل محسوسی کاهش پیدا میکند، خروجی سبکتر میتواند انتخاب بهتری باشد.
بنابراین به جای حفظ یک عدد ثابت برای تمام تصاویر، تعادل میان کیفیت و حجم را معیار تصمیمگیری قرار دهید.
حجم مناسب تصاویر سایت چقدر است؟
در مورد حجم تصویر نیز نمیتوان گفت تمام تصاویر باید دقیقاً کمتر از یک عدد مشخص باشند.
یک تصویر کوچک داخل مقاله با یک بنر بزرگ تمامعرض نیازهای متفاوتی دارد.
با این حال باید تلاش کنید فایل تصویر تا حد منطقی سبک باشد و داده اضافی و غیرضروری به کاربر منتقل نکند.
اگر دو فایل از نظر بصری تقریباً کیفیت یکسانی دارند اما یکی حجم بسیار کمتری دارد، معمولاً استفاده از فایل سبکتر منطقیتر است.
نام فایل تصاویر را قبل از آپلود بررسی کنید
قبل از آپلود تصویر در وردپرس، بهتر است نام فایل آن را نیز بررسی کنید.
استفاده از نامهای قابل فهم و توصیفی به مدیریت بهتر فایلها کمک میکند.
برای مثال به جای نامی مانند:
IMG_4582.jpg
میتوانید از نامی مرتبط مانند:
wordpress-media-library.jpg
استفاده کنید.
نام فایل بهتر است کوتاه، مرتبط و قابل فهم باشد و نیازی نیست تعداد زیادی کلمه کلیدی را در آن قرار دهید.
آیا وردپرس خودش تصاویر را بهینه میکند؟
وردپرس هنگام آپلود تصاویر میتواند اندازههای مختلفی از تصویر ایجاد کند و در بسیاری از شرایط، مرورگر با کمک اطلاعاتی که وردپرس در خروجی HTML قرار میدهد میتواند نسخه متناسبتری را برای نمایش انتخاب کند.
اما این موضوع به این معنی نیست که آمادهسازی فایل اصلی اهمیتی ندارد.
اگر تصاویر اولیه بدون توجه به ابعاد، فرمت و حجم آپلود شوند، همچنان ممکن است فضای ذخیرهسازی بیشتری مصرف شود یا در برخی سناریوها فایلهای بزرگتری نسبت به نیاز سایت مورد استفاده قرار بگیرند.
به همین دلیل بهتر است تصاویر را از همان ابتدا با ابعاد و فرمت منطقی آماده کنید.
اشتباهات رایج هنگام آپلود تصاویر در وردپرس
یکی از رایجترین اشتباهات، آپلود مستقیم تصاویر دوربین یا فایلهای بسیار بزرگ بدون تغییر ابعاد است.
استفاده بیدلیل از PNG برای تصاویر عکاسی، فشردهسازی بیش از حد JPEG تا جایی که کیفیت تصویر کاملاً افت کند و انتخاب یک ابعاد ثابت برای تمام تصاویر سایت نیز از اشتباهات متداول هستند.
نادیده گرفتن Alt تصاویر، استفاده از نامهای نامفهوم برای فایلها و آپلود چندباره یک تصویر یکسان نیز میتوانند مدیریت کتابخانه رسانه را در بلندمدت دشوار کنند.
تصاویر چه تأثیری روی سئو و سرعت سایت دارند؟
تصاویر میتوانند به درک بهتر محتوا و تجربه کاربری کمک کنند، اما اگر به شکل نامناسب استفاده شوند، حجم صفحات را بهطور قابل توجهی افزایش میدهند.
تصاویر بزرگ میتوانند روی سرعت بارگذاری صفحه اثر بگذارند و تصویر اصلی بخش بالای صفحه نیز ممکن است در معیار Largest Contentful Paint (LCP) نقش داشته باشد.
بهینهسازی تصاویر یکی از بخشهای بهینهسازی عملکرد سایت است، اما نباید آن را تنها عامل سرعت سایت بدانیم.
عملکرد هاست و سرور، قالب، افزونهها، JavaScript و CSS، سیستم کش، CDN و عوامل متعدد دیگری نیز روی سرعت نهایی سایت تأثیر دارند.
چکلیست آمادهسازی تصویر برای وردپرس
قبل از آپلود یک تصویر در سایت، این موارد را بررسی کنید:
- آیا ابعاد تصویر متناسب با محل استفاده آن است؟
- آیا فرمت مناسبی برای نوع تصویر انتخاب شده است؟
- آیا حجم فایل بدون افت محسوس کیفیت قابل کاهش است؟
- آیا نام فایل واضح و مرتبط است؟
- آیا تصویر واقعاً برای صفحه ضروری است؟
- آیا هنگام استفاده از تصویر، Alt مناسب آن مشخص شده است؟
رعایت همین موارد ساده میتواند در بلندمدت کتابخانه رسانه مرتبتر و صفحات سایت سبکتری ایجاد کند.
جمعبندی
در این جلسه با رسانهها در وردپرس و نحوه مدیریت تصاویر و فایلهای آپلودشده آشنا شدیم. کتابخانه رسانه وردپرس محلی برای مشاهده و مدیریت فایلهای رسانهای سایت است و هنگام استفاده از تصاویر باید به مواردی مانند Alt، نام فایل و مشخصات تصویر توجه داشته باشیم.
همچنین یاد گرفتیم که بهتر است تصاویر را قبل از آپلود، متناسب با محل استفاده آنها آماده کنیم. تعیین ابعاد مناسب، انتخاب فرمت صحیح و ایجاد تعادل میان حجم و کیفیت، سه عامل مهم در گرفتن خروجی مناسب تصویر برای وب هستند.
فتوشاپ ابزار مناسبی برای انجام این کار است و با تنظیم ابعاد و استفاده از قابلیتهای Export میتوان تصاویر را قبل از انتقال به وردپرس آماده کرد.
هدف نهایی این است که تصاویر سایت کیفیت بصری مناسبی داشته باشند، اما سنگینتر از چیزی که واقعاً نیاز داریم نباشند.
سوالات متداول
بهترین فرمت عکس برای وردپرس چیست؟
یک فرمت واحد برای تمام تصاویر بهترین نیست. JPEG برای بسیاری از عکسها مناسب است، PNG در مواردی مانند نیاز به شفافیت کاربرد دارد و WebP نیز میتواند برای بسیاری از تصاویر وب، حجم و کیفیت مناسبی ارائه دهد.
آیا WebP برای وردپرس مناسب است؟
بله. نسخههای جدید وردپرس از WebP پشتیبانی میکنند و این فرمت در بسیاری از شرایط میتواند گزینه مناسبی برای تصاویر وب باشد.
آیا تصاویر سایت حتماً باید 72 DPI باشند؟
برای نمایش معمول تصاویر در صفحات وب، ابعاد پیکسلی تصویر اهمیت مستقیم بیشتری نسبت به عدد DPI دارد. بنابراین صرفاً تغییر DPI به 72 راه اصلی بهینهسازی تصاویر سایت محسوب نمیشود.
بهترین حجم عکس برای سایت چقدر است؟
عدد ثابتی برای تمام تصاویر وجود ندارد. حجم مناسب به ابعاد، نوع تصویر، فرمت و محل نمایش آن بستگی دارد. هدف باید رسیدن به کمترین حجم منطقی بدون افت محسوس کیفیت باشد.
آیا Alt تصاویر روی سئو تأثیر دارد؟
Alt در درجه اول برای دسترسپذیری و ارائه جایگزین متنی مناسب برای تصویر اهمیت دارد و همچنین به موتورهای جستوجو در درک محتوای تصاویر کمک میکند. بهتر است Alt را توصیفی و طبیعی بنویسید و از تکرار مصنوعی کلمات کلیدی خودداری کنید.
آیا بهتر است تصاویر را قبل از آپلود در وردپرس با فتوشاپ کمحجم کنیم؟
آمادهسازی تصاویر قبل از آپلود میتواند روش خوبی باشد. با تنظیم ابعاد، انتخاب فرمت مناسب و فشردهسازی منطقی میتوانید از آپلود فایلهایی که بسیار بزرگتر از نیاز واقعی سایت هستند جلوگیری کنید.
دیدگاهها
هنوز دیدگاهی ثبت نشده است. اولین نفر باشید که نظرش را مینویسد.