1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6845],{36845:(e,t,o)=>{o.d(t,{b:()=>a,o:()=>n});var s=o(75038),r=o(45609),i=o.n(r);let n={"tweet-image":{sections:[{title:"Turn tweets into images you can share anywhere",body:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("p",{children:"A plain screenshot of a post on X usually comes with buttons, replies and the wrong crop. Pika rebuilds the post as a clean card instead: avatar, name, handle, text and photos, on a background you pick, at the size the image is going to be used."}),(0,s.jsx)("p",{children:"Paste a link from x.com or twitter.com and the tweet loads on the canvas. There's no account to create and no watermark on tweet images, so you can export as many as you need."})]})},{title:"What people use tweet images for",body:(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Social proof."})," Put kind words from customers on your landing page, pricing page or checkout, without relying on X's embed script."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Cross-posting."})," Share a post on Instagram, LinkedIn or Threads as an image sized for that feed."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Newsletters and blog posts."})," An image shows the same everywhere, even in email clients that block embeds."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Slides and decks."})," Quote a post in a talk or pitch deck with a background that matches your slides."]})]})},{title:"Tips for a clean tweet image",body:(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Choose the canvas size first (Tweet, Instagram post or story, LinkedIn post or square), then adjust Tweet Width and Tweet Size until the card sits comfortably in the frame."}),(0,s.jsx)("li",{children:"Long post? Lower the font size so the card doesn't outgrow the canvas."}),(0,s.jsx)("li",{children:"Turn off Show Images when the attached photo distracts from the text, or leave it on when the photo is the point."}),(0,s.jsx)("li",{children:"A soft gradient behind a light card with some shadow keeps the text easy to read. With Pro you can also set the card and text colors, for example a dark card with light text, and show the date, the X logo and like and repost counts."})]})}],related:[{title:"Testimonial image template",href:"/templates/testimonial-quote-design-template",description:"Turn quotes from any source into testimonial cards."},{title:"Code screenshot generator",href:"/templates/code-image",description:"Share code snippets as images for posts and docs."},{title:"Screenshot editor",href:"/templates/screenshot-editor",description:"Add backgrounds and browser frames to any screenshot."},{title:"Open Graph image generator",href:"/templates/open-graph-generator",description:"Design the preview image for your links."}]},"screenshot-editor":{sections:[{title:"A screenshot editor that works in your browser",body:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("p",{children:"Pika turns a raw screenshot into an image that's ready to post: a background behind it, a browser frame around it, rounded corners, padding and a soft shadow. It runs in your browser, so there's nothing to install and you don't need an account."}),(0,s.jsx)("p",{children:"Paste a screenshot with Cmd+V or Ctrl+V, drop in an image file, or enter a website's URL and Pika captures the page for you. When it looks right, save it as a PNG or JPG, or copy it straight to your clipboard."})]})},{title:"What you can do with it",body:(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Add a background."})," Pick a gradient, a solid color or an image, or create your own gradient. Add a pattern or a little noise on top."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Frame it."})," Wrap the screenshot in a macOS, Windows, Arc or other browser frame and show your own URL in the address bar."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Size it for where it's going."})," Canvas presets cover posts on X, Instagram and LinkedIn, Dribbble shots, Product Hunt, Pinterest, App Store screenshots, Open Graph images and YouTube thumbnails."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Point things out (Pro)."})," Add arrows, text, shapes, highlights and a cursor on top of the screenshot."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Keep a consistent look (Pro)."})," Save your settings as a preset and apply them to the next screenshot in one click. On the Team plan, presets are shared within a project."]})]})},{title:"Tips for better screenshots",body:(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Use the same size, padding and background across a series of screenshots, so a docs page or launch thread looks like one set."}),(0,s.jsx)("li",{children:"Match the background to your brand: create a custom gradient and, in Chrome or Edge, use the eyedropper to pick colors straight from your logo or site."}),(0,s.jsx)("li",{children:'Need just the framed screenshot for a docs page or slide? Choose "without background" in the save menu to export it as a PNG with nothing behind it.'}),(0,s.jsxs)("li",{children:["For a full-page capture of a long website, use the"," ",(0,s.jsx)(i(),{href:"/tool/website-screenshot-generator",children:"website screenshot generator"}),", then open the result here."]})]})}],related:[{title:"Website screenshot generator",href:"/tool/website-screenshot-generator",description:"Full-page and mobile captures of any site from its URL."},{title:"MacBook mockup template",href:"/templates/macbook-mockup-template",description:"Put your screenshot on a MacBook."}
1,{title:"Chrome extension",href:"/tools/browser-extensions",description:"Capture any tab and open it in Pika in one click."},{title:"Tweet screenshot generator",href:"/templates/tweet-image",description:"Turn a post on X into a clean image."}]},"macbook-mockup-template":{sections:[{title:"Show your product on a MacBook",body:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("p",{children:"A screenshot on a laptop reads as a real product at a glance, which is why MacBook mockups are everywhere on landing pages and launch posts. Add your screenshot and Pika places it on the MacBook's screen. Then set the frame size, shadow, rotation and background."}),(0,s.jsx)("p",{children:"It's free and you don't need an account. Save the mockup as a PNG or JPG, or copy it to your clipboard."})]})},{title:"Where MacBook mockups work well",body:(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"The hero image on a landing page or a feature section"}),(0,s.jsx)("li",{children:"Product Hunt and other launch galleries"}),(0,s.jsx)("li",{children:"Chrome Web Store and app marketplace listings"}),(0,s.jsx)("li",{children:"Pitch decks, case studies and portfolio pages"}),(0,s.jsx)("li",{children:"Launch posts on X and LinkedIn"})]})},{title:"From a website to a mockup in a minute",body:(0,s.jsxs)("ol",{children:[(0,s.jsxs)("li",{children:["Capture the page with the"," ",(0,s.jsx)(i(),{href:"/tool/website-screenshot-generator",children:"website screenshot generator"}),", or take a screenshot of your app."]}),(0,s.jsx)("li",{children:"Add the screenshot here. Pika fits it to the MacBook's screen."}),(0,s.jsx)("li",{children:"Pick a canvas size for where the image will go, like Square for social posts, Wide 16:9 for slides or Open Graph for link previews."}),(0,s.jsx)("li",{children:"Choose a background that suits your brand, then save it as a PNG or JPG."})]})},{title:"Tips for a realistic mockup",body:(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:["Start from a sharp screenshot. A capture from a Retina display, or a full-page capture from the"," ",(0,s.jsx)(i(),{href:"/tool/website-screenshot-generator",children:"website screenshot generator"}),", keeps text crisp on the screen."]}),(0,s.jsx)("li",{children:"Turn on Hide finder bar when your screenshot already has its own top bar, or when you want a cleaner screen."}),(0,s.jsx)("li",{children:"Keep the rotation and shadow subtle. Small changes look more natural than big ones."}),(0,s.jsx)("li",{children:"With Pro, choose a transparent background to export just the MacBook as a PNG, ready to place on your own site or slide, and export at 2x for up to 4K."})]})}],related:[{title:"iPad Mini mockup",href:"/templates/ipad-mini-mockup",description:"Show your app on an iPad, with an Apple Pencil."},{title:"App Store screenshot generator",href:"/templates/app-store-play-store-screenshot",description:"iPhone and Pixel frames for store listings."},{title:"Screenshot editor",href:"/templates/screenshot-editor",description:"Browser frames, backgrounds and shadows."},{title:"Website screenshot generator",href:"/tool/website-screenshot-generator",description:"Capture any site from its URL."}]},"code-image":{sections:[{title:"Share code as an image people can read",body:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("p",{children:"Code pasted into a post on X or LinkedIn loses its formatting, and a screenshot of your editor shows everything around it. Pika's code screenshot generator puts just your snippet in a clean window, with syntax highlighting, a title and a background."}),(0,s.jsx)("p",{children:"Type or paste your code, pick its language and choose a light or dark editor theme. There's no account and no watermark, and you can save the image as a PNG or JPG or copy it to your clipboard."})]})},{title:"Supported languages",body:(0,s.jsx)("p",{children:"Syntax highlighting covers 23 languages: C-like languages, Clojure, CoffeeScript, CSS, Dart, Elixir, Elm, Go, HTML, Java, JavaScript and TypeScript, JSX, Markdown, Perl, PHP, Python, Ruby, Sass, Shell, Slim, SQL, Swift and YAML."})},{title:"Tips for readable code images",body:(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Keep the snippet short. Ten to twenty lines that show one idea read far better in a feed than a whole file."}),(0,s.jsx)("li",{children:"Make the text bigger for social posts. The font size goes from 14 to 24, and you can change the editor width to fit the canvas."}),(0,s.jsxs)("li",{children:["Use the window title for the file name, like ",(0,s.jsx)("code",{children:"app/page.tsx"}),", or type a single space to hide it."]}),(0,s.jsx)("li",{children:"Pick a background that contrasts with the editor theme: a bright gradient behind the dark theme, or a deeper color behind the light one."}),(0,s.jsx)("li",{children:"Pro adds more fonts (JetBrains Mono, IBM Plex Mono, Source Code Pro and
1Space Mono) and export at up to 4K."})]})},{title:"Make code images from VS Code",body:(0,s.jsxs)("p",{children:["With the ",(0,s.jsx)(i(),{href:"/tools/vscode-extension",children:"Pika VS Code extension"}),', select code in your editor and run "Make screenshot in Pika" from the Command Palette. This page opens with your code and its language already set.']})}],related:[{title:"VS Code extension",href:"/tools/vscode-extension",description:"Send code from VS Code straight to Pika."},{title:"Tweet screenshot generator",href:"/templates/tweet-image",description:"Turn a post on X into a clean image."},{title:"Screenshot editor",href:"/templates/screenshot-editor",description:"Backgrounds and frames for any screenshot."},{title:"Open Graph image generator",href:"/templates/open-graph-generator",description:"Preview images for your blog posts and links."}]}},a={"open-graph-test":{sections:[{title:"See your link preview before you share it",body:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("p",{children:"When you share a link, apps like X, LinkedIn, Facebook and Slack build a preview card from the page's Open Graph meta tags. If a tag is missing or the image URL is broken, the link shows up with no image or the wrong title."}),(0,s.jsx)("p",{children:"Enter a URL and Pika reads its title, description and image, then shows how the preview looks on X (Twitter), LinkedIn, Facebook, Google and Slack. Switch on dark mode to check the dark versions, and save any preview as a PNG."})]})},{title:"How to test your Open Graph tags",body:(0,s.jsxs)("ol",{children:[(0,s.jsx)("li",{children:"Enter the full URL of the page, including https://."}),(0,s.jsx)("li",{children:"Check each preview: is the image there, is it cropped well, and are the title and description right?"}),(0,s.jsx)("li",{children:"Fix the tags on your page, deploy, and run the test again."})]})},{title:"The tags that matter",body:(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"og:title"})," and ",(0,s.jsx)("strong",{children:"og:description"}),": the headline and the line under it. Keep the title short enough not to be cut off."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"og:image"}),": an absolute, public URL to the image. 1200\xd7630 pixels (a 1.91:1 ratio) is the common size for large link previews."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"twitter:card"}),": set it to ",(0,s.jsx)("code",{children:"summary_large_image"})," for a large image on X."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"og:url"}),": the canonical address of the page."]})]})},{title:"Why a preview can still look old",body:(0,s.jsx)("p",{children:"Social apps cache link previews, sometimes for days. After fixing your tags, use the platform's own tool to refresh it, such as LinkedIn's Post Inspector or Facebook's Sharing Debugger. A new post on X picks up the current tags when the link is shared again."})}],related:[{title:"Open Graph image generator",href:"/templates/open-graph-generator",description:"Design an og:image and copy its meta tags."},{title:"Website screenshot generator",href:"/tool/website-screenshot-generator",description:"Capture any site from its URL."}]},"youtube-thumbnail-download":{sections:[{title:"Get any YouTube video's thumbnail",body:(0,s.jsx)("p",{children:"Paste a YouTube link or a video ID and Pika shows every thumbnail size YouTube has for that video. Open the one you want and save it. Thumbnails load straight from YouTube's image servers, and you don't need an account."})},{title:"How to download a thumbnail",body:(0,s.jsxs)("ol",{children:[(0,s.jsx)("li",{children:"Copy the video's link from YouTube: from the address bar, the Share button, or a Shorts page."}),(0,s.jsx)("li",{children:"Paste it into the box above and click Fetch thumbnails. Pika shows every size the video has."}),(0,s.jsx)("li",{children:"Click Download next to the size you want. The image opens in a new tab, ready to save."})]})},{title:"What a thumbnail download is useful for",body:(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Keeping a copy of your own video thumbnails, for example when your original file is lost"}),(0,s.jsx)("li",{children:"Studying what thumbnails in your niche look like before designing yours"}),(0,s.jsx)("li",{children:"Adding a video's thumbnail to your own blog post or newsletter that links to the video"})]})}
1,{title:"Thumbnail sizes",body:(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Max"}),": up to 1280\xd7720, the full HD version. YouTube only has it for some videos, and Pika hides it when it doesn't exist."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Standard"}),": 640\xd7480"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"High"}),": 480\xd7360"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Medium"}),": 320\xd7180"]})]})},{title:"Links that work",body:(0,s.jsx)("p",{children:"Regular youtube.com watch links, youtu.be short links, Shorts, live and embed links, music.youtube.com links, and plain 11-character video IDs."})},{title:"Using thumbnails responsibly",body:(0,s.jsx)("p",{children:"A thumbnail belongs to the video's creator. Downloading your own thumbnails, or using them for reference and research, is fine. Ask for permission before using someone else's thumbnail in your own work."})},{title:"Making your own thumbnail",body:(0,s.jsxs)("p",{children:["Pika's ",(0,s.jsx)(i(),{href:"/templates/screenshot-editor",children:"screenshot editor"})," has a YouTube Thumbnail canvas size. Drop in a screenshot or image, add a background (and text, with Pro) and export it at the right shape for YouTube."]})}],related:[{title:"Screenshot editor",href:"/templates/screenshot-editor",description:"Make thumbnails with the YouTube canvas size."},{title:"Website screenshot generator",href:"/tool/website-screenshot-generator",description:"Capture any site from its URL."}]}}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.