მთავარ შინაარსზე გადასვლა

სურათი Base64-ად უფასოდ

გადაიყვანეთ სურათი Base64 data URI-ად inline გამოყენებისთვის CSS-ში, HTML-ში ან Markdown-ში. დააკოპირეთ მზა სნიპეტები. კოდირება ხდება ბრაუზერში; არასოდეს იტვირთება.

მუშაობს ოფლაინ ჩატვირთვის შემდეგ

ჩააგდეთ ფაილი აქ ან დააწკაპუნეთ არჩევისთვის

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · მუშავდება თქვენს მოწყობილობაზე

ან დააჭირეთ Ctrl+V-ს ბუფერიდან ჩასასმელად

ფაილების დათვალიერება

რჩევა: ასევე შეგიძლიათ ჩასვათ სურათი კლიპბორდიდან (Ctrl+V).

თქვენი ფაილები არასოდეს ტოვებს თქვენს მოწყობილობას. ყველა დამუშავება ხდება ადგილობრივად თქვენს ბრაუზერში.

სურათს გარდაქმნის Base64 data URI-ად, რომლის პირდაპირ ჩასმა შეგიძლიათ CSS-ში, HTML-ში ან Markdown-ში — ცალკე ფაილი საჭირო არ არის. კოდირებულია ბრაუზერში, არასდროს იტვირთება.

გავრცელებული გამოყენება

  • Inline სურათი CSSშენდება პატარა იკონა ან ფონი როგორც მონაცემი URI თქვენი სტილი ფურცლიდან.
  • შენდება სურათი HTMLInline ლოგო ან იკონა პირდაპირი ხელმისაწვდომი HTML.
  • Convert SVG ან იკონა Base64გადაკეთება პატარა იკონა მონაცემი URI წლის inline.
  • შენდება სურათი MarkdownInline პატარა სურათი Markdown ფაილი მონაცემი URI.
  • მივიღო სურათი მონაცემი URIწარმოების ნედლი მონაცემი: URI რომელი შეგიძლიათ გამოიყენოთ ყოველ ადგილას.

როგორ მუშაობს

data URI embed-ებს image direct-ს თქვენი code-ში როგორც text, იმისათვის რომ ის load-ი ხდება separate file request-ის გარეშე — handy small icons და self-contained HTML-სთვის. ეს encodes-ი თქვენი ბრაუზერში.

  1. 1
    თქვენ ჩააგდებთ image-ს
    ის read ხდება ლოკალურად FileReader API-ის გამოყენებით — არასდროს იტვირთება.
  2. 2
    ის Base64-encoded ხდება
    image bytes ხდება data: URI (data:image/...;base64,…) ზუსტი თქვენი ბრაუზერში.
  3. 3
    თქვენ pick-ებთ snippet-ს
    Copy raw data URI, ან ready-made CSS (background-image), HTML (<img>), ან Markdown.
  4. 4
    Paste-ებთ თქვენი code-ში
    image ახლა travels inline თქვენი CSS/HTML-ის გამოყენებით — არ აქვს extra file to host.

image encoded ხდება მთლიანად თქვენი მოწყობილობაზე. Note რომ Base64 ხდება ~33% larger than original, ამიტომ data URIs best are small images-სთვის.

დაკავშირებული ინსტრუმენტები

ხშირად დასმული კითხვები