SvelteKit Image Plugin: Next-Gen Images in Svelte

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Onboard AI - ChatGPT with full context of any GitHub repo.
  • WorkOS - The modern API for authentication & user identity.
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • sveltekit-blog-mdx

    SvelteKit MDX starter blog with MDsveX (Svelte in markdown)

    We'll start with the SvelteKit MDsveX starter and add a responsive image to the home page. We will see how you can generate a low resolution placeholder as well as an alternative dominant colour placeholder. We will generate a WebP Next-Gen format image together with the original JPEG in different sizes so the image looks good on large retina displays without having to download a huge image for small mobile displays. Using the placeholders, we will eliminate image layout shift.

  • sveltekit-image-plugin

    SvelteKit demo code for using vite-imagetools to add cached, responsive, Next-Gen images to a SvelteKit site with no cumulative layout shift.

    You can see the full code for this tutorial on the Rodney Lab GitHub page. There is also a demo site.

  • Onboard AI

    ChatGPT with full context of any GitHub repo. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at app.getonboardai.com.

  • sharp

    High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

    We will use the sharp imaging plugin to generate the placeholders. sharp will encode these as Base64 strings for us. We will make our placeholder generation functions available via a server endpoint. Within the load function (first script block) on our page, we load the placeholders before we render the page. Let's tackle things in that order.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts