Làm thế nào để tạo ảnh giữ chỗ với kích thước chính xác?

Nhập Chiều rộng (px) và Chiều cao (px), chọn màu hoặc chủ đề màu, sau đó nhấn Tải PNG, Tải JPG hoặc Tải SVG. Mặc định ảnh sẽ hiển thị kích thước của nó, chẳng hạn như 800 x 600, làm nhãn.

Ảnh giữ chỗ lớn nhất tôi có thể tạo là bao nhiêu?

Chiều rộng và chiều cao mỗi chiều phải từ 1 đến 4000 pixel. Giá trị ngoài phạm vi đó sẽ hiển thị lỗi Chiều rộng và chiều cao phải từ 1 đến 4000 px.

Làm thế nào để đặt ảnh giữ chỗ trực tiếp vào HTML mà không cần tệp?

Nhấn Sao chép dạng data URL và dán vào thẻ img làm giá trị src. Bạn cũng có thể dùng Sao chép đoạn mã HTML hoặc Sao chép nền CSS. Không cần máy chủ lưu trữ ảnh bên ngoài.

Tôi có thể tạo kích thước chuẩn cho mạng xã hội hoặc web không?

Có. Kích thước định sẵn bao gồm Bài đăng Instagram, Câu chuyện Instagram, Thẻ Twitter, Open Graph, Hình thu nhỏ YouTube, Bìa Facebook và Tiêu đề email. Tải tất cả các bộ cài đặt (ZIP) lưu tất cả mười một kích thước dưới dạng tệp PNG.

Làm thế nào để đặt văn bản của riêng tôi hoặc đường chéo lên ảnh giữ chỗ?

Nhập nhãn vào Văn bản tùy chỉnh, ví dụ Ảnh hero, thay vì hiển thị kích thước. Chọn Hiện đường chéo (X) để vẽ các đường chéo mờ. Văn bản dài sẽ tự động thu nhỏ để vừa chiều rộng.

Có thật sự miễn phí không?

Có. Mọi công cụ đều miễn phí sử dụng, không cần tài khoản hay thẻ tín dụng. Công việc được thực hiện trên thiết bị của bạn thay vì máy chủ của chúng tôi, đó là điều giúp công cụ luôn miễn phí.

Có hoạt động trên di động không?

Có. Công cụ chạy trên các trình duyệt di động hiện nay của iOS và Android, không cần cài đặt gì.

🖼️

Tạo Ảnh Giữ Chỗ miễn phí

Tạo ảnh giữ chỗ có màu sắc với kích thước tùy chỉnh, văn bản và màu sắc. Kích thước chuẩn cho mạng xã hội, mockup và thiết kế comp.

Chạy trên trình duyệtKhông đăng ký, không pop-upKhông cần đăng nhậpMiễn phí mãi mãi

Chiều rộng (px)

Chiều cao (px)

Kích thước định sẵn

Bảng màu

Nền

Văn bản / đường kẻ

Văn bản tùy chỉnh (để trống để hiện kích thước)

Hiện kích thước nếu không có văn bản tùy chỉnhHiện đường chéo (X)

💡 Cho mockup HTML: dùng tùy chọn 'Sao chép dạng data URL' và dán vào <img src='...'> để tạo placeholder nội dòng. Cho thiết kế Figma / Sketch, tải PNG và kéo vào.

Công dụng phổ biến

Hình Ảnh Trình Giữ Chỗ cho Bản Mẫu Thiết KếTạo các hộp màu kích thước để sử dụng trong Figma, Sketch hoặc các bản mẫu thiết kế web trước khi các hình ảnh thực sẽ sẵn sàng.
Trình Giữ Chỗ Nội Tuyến cho Nguyên Mẫu HTMLSử dụng 'Sao chép dưới dạng URL dữ liệu' để nhúng các hình ảnh trình giữ chỗ trực tiếp vào HTML cho các nguyên mẫu nhanh.
Trình Giữ Chỗ cho Khe CMSKhi bạn giới thiệu một mẫu CMS, hãy sử dụng hình ảnh trình giữ chỗ thay vì nội dung thực cho các bản xem trước nhạy cảm.
Mẫu Hình Ảnh Phương Tiện Truyền Thông Xã HộiTạo các trình giữ chỗ có kích thước chính xác cho các mẫu bài đăng Instagram, Facebook, Twitter, LinkedIn.
Hình Ảnh Kiểm Tra Bố Cục CSSTạo hình ảnh ở tỷ lệ khung hình cực kỳ để kiểm tra căng bố cục CSS đáp ứng.

Cách hoạt động

Mọi thứ diễn ra trong trình duyệt bằng HTML Canvas API và mã SVG tự viết — không máy chủ, không tải lên, không dịch vụ bên thứ ba. Bạn đặt kích thước, màu sắc và văn bản nhãn, và công cụ vẽ ảnh trực tiếp lên phần tử canvas theo thời gian thực, rồi tuần tự hóa sang PNG, JPEG hoặc SVG khi cần.

1
Cấu hình kích thước và màu sắc
Nhập chiều rộng và chiều cao (mỗi chiều 1–4000 px), hoặc chọn một trong mười một kích thước đặt sẵn cho mạng xã hội và thiết kế phổ biến. Chọn màu nền và màu chữ từ các chủ đề tích hợp hoặc nhập trực tiếp giá trị hex bất kỳ; bộ chọn màu gốc và ô văn bản đã kiểm tra luôn đồng bộ.
2
Canvas API hiển thị bản xem trước tức thì
Một React effect gọi drawPlaceholder() mỗi khi có thay đổi. Hàm này dùng CanvasRenderingContext2D để tô hình chữ nhật bằng màu nền, tùy chọn vẽ các đường chéo mờ ở độ mờ đục 15%, rồi đo và căn giữa văn bản nhãn — tự động thu nhỏ phông chữ cho đến khi vừa trong 90% chiều rộng canvas.
3
Xuất dạng PNG, JPEG hoặc SVG
Tải PNG và JPEG gọi canvas.toDataURL(), chuyển kết quả base64 thành Blob trong bộ nhớ và kích hoạt tải về — tất cả đồng bộ trong thao tác của người dùng để đáp ứng quy tắc tải về của iOS Safari. Xuất SVG tạo chuỗi SVG độc lập với rect tương ứng, các đường chéo tùy chọn và phần tử text, rồi lưu thành tệp .svg.
4
Xuất hàng loạt và phím tắt sao chép
Nút 'Tải tất cả kích thước đặt sẵn' nhập động JSZip, vẽ lại từng kích thước trong mười một kích thước đặt sẵn lên canvas ngoài màn hình bằng cùng hàm vẽ, và đóng gói mọi PNG vào một ZIP. Các nút sao chép xuất PNG data URL, thẻ img SVG nội tuyến hoặc khai báo CSS background-image để dán ngay vào mã.