StickPNG

How to integrate StickPNG with Webflow

Transparent PNGs from StickPNG work as overlays, graphics, and visual elements on Webflow sites without disrupting your design layouts. These assets add badges, icons, and decorative elements to landing pages, educational content, and product showcases.

You can download images from StickPNG and upload them to Webflow's Assets panel, or embed custom galleries manually using Code Embed elements with third-party gallery widgets.

Download and upload images manually

Visit StickPNG and search or browse for the images you need. Click on an image and download it to your local system. Then open your Webflow project, navigate to the Assets panel, and drag the downloaded PNG file onto your canvas or click Upload in the Assets panel.

Webflow's upload and optimization features include the following:

• Drag-and-drop upload: Drag PNG files onto the canvas or Assets panel to upload. Files must be under 4MB before upload. Webflow rejects oversized files at the boundary, requiring you to compress locally first.
• Image optimization: Webflow converts uploaded PNGs to WebP or AVIF through the asset settings panel. This optimization happens post-upload and applies platform-wide compression settings. You cannot configure per-image quality thresholds.
• Responsive sizing: Configure responsive image settings through the Element settings panel without code, controlling how images scale across different viewport sizes.
• Alt text support: Add accessibility-compliant alt text through the built-in Image element settings to ensure screen readers can describe images to visually impaired users.
• Webflow CMS integration: CMS Image fields accept uploaded PNGs but require manual assignment per Collection item. Bulk upload to multiple Collection items requires API scripting or repeated manual uploads.

Webflow supports PNG (24-bit recommended for full alpha transparency), JPEG, GIF, SVG, WebP, and AVIF formats. All images must be under 4MB according to Webflow's image file types documentation. For transparent overlays and graphics, use 24-bit PNG format to preserve alpha channel transparency.

Manual upload gives you preprocessing control but creates more steps between finding images and inserting them into your design. Choose this approach when image optimization and editing are critical. Skip manual upload when iteration speed matters more than preprocessing control.

Use code embeds for custom galleries

For sites that need interactive image galleries or custom display layouts, you can use third-party gallery widgets embedded through Webflow's Code Embed element. This method requires no custom coding but does involve copying and pasting embed codes generated by external tools.

Webflow's Code Embed element supports HTML, CSS, and JavaScript to create interactive elements including image galleries. Tools like Elfsight's Photo Gallery widget provide visual editors where you configure your gallery settings, then generate embed code to paste into Webflow.

Follow these steps to implement a gallery:

1. Upload your StickPNG images to Webflow's Assets panel using the method above
2. Configure a gallery widget through a third-party service's visual editor
3. Add a Code Embed element to your Webflow page where you want the gallery
4. Paste the generated embed code into the Code Embed element
5. Publish your site to see the gallery in action (scripts only render on published sites)

Embed codes have technical limits you should know about:

• Character limit: Embed codes cannot exceed 50,000 characters
• Supported languages: HTML, CSS (in <style> tags), and JavaScript (in <script> tags)
• Preview behavior: Iframe and style content previews on canvas, but scripts only execute on published sites
• Restrictions: Server-side languages like PHP and Python are not supported

What you can build

Integrating StickPNG with Webflow gives you access to a library of transparent PNGs for overlays, graphics, and visual elements across your site.

• Marketing landing pages with overlay graphics: Add transparent badges and icons over product photos or hero images. You need to manually download each badge image separately since StickPNG has no bulk download or API access.
• Educational content libraries: StickPNG's category taxonomy provides consistent image styles within each category. However, image quality and resolution vary across submissions, requiring manual review to ensure visual consistency across your educational pages.
• E-commerce product pages: Position transparent badges from StickPNG's graphics library over product photos using absolute positioning or CSS overlays. This approach works for standard badge styles but requires custom design work for brand-specific badge treatments not available in StickPNG's library.