چطور یک تصویر جاینگهدار با اندازه دقیق بسازم؟

Width (px) و Height (px) را تایپ کنید، رنگها یا یک Color theme انتخاب کنید، سپس روی Download PNG، Download JPG یا Download SVG کلیک کنید. بهطور پیشفرض تصویر ابعاد خود را، مانند ۸۰۰ در ۶۰۰، به عنوان برچسب نشان میدهد.

بزرگترین تصویر جاینگهداری که میتوانم تولید کنم چیست؟

عرض و ارتفاع هر کدام باید بین ۱ و ۴۰۰۰ پیکسل باشند. مقادیر خارج از این بازه خطای Width and height must be between 1 and 4000 px را نشان میدهند.

چطور یک تصویر جاینگهدار را مستقیماً و بدون فایل در HTML قرار دهم؟

روی Copy as data URL کلیک کنید و آن را به عنوان مقدار src در یک تگ img قرار دهید. همچنین میتوانید از Copy HTML snippet یا Copy CSS background استفاده کنید. نیازی به میزبان تصویر خارجی نیست.

آیا میتوانم اندازههای استاندارد شبکههای اجتماعی یا وب را تولید کنم؟

بله. Preset sizes شامل Instagram post، Instagram story، Twitter card، Open Graph، YouTube thumbnail، Facebook cover و Email header میشود. Download all presets (ZIP) هر یازده مورد را به صورت فایلهای PNG ذخیره میکند.

چطور متن دلخواه خودم یا خطوط قطری را روی تصویر جاینگهدار قرار دهم؟

یک برچسب در Custom text تایپ کنید، مثلاً Hero image، به جای نمایش ابعاد. برای رسم خطوط قطری کمرنگ، Show diagonal lines (X) را تیک بزنید. متنهای بلند بهطور خودکار کوچک میشوند تا در عرض جا شوند.

آیا واقعاً رایگان است؟

بله. همه ابزارها رایگان هستند، بدون حساب کاربری و بدون کارت اعتباری. پردازش بهجای سرورهای ما روی دستگاه شما انجام میشود و همین است که رایگان ماندن آن را ممکن میکند.

آیا در موبایل کار میکند؟

بله. روی مرورگرهای امروزی موبایل در iOS و اندروید اجرا میشود و نیازی به نصب چیزی نیست.

🖼️

تولید تصویر جای‌نگهدار رایگان

تصاویر جای‌نگهدار رنگی با ابعاد، متن و رنگ‌های دلخواه تولید کنید. اندازه‌های استاندارد برای رسانه‌های اجتماعی، ماکت‌ها و کامپ‌های طراحی.

در مرورگر شما اجرا می‌شودبدون ثبت‌نام، بدون پاپ‌آپورود لازم نیسترایگان برای همیشه

عرض (px)

ارتفاع (px)

اندازه‌های از پیش تعریف‌شده

تم‌های رنگی

پس‌زمینه

متن / خطوط

متن سفارشی (برای نمایش ابعاد خالی بگذارید)

نمایش ابعاد در صورت نبود متن سفارشینمایش خطوط قطری (X)

💡 برای ماکت‌های HTML: از گزینه «کپی به عنوان data URL» استفاده کنید و در <img src="..."> بچسبانید. برای طراحی‌های Figma / Sketch، PNG را دانلود و درگ کنید.

کاربردهای رایج

تصاویر Placeholder برای Mockups طراحیجعبه های رنگی اندازه شده را برای استفاده در Figma، Sketch یا mockups طراحی وب ایجاد کنید قبل از آماده بودن تصاویر واقعی.
Placeholders درخطی برای Mockups HTMLبرای نمونه های سریع، تصاویر placeholder را مستقیماً در HTML جاسازی کنید با استفاده از 'کپی بعنوان Data URL'.
Placeholders برای شکاف محتوای CMSهنگام نمایش الگوی CMS، به جای محتوای واقعی برای پیش نمایش های حساس از تصاویر placeholder استفاده کنید.
الگوهای تصویر رسانه های اجتماعیPlaceholders به اندازه صحیح برای الگوهای پست Instagram، Facebook، Twitter، LinkedIn ایجاد کنید.
تصاویر آزمایش CSS Layoutتصاویر را در نسبت های ابعادی شدید برای آزمایش طرح های CSS واکنش پذیر ایجاد کنید.

نحوه کار

همه‌چیز در مرورگر شما با HTML Canvas API و مارک‌آپ SVG دست‌نویس انجام می‌شود — بدون سرور، بدون آپلود، بدون سرویس شخص‌ثالث. ابعاد، رنگ‌ها و متن برچسب را تنظیم می‌کنید، و ابزار تصویر را مستقیماً روی یک عنصر بوم در زمان واقعی می‌کشد، سپس در صورت نیاز آن را به PNG، JPEG یا SVG خروجی می‌دهد.

1
ابعاد و رنگ‌ها را پیکربندی کنید
یک عرض و ارتفاع (هرکدام ۱ تا ۴۰۰۰ پیکسل) تایپ کنید، یا یکی از یازده پیش‌تنظیمی که اندازه‌های رایج شبکه اجتماعی و طراحی را می‌پوشانند انتخاب کنید. رنگ پس‌زمینه و متن را از تم‌های داخلی انتخاب کنید یا هر مقدار هگز را مستقیماً وارد کنید؛ یک انتخاب‌گر رنگ بومی و یک فیلد متنی اعتبارسنجی‌شده همگام باقی می‌مانند.
2
Canvas API پیش‌نمایش را فوراً رندر می‌کند
یک اثر React drawPlaceholder() را در هر تغییر فراخوانی می‌کند. این تابع از CanvasRenderingContext2D برای پرکردن مستطیل با رنگ پس‌زمینه، به‌طور اختیاری ترسیم خطوط قطری صلیب-موی کم‌رنگ در شفافیت ۱۵٪، سپس اندازه‌گیری و ترازبندی-مرکز متن برچسب شما استفاده می‌کند — به‌طور خودکار فونت را کوچک می‌کند تا در ۹۰٪ عرض بوم جا شود.
3
صدور به‌صورت PNG، JPEG، یا SVG
دانلودهای PNG و JPEG canvas.toDataURL() را فراخوانی می‌کنند، نتیجه base64 را به یک Blob در حافظه تبدیل می‌کنند، و دانلود را راه‌اندازی می‌کنند — همه به‌صورت همزمان درون حرکت کاربر پس قواعد دانلود iOS Safari برآورده می‌شوند. صدور SVG یک رشته SVG خودکفا با یک rect متناظر، خطوط قطری اختیاری، و یک عنصر متن می‌سازد، سپس آن را به‌عنوان یک فایل .svg ذخیره می‌کند.
4
صدور دسته‌ای و میان‌برهای کپی
دکمه 'دانلود همه پیش‌تنظیم‌ها' به‌طور پویا JSZip را وارد می‌کند، هرکدام از یازده اندازه پیش‌تنظیم را روی یک بوم خارج-از-صفحه با استفاده از همان تابع ترسیم دوباره رندر می‌کند، و همه PNGها را در یک ZIP واحد بسته‌بندی می‌کند. دکمه‌های کپی یک URL داده PNG، یک تگ img درون‌خطی SVG، یا یک اعلان background-image مربوط به CSS برای چسباندن فوری در کد ساطع می‌کنند.