اندازه تصویر برای وب سایت‌ها نقش مهمی در ارزیابی یک وب سایت چشمگیر ایفا می کند. طراحی وب سایت شما می تواند اساسی، منحصر به فرد یا بر اساس یک موضوع از پیش طراحی شده باشد. شما همچنین می توانید از ابتدا یک وبسایت سفارشی ایجاد کنید.
با این حال، اگر اولین باری است که برای یک وبسایت با تصاویر ایجاد می‌کنید، راهنمایی ما می‌تواند به شما در شروع کارتان کمک کند. در اینجا دستورالعمل ها و توصیه هایی برای دریافت بهترین مشخصات تصویر برای یک وب سایت کاربردی پیدا خواهید کرد.
اندازه‌های تصویر توصیه شده برای وب سایت‌ها
در اینجا جدولی رو مشاهده می‌کنید که اندازه های استاندارد تصویر برای صفحات وب را ارائه می‌دهد. بهترین گزینه برای دسکتاپ انتخاب 1920 * 1080 پیکسل است (که طبق آمار محبوب ترین است).
| نوع تصویر | ابعاد | نسبت تصویر |
| تصویر پس زمینه | 1080 * 1920 | 16:9 |
| تصویر پیش نمایش(هیرو) | 720 * 1280 | 16:9 |
| بنر وبسایت | 250 * 250 | 1:1 |
| تصویر وبلاگ | 630 * 1200 | 3:2 |
| لوگو (مستطیل) | 100 * 250 | 2:3 |
| لوگو ( مربع) | 100 * 100 | 1:1 |
| فاویکون | 16 * 16 | 1:1 |
| آیکون رسانه های اجتماعی | 32 * 32 | 1:1 |
| تصاویر لایت باکس (تمام صفحه) | 500 * 1600 | 16:9 |
| تصویر کوچک | 150 * 150 | 1:1 |
نه تنها ابعاد تصویر، بلکه اندازه فایل تصویر نیز مهم است. مطمئن شوید که تصاویر وب سایت خود را فشرده کرده اید . شما میتوانید ابزار فشرده سازی تصویر آنلاین را در TinyIMG به صورت رایگان امتحان کنید!
دستورالعمل‌های تصویری وب سایت 2023
اندازه تصویر صرف نظر از اینکه، نوع فایل تصویری استفاده شده تا حد زیادی به تجربه کاربر، بهینه سازی موتور جستجو و عملکرد کلی وب سایت یس. کلید یک وب سایت عالی، اندازه تصاویر است. در اینجا یک مرور کلی از دستورالعمل ها برای مشخصات کلی اندازه تصویر در سراسر وب سایت ها ارائه شده است.
اندازه تصویر پس‌زمینه
ارتفع : 1080 پیکسل
عرض : 1920 پیکسل
نسبت تصویر : 16:9
رزولوشن عکس : 72
مواردی که باید در نظر بگیرید: بسته به طراحی وب سایت، اندازه تصویر پس زمینه می تواند تا 2400 پیکسل در 1600 پیکسل و اندازه فایل باید کمتر از 20 مگابایت باشد.
یک تصویر پس‌زمینه در وبسایت می‌تواند با در نظر گرفتن چشم انداز، یک تجربه مفید را ارائه دهد. این تصاویر پس‌زمینه موجب افزایش فاکتور شگفت‌انگیزی در برند‌ها می‌شوند، به طوری که از کیفیت و اندازه نسبتا مناسبی برخوردار هستند.
تا زمانی که مقدار پیکسل در اینچ ۷۲ باشد، میتوانید اندازه تصویر پس‌زمینه را تا 2400 در 1600 پیکسل یا نسبت ابعاد 16 : 9 آپلود کنید. با این حال، اندازه ایده‌آل 1920 پیکسل تا 1080 پیکسل است. هنگامی که در اندازه توصیه شده آپلود می‌شود، تصاویر پس‌زمینه با توجه به قالب سایت، کوچک یا بزرگ می‌شوند. بنابراین، تصویر پس‌زمینه آپلود شده می‌تواند بزرگ ترین تصویر آپلود شده در وب سایت تا ۲۰ مگابایت باشد.
انتخاب تصاویر با زاویه باز موجب می شود تا تصاویر پس زمینه هدف مورد نظر خود را اجرا کنند. با این حال، کوچک نگه داشتن اندازه فایل تصاویر بدون افت کیفیت برای زمان بارگذاری سریع بسیار مهم است. نرم‌افزار فشرده‌سازی تصویر آنلاین مانند TinyIMG می‌تواند کیفیت را حفظ کرده و اندازه فایل تصویر پس‌زمینه را کاهش دهد.
اندازه تصویر پیش نمایش
ارتفاع : 720 پیکسل
عرض : 1280 پیکسل
نسبت تصویر : 16:9
رزولوشن عکس : 72
مواردی که باید در نظر بگیرید: بسته به طراحی تصویر وبسایت، شما می توانید تا عرض 1800 پیکسل استفاده کنید.
تصاویر پیش نمایش می توانند کل ارتفاع یا نیمی از ارتفاع یک صفحه را بگیرند. تصاویر هیرو با اندازه تصویر 1280 پیکسل در 720 پیکسل با نسبت تصویر 16:9 به خوبی نمایش داده می شوند. اگر تصاویر هیرو جنبه مرکزی وب سایت باشند، میتوانند تا عرض 1800 پیکسل به اثر دلخواه برسد. سرعت بارگذاری وبسایت می تواند تحت تاثیر وضوح تصویر باشد.
بنابراین، حفظ رزولوشن 72 از تصاویر پیش نمایش، وضوح و اندازه فایل کوچک را برای بهترین نتیجه فراهم می کند. به عنوان یک قانون مهم، سرعت بارگذاری توصیه شده یک صفحه وب برای ترافیک بهینه و اهداف سئو باید 2 ثانیه باشد.
امروزه 90 درصد از ترافیک وبسایت ها از دستگاه‌های تلفن همراه تولید می شود. در وب‌سایت‌های موبایل، تصاویر پیش نمایش به خوبی در سایز 800 پیکسل در 1200 پیکسل نمایش داده می‌شوند. با این حال، سیستم های مدیریت محتوا به طور خودکار تصاویر را متناسب با مرورگر دستگاه تلفن همراه مقیاس گذاری می کنند.
اندازه بنر وب سایت
ارتفاع : 250 پیکسل
عرض : 250 پیکسل
نسبت تصویر : 1:1
رزولوشن : 72
بنرهای تبلیغاتی وب سایت را می توان در اندازه‌های مختلفی تقسیم کرد. بنرهای عمودی، نقاشی،تابلوی اعلانات، تمام صفحه یا نیم صفحه و بنرهای مربعی رایج ترین انواع تصاویر بنر وب سایت هستند. اکثر وب سایت ها اندازه تصویر مورد نیاز برای بنر را 250 در 250 پیکسل یا نسبت تصویر 1:1 را انتخاب می کنند.
بنرهای عمودی و اسکراپر در ابعاد 160 در 600 پیکسل محبوب هستند. تصاویر بنر باید با توجه به ابعاد مورد نیاز طراحی شده و در اندازه فایل تصویری کوچک فشرده شوند.
دستگاه های تلفن همراه تصاویر بنر را زمانی که 1:9، 1:1، 1:1 یا 4:5 هستند به خوبی نمایش می دهند. همچنین به یاد داشته باشید که اندازه فایل‌های تصاویر باید تا حد امکان بدون کاهش کیفیت، کوچک باشد. بزرگترین اندازه تصویر در یک وب سایت نباید بیشتر از 20 مگابایت باشد.
اندازه تصویر وبلاگ
ارتفاع : 630 پیکسل
عرض : 1200 پیکسل
نسبت تصویر : 3:2
رزولوشن عکس : 72
مواردی که باید در نظر بگیرید: هنگام انتخاب اندازه تصویر، ناحیه فلد ( یعنی قسمت قابل مشاهده در انتهای اسکرول) را در نظر بگیرید. اگر تصویر مهم است باید از اندازه تصویر بزرگتر استفاده شود. اگر متن مهم باشد، می توانید اندازه تصویر را کمتر کنید یا به کل محو کنید.
هنگام آپلود تصاویر وبلاگ، به یاد داشته باشید که این تصاویر باید برای اشتراک گذاری در کانال های رسانه های اجتماعی هم مناسب باشند. به طور کلی، تصاویر وبلاگ به خوبی در یک وب سایت با نسبت تصویر 3:2 یا 1200 پیکسل در 630 پیکسل قرار می گیرد. تصاویر وبلاگ در فرمت افقی بهترین اندازه 1200 پیکسل در 900 پیکسل است و بهترین فرمت برای تصاویر با فرمت عمودی اندازه 900 پیکسل در 1200 پیکسل است.
تصاویر با کیفیت بالا با اندازه کوچک باید برای تصاویر وبلاگ آپلود شوند. برای تصاویر وبلاگ، بزرگترین اندازه فایل توصیه شده 150 کیلوبایت است. هرچه حجم فایل کمتر باشد، سرعت وبلاگ بهتر است. برای اینکه سیستم مدیریت محتوا تصاویر وبلاگ را با اندازه های مختلف تطبیق دهند، باید رزولوشن 72 با ناحیه فوکوس در مرکز باشد.
اندازه لوگو
ارتفاع : 100 پیکسل
عرض : 250 پیکسل
نسبت تصویر : 2:3
رزولوشن عکس : 72
مواردی که باید در نظر بگیرید: تصاویر لوگو می توانند مربع یا مستطیل باشند. بنابراین می توانید از نسبت تصویر 1:1 یا 2:3 استفاده کنید.
لوگوی وب سایت حیاتی ترین عنصری است که از برند و تمام محتوای وب سایت صحبت می کند. در اکثر وب سایت ها، لوگوها در گوشه سمت چپ بالای صفحه یا در مرکز بالا نمایش داده می شوند. لوگوها معمولاً در قالب مربع با نسبت ابعاد 1:1 یا قالب مستطیل 2:3 آپلود می شوند.
فرمت PNG برای فایل‌های لوگو است زیرا دارای پس‌زمینه شفافی برای ترکیب در وبسایت هستند. دردسکتاپ ها، برای لوگوهایی با عرض های مختلف حداکثر ارتفاع 100 پیکسل توصیه می شود.
اگر هنوز لوگو ندارید، میتوانید با استفاده از یکی از بهترین سازندگان لوگو آنلاین یعنی آی بنر، یک لوگو جذاب برای کسب و کارتان طراحی کنید.
اندازه فاویکون
ارتفاع : 16 یا 32 پیکسل
عرض : 16 یا 32 پیکسل
نسبت تصویر : 1:1
رزولوشن عکس : 72
اندازه مطلوب برای فاو آیکون ها در وبسایت ها 16 پیکسل در 16 پیکسل، 32 پیکسل در 32 پیکسل یا نسبت تصویر 1:1 است. این اندازه همان چیزی است که همه مرورگرها برای نمایش فاویکون ها از آن استفاده می کنند.
استانداردترین فرمت ها برای فاویکون ها ICO و PNG است که متناسب با مرورگرها هستند. چندین ابزار با دسترسی آسان می توانند یک لوگو را به فاویکون مناسب برای آپلود در یک وب سایت تبدیل کنند.
توصیه های اندازه تصویر موبایل
اکثر وب سایت های واکنش گرا به طور خودکار اندازه همه تصاویر را برای نمایش در دستگاه های تلفن همراه تغییر می دهند. اندازه های تصویر باید به گونه ای طراحی شوند که با نسخه های موبایلی وب سایت هایی مانند وب سایت های دسکتاپ مطابقت داشته باشند. اگر تصاویر دسکتاپ خیلی بزرگ باشند، نمایشگر در دستگاه های تلفن همراه افتضاح می شود. بنابراین، باید ابعاد درستی برای مقیاس‌بندی خودکار روی موبایل تنظیم کرد.
تصاویر با نسبت 1:1 برای نمایش در دستگاه های تلفن همراه مشکلی نخواهند داشت. با این حال، بسته به تنظیم تغییر اندازه خودکار، ممکن است برخی از برش ها در دستگاه های تلفن همراه برای تصاویر با نسبت ابعاد 16:9 یا 3:2 رخ دهد. به همین دلیل، بهترین رویکرد برای تصاویر واکنش‌گرا، نگه داشتن ناحیه فوکوس سوژه در وسط است.
مطالب مرتبط: نحوه فشرده سازی تصاویر برای وب
چرا اندازه تصویر برای وب سایت ها مهم است؟
یکی از اولین مواردی که یک متخصص سئو توصیه می کند اندازه تصویر عناصر رسانه ای در وب سایت است. آپلود تصاویر بزرگ در وب سایت ها برای عملکرد کلی وب سایت معکوس است. فضای ذخیره سازی وب سایت مصرف می شود و سرعت بارگذاری وب سایت می تواند به شدت کاهش یابد. یکی از رایج ترین اشتباهات سئو نادیده گرفتن سرعت وب است.
وجود یک وب سایت کند موجب کاهش مشتریان بالقوه و دوری از وب سایت شما می‌شود. موتور جستجوی گوگل رتبه وب سایت را پایین می آورد و کسب و کار شما آسیب می بیند.
هنگامی که تصاویری با اندازه کامل برای موضوع وب سایت خود آپلود می کنید، نتایج فقط به یک وب سایت یکپارچه محدود نمی شود. سیستم مدیریت محتوا تصاویر را به درستی نمایش می دهد و شما یک قدم به یک رتبه بندی عالی سئو نزدیک می کند.
از چه فرمت تصویری برای وب استفاده کنیم؟
از آنجایی که می‌توان از فرمت‌های مختلف تصویر در یک وبسایت استفاده کرد، انتخاب آنها کمی سخت است. در اینجا به بررسی برخی از رایج ترین فرمت های تصویری مورد استفاده در وب سایت ها می‌پردازیم:
- JPEG : یکی از رایج ترین فرمت های تصویری است که برای فشرده سازی تصویر مورد استفاده قرار میگیرد. فرمت‌های فایل JPG برای محصولات، وبلاگ ها و تصاویر پس زمینه مورد استفاده در وب سایت ها عالی هستند.
- PNG: یک فرمت تصویری است که امکان شفافیت پس زمینه را فراهم می کند. PNG برای آیکون ها، آرم ها و سایر گرافیک ها عالی است.
- GIF : فرمت فایل GIF یک فرمت فایل تصویری زیبا است که می تواند برای کلیپ های متحرک کوتاه با اندازه فایل های کوچک استفاده شود.
- WEBP : تصاویر WEBP یک فرمت تصویر جدید است که در حال محبوب شدن است. این فرمت حجم فایل‌های کوچک‌تری از تصاویر را نسبت به JPEG با کیفیت عالی ارائه می‌دهد.
سایر جنبه های بهینه سازی تصویر
اطمینان از دقیق بودن ابعاد یک تصویر هنگام در نظر گرفتن SEO وجود دارد. در زیر برخی از جنبه های مهم دیگر برای بهینه سازی تصویر را بیان خواهیم کرد.
فشرده سازی تصویر
هنگامی که یک تصویر فشرده می شود، پیکسل های مشابهی که تصویر را تشکیل می دهند با استفاده از یک نرم افزار فشرده سازی تصویر گروه بندی و متراکم می شوند. حداقل نگه داشتن اندازه فایل تصویری به افزایش زمان بارگذاری وب سایت کمک می کند. جدا از زمان بارگذاری، تجربه کلی کاربر بهبود می یابد. فشرده سازی یک تصویر، هرگونه ابرداده‌ای را که به تصاویر متصل شده است، حذف می کند و آن را برای سئو و عملکرد وب سایت مناسب می سازد. در حالی که با اعمال فشرده سازی تصویر، کیفیت تصویر کاهش می یابد.
بهینه سازی سئوی تصویر
هنگامی که تصاویر برای سئو بهینه سازی می‌شوند به رتبه بندی موتورهای جستجو، سرعت، فضای ذخیره سازی و تجربه کاربری یکپارچه کمک می کنند. ترجیح موتورهای جستجو تصاویری است که در هیچ جای دیگر یافت نمی شوند. جستجوی تصویر برای کاربرانی که به دنبال تصاویری برای الهام بخشیدن و توضیح بصری موضوعات هستند، مهم است. بنابراین، بهینه سازی تصویر به موتورهای جستجو کمک می کند تا محتوای وب سایت شما را درک کنند. در اینجا برخی از عناصر بهینه سازی تصویر برای سئو آورده شده است:
چگونه اندازه تصاویر وب سایت خود را متوجه شیم؟
قالب شاپی فای
شاپی فای به کاربران اجازه می دهد تا تصاویری با ابعاد حداکثر 4472 پیکسل در 4472 پیکسل را با محدودیت 20 مگابایت آپلود کنند. حداقل اندازه مورد نیاز برای تصاویر محصول در 800 پیکسل در 800 پیکسل است.
قالب های وردپرس
اندازه تصویر توصیه شده در وردپرس تا 1024 پیکسل در 1024 پیکسل است.
اکثر قالب های وردپرس دارای یک فایل مستند کامل هستند که به کاربران کمک می کند بهترین اندازه های تصویر را برای موضوع پیدا کنند.اگر اندازه تصویر را متناسب با طراحی و نمایش خود تغییر دادید، آن را یادداشت کنید.
وب سایت های سفارشی
یک توسعه دهنده وب سایت سفارشی معمولاً اسنادی را ارائه می دهد که بهترین اندازه های تصویر را مشخص می کند.
تغییر سایز عکس آنلاین بدون افت کیفیت
تعداد زیادی سایت آنلاین برای تغییر سایز عکس بدون افت کیفیت وجود دارند. برخی از معروف‌ترین این سایت‌ها عبارتند از:
- bulkresizephotos این امکان را به شما می‌دهد که تصاویر را با درگ و دراپ آپلود کرده و حتی فرمت آنها را تغییر دهید.
- در simpleimageresizer میتوانید میزان ریسایز تصویر را با ابزارک تعیین کرده و ابعاد مورد نظر خود را وارد کنید.
- picresize به عنوان یک سایت حرفه‌ای، علاوه بر تغییر سایز بدون افت کیفیت، قابلیت کاهش حجم تصاویر و تبدیل فرمت‌ها را نیز دارد.
