Trình Tạo Ảnh Placeholder / Lorem Picsum

Trình tạo ảnh Placeholder Lorem Picsum là một công cụ miễn phí trên trình duyệt giúp tạo ra các hình ảnh placeholder hoàn hảo từng pixel cho các bản phác thảo, wireframe, nguyên mẫu và phát triển front-end. Đặt bất kỳ chiều rộng và chiều cao nào lên đến 4000 pixel, chọn màu sắc của bạn, thêm văn bản tùy chỉnh và bản xem trước được hỗ trợ bởi canvas sẽ cập nhật ngay lập tức — không cần truyền tải máy chủ, không cần chờ đợi. Tải xuống dưới dạng PNG, JPG, WEBP hoặc SVG, hoặc lấy các đoạn mã HTML / Markdown / React sẵn sàng để dán và các URL hotlink cho Lorem Picsum, Placehold.co và DummyImage.

Ảnh Placeholder là gì và tại sao tôi cần nó?

Ảnh placeholder (ảnh giữ chỗ) là một hình ảnh tạm thời được sử dụng trong giai đoạn thiết kế và phát triển trang web hoặc ứng dụng. Nó giữ không gian cho hình ảnh cuối cùng để các nhà thiết kế và lập trình viên có thể bố trí nội dung, kiểm tra tính tương thích và xem xét các bản phác thảo trước khi có ảnh hoặc đồ họa thực tế. Placeholder rất cần thiết cho wireframe, nguyên mẫu, mẫu email và kiểm tra front-end. Không có chúng, bố cục sẽ bị sụp đổ, các quy tắc CSS hoạt động sai lệch và các bên liên quan không thể hình dung ra thiết kế hoàn thiện.

Các trường hợp sử dụng phổ biến

• Wireframe & phác thảo — cho khách hàng thấy chính xác nơi mỗi hình ảnh sẽ nằm và với kích thước bao nhiêu.
• Tạo nguyên mẫu front-end — phát triển bố cục tương thích trước khi các tài nguyên cuối cùng được bàn giao.
• Kiểm tra CMS — điền vào các bài đăng và trang sản phẩm thử nghiệm với kích thước hình ảnh thực tế.
• Mẫu email — giữ chỗ cho banner và ảnh sản phẩm trong các chiến dịch marketing.
• Tài liệu & hệ thống thiết kế — minh họa tỷ lệ khung hình, khoảng cách và các điểm dừng (breakpoint).
• Kiểm tra lazy-load — tạo các hình ảnh lớn nhanh chóng để kiểm tra chiến lược tải hình ảnh.

Sự khác biệt giữa Lorem Picsum và Placehold.co là gì?

Lorem Picsum (picsum.photos) trả về một bức ảnh thực ngẫu nhiên ở kích thước yêu cầu, rất phù hợp cho các bản phác thảo thực tế. Placehold.co và DummyImage trả về các hình chữ nhật màu đơn sắc với kích thước được in ở giữa, lý tưởng cho wireframe và hiển thị chính xác vị trí một hình ảnh có kích thước nhất định sẽ nằm. Trình tạo này xây dựng URL cho cả hai phong cách ở cùng một nơi, đồng thời tạo ra các hình ảnh đơn sắc, gradient hoặc caro được vẽ bằng canvas mà bạn có thể tải xuống dưới dạng tệp.

Làm cách nào để tạo một bộ ảnh placeholder hỗ trợ retina?

Đặt chiều rộng và chiều cao cơ bản của bạn, sau đó nhấp vào Tạo URL & Đoạn mã để hiển thị bảng kết quả và nhấp vào Tải xuống 1x / 2x / 3x. Công cụ tạo ra ba bản sao của cùng một ảnh placeholder ở tỷ lệ 1×, 2× và 3×, sẵn sàng để sử dụng trong các thuộc tính srcset cho màn hình DPI cao. Mỗi tệp được tải xuống với tên tệp rõ ràng như [email protected].

Tại sao bản xem trước cập nhật mà không cần yêu cầu máy chủ?

Hình ảnh được vẽ hoàn toàn trong trình duyệt của bạn bằng HTML Canvas API. Mọi thay đổi về chiều rộng, chiều cao, màu sắc hoặc văn bản sẽ hiển thị lại ngay lập tức mà không cần truyền tải mạng. Điều này có nghĩa là công cụ rất nhanh, hoạt động ngoại tuyến sau khi tải và không bao giờ gửi các lựa chọn thiết kế của bạn đến bất kỳ máy chủ nào. Khi bạn hài lòng với bản xem trước, chính canvas đó sẽ được xuất thành tệp có thể tải xuống hoặc sao chép dưới dạng data URL base64.

Tôi có thể tải xuống những định dạng hình ảnh nào?

Bạn có thể tải xuống ảnh placeholder đã tạo dưới dạng:

• PNG — không mất dữ liệu, hỗ trợ độ trong suốt, tốt nhất cho màu đơn sắc và văn bản sắc nét.
• JPG — kích thước tệp nhỏ hơn, tuyệt vời cho nội dung giống ảnh chụp nơi có thể chấp nhận một vài vết nén.
• WEBP — định dạng hiện đại với độ nén tốt nhất ở cùng chất lượng. Được hỗ trợ bởi tất cả các trình duyệt hiện đại.
• SVG — định dạng vector, có thể mở rộng vô hạn, kích thước tệp cực nhỏ cho nền đơn sắc và gradient.
• Data URL Base64 — sao chép hình ảnh dưới dạng văn bản để dán trực tiếp vào HTML hoặc CSS.

Cách sử dụng công cụ này

1. Chọn kích thước: Nhập chiều rộng và chiều cao bằng pixel, hoặc nhấp vào một trong các cài đặt kích thước có sẵn như Avatar, Banner, Hero hoặc Twitter Card.
2. Chọn kiểu nền: Đơn sắc cho màu phẳng, Gradient cho sự pha trộn hai màu, hoặc Caro cho nền kiểu trong suốt.
3. Thiết lập màu sắc: Sử dụng bộ chọn màu, nhập mã hex trực tiếp hoặc nhấp vào mẫu bảng màu nhanh.
4. Thêm văn bản tùy chỉnh (tùy chọn): Để trống để hiển thị kích thước tự động (ví dụ: 600 × 400).
5. Xem bản xem trước trực tiếp: Canvas cập nhật theo từng phím nhấn — không cần nhấn gửi.
6. Tải xuống hoặc tạo URL: Nhấp vào Tải xuống hình ảnh để nhận tệp ngay lập tức, hoặc Tạo URL & Đoạn mã để lấy URL hotlink và mã sao chép-dán.

Tham khảo nhanh kích thước

Mẹo để có kết quả tốt nhất

• Khóa tỷ lệ khung hình khi thay đổi kích thước để giữ nguyên tỷ lệ — hữu ích cho các bộ ảnh phản hồi.
• Sử dụng kiểu nền Caro khi thiết kế cho lớp phủ trong suốt, để mô phỏng cách hiển thị độ trong suốt.
• Chọn màu sắc có độ tương phản cao (chữ tối trên nền sáng, hoặc ngược lại) để nhãn kích thước dễ đọc.
• Giữ văn bản ngắn gọn — các nhãn dài sẽ tự động co lại, nhưng từ bốn đến mười hai ký tự trông sẽ gọn gàng nhất.
• SVG để mở rộng sắc nét — đối với các thiết kế sẽ được hiển thị ở nhiều kích thước, SVG sẽ sắc nét hơn ở mọi mức độ thu phóng.
• WEBP cho sản phẩm thực tế — nhỏ hơn khoảng 30% so với JPG ở chất lượng tương đương, với sự hỗ trợ tuyệt vời từ trình duyệt.

Tôi có thể sử dụng các hình ảnh được tạo trong dự án thương mại không?

Các hình ảnh tùy chỉnh được tạo bởi trình tạo canvas của công cụ này (bản xem trước màu đơn sắc bạn tải xuống) là 100% của bạn và có thể được sử dụng ở bất kỳ đâu mà không có hạn chế. Ảnh Lorem Picsum được cấp phép theo giấy phép Unsplash và miễn phí cho mục đích thương mại và cá nhân. Placehold.co và DummyImage cũng miễn phí sử dụng, nhưng hãy luôn kiểm tra các điều khoản hiện tại của mỗi dịch vụ trước khi xuất bản sản phẩm chính thức.

Câu hỏi thường gặp

Có kích thước hình ảnh tối đa không?

Công cụ này hỗ trợ kích thước lên đến 4000 × 4000 pixel mỗi chiều, bao gồm hầu hết mọi trường hợp sử dụng thực tế như ảnh hero DPI cao và màn hình 4K. Trình duyệt sẽ thực hiện các tác vụ nặng, vì vậy các canvas rất lớn có thể làm chậm bản xem trước một chút trên các thiết bị cũ.

Tôi có thể tạo placeholder trong suốt không?

Có — hãy tải xuống dưới dạng PNG hoặc SVG, và sử dụng chế độ nền Caro để hình dung cách hiển thị độ trong suốt. Để tải xuống bản hoàn toàn trong suốt, hãy đặt màu nền và màu phụ về cùng một giá trị và chọn định dạng PNG.

Hình ảnh có hoạt động trong Photoshop, Figma hoặc Sketch không?

Chắc chắn rồi. PNG, JPG, WEBP và SVG đều là các định dạng hình ảnh tiêu chuẩn được hỗ trợ bởi mọi công cụ thiết kế hiện đại. Chỉ cần kéo và thả tệp đã tải xuống vào canvas của bạn, hoặc sử dụng data URL trực tiếp trong CSS cho ảnh nền nhúng.

Tại sao nên dùng công cụ này thay vì chỉ nhập URL Placehold.co?

Ba lý do: (1) bản xem trước trực tiếp trước khi bạn chốt URL — bạn thấy chính xác những gì mình sẽ nhận được; (2) sao chép chỉ với một cú nhấp chuột cho HTML, Markdown, JSX, CSS và BBCode cùng lúc; (3) tệp tự lưu trữ có thể tải xuống để sử dụng ngoại tuyến hoặc cho các dự án không thể phụ thuộc vào dịch vụ bên thứ ba.

Nó có hoạt động trên thiết bị di động không?

Có, toàn bộ giao diện tương thích với màn hình điện thoại và máy tính bảng. Bản xem trước canvas sẽ co giãn cho phù hợp, các điều khiển xếp chồng theo chiều dọc và tất cả các hành động tải xuống / sao chép hoạt động thông qua clipboard API của di động.

Tôi có thể tạo hàng loạt nhiều kích thước cùng lúc không?

Nút Bộ Retina sẽ tải xuống 1×, 2× và 3× kích thước hiện tại của bạn chỉ với một cú nhấp chuột. Đối với các bộ khác, chỉ cần nhấp vào từng chip kích thước có sẵn và tải xuống — canvas hiển thị lại với tốc độ hơn 60 FPS nên việc lặp lại rất nhanh chóng.

Công cụ liên quan

• Image Resizer — thay đổi kích thước ảnh hiện có sang bất kỳ chiều rộng / chiều cao nào.
• Image Compressor — nén kích thước tệp trước khi đưa vào sản xuất.
• Color Scheme Generator — chọn bảng màu cho ảnh placeholder của bạn.
• CSS Gradient Generator — thiết kế gradient cho hình nền.

Tài nguyên bổ sung

• Lorem Picsum — Dịch vụ ảnh ngẫu nhiên miễn phí
• Placehold.co — Dịch vụ placeholder hiện đại
• MDN: img element & srcset
• Lorem ipsum — lịch sử nội dung placeholder