Index of Upload Mp4 Jpg -edu -com -org -net
How to optimize images on eleventy (11ty)
Originally Published on my web log
Edifice a site that has images requires to optimize them
to avert any content shifting and deliver a good user experience.
To achieve that yous have to compress, resize, and convert formats for your images.
In this article we will take a look for how to automate your images in eleventy
static site generated website using eleventy-img, and abrupt.
Create a basic project to first
create a new directory and name information technology 11ty-img-example or whatsoever you want,
and so run
yarn init -y
you can employ npm if yous prefer.
at present install eleventy, and create alphabetize.njk
on the root with basic html markup.
yarn add -D @11ty/eleventy touch alphabetize.njk
<!-- index.njk --> <!DOCTYPE html> <html lang= "en" > <caput> <meta charset= "UTF-viii" /> <meta name= "viewport" content= "width=device-width, initial-scale=one.0" /> <title>11ty img example</title> </head> <torso> Hullo, World! </body> </html>
open up your package.json file and add dev and build scripts:
// package.json "scripts" : { "dev" : "eleventy --serve" , "build" : "eleventy" }
run the project on your browser
open your favorite final and run
yarn dev
at present open localhost:8080 on your browser and
it should work without any customized eleventy configuration.
Brandish some images
let's try go some images and place them in images directory.
and inside index.njk try to display theme.
ls images/ 518k 0001.jpg 2.6M 0002.jpg 1.7M 0003.jpg 368k 0004.jpg 679k 0005.jpg 556k 0006.jpg 602k 0007.jpg ane.6M 0008.jpg one.4M 0009.jpg
<!-- index.njk --> <torso> <img src= "/images/0001.jpg" alt= "prototype no 01" /> <img src= "/images/0002.jpg" alt= "image no 02" /> <!-- ... --> </body>
open your browser and it shouldn't return any epitome.
yeah that'south right 😀 because eleventy doesn't handle
assets like css, js, or images so we need to configure that
by ourself.
create a .eleventy.js file on the root directory,
then write:
module . exports = ( cfg ) => { cfg . addPassthroughCopy ( " images " ); }
now everything inside images directory
volition be copied to the build directory.
Restart your server and go back to your browser
and it should everything work.
Examination images performance without optimization
Let's see how images doing earlier whatsoever optimization.
Open network tab inside the devtool and fix fast 3G equally network simulation.
in my case it took 50s to render all images, and some of these
images have size more 2mb. and then we need to find a style
to brand it faster.
Add together eleventy-img plugin
it's the time to use the eleventy-img, this plugin from
eleventy squad you can find the repo from here.
Install it in our project.
yarn add together -D @11ty/eleventy-img
open .eleventy.js file and remove the line that nosotros wrote before, then add the code below:
// .eleventy.js const Image = require ( " @11ty/eleventy-img " ); module . exports = ( cfg ) => { cfg . addNunjucksAsyncShortcode ( " Prototype " , async ( src , alt ) => { if ( ! alt ) { throw new Fault ( `Missing \` alt \` on myImage from: ${ src } ` ); } let stats = await Image ( src , { widths : [ 25 , 320 , 640 , 960 , 1200 , 1800 , 2400 ], formats : [ " jpeg " , " webp " ], urlPath : " /images/ " , outputDir : " ./_site/images/ " , }); let lowestSrc = stats [ " jpeg " ][ 0 ]; const srcset = Object . keys ( stats ). reduce ( ( acc , format ) => ({ ... acc , [ format ]: stats [ format ]. reduce ( ( _acc , curr ) => ` ${ _acc } ${ curr . srcset } ,` , "" ), }), {} ); const source = `<source blazon="image/webp" srcset=" ${ srcset [ " webp " ]} " >` ; const img = `<img loading="lazy" alt=" ${ alt } " src=" ${ lowestSrc . url } " sizes='(min-width: 1024px) 1024px, 100vw' srcset=" ${ srcset [ " jpeg " ]} " width=" ${ lowestSrc . width } " height=" ${ lowestSrc . peak } ">` ; return `<div form="image-wrapper"><picture> ${ source } ${ img } </flick></div>` ; }); }
Let's break downwards the code and understand how information technology works
-
addNunjucksAsyncShortcode
eleventy has feature called shortcodes let
y'all extend your template engine past writing custom functions.
in our case we will have a new shortcode we can use inside our templates past
writing:
{% Prototype "/images/00.jpg", "this is an alt description" %}
-
stats = new Prototype(...)
we pass the src url, formats, and various widths to the image plugin.
So we well have multiple sizes, and formats for each image.
-
const srcset = ...
the stats result look similar that
stats = { jpeg : [ { url : ' ... ' , src : ' ... ' , srcset : ' ... ' } ], webp : [ ... ] }
We demand to covert every size srcset to only i srcset cord by using reduce function, So
we tin inject it in our code.
so the outcome of variable srcset
srcset = { jpeg : ' <srcset> ' webp : ' <srcset> ' }
-
const source = ...andconst img = ...
Use webp format for source equally principal image blazon and jpg as fallback fro img tag.
Now we are good to go by return the whole picture.
Test Images after using eleventy-img
open alphabetize.njk and replace all img tags with
<!-- alphabetize.njk --> <!-- ... --> {% Epitome "images/0001.jpg", "image no 01" %} {% Image "images/0002.jpg", "epitome no 02" %} {% Image "images/0003.jpg", "epitome no 03" %} {% Image "images/0004.jpg", "image no 04" %} <!-- ... -->
PS: you have to write image paths include the total path from the root of the project to make it works.
Restart your server and go to the browser. and again open network tab.
and Nail 💥 in this time all images loaded on 5s and no image
has size more 120kb.
Add together lazy-loading and the blurry effect
this is an extra pace to avoid content shifting by using
inline base64 image as placeholder for images and use
javascript as fallback for browser that non supported yet
the native lazyloading with vanilla-lazyload.
install sharp package to get the blurry inline base64 image
yarn add -D sharp
on .eleventy.js import precipitous package and add this code below:
// .eleventy.js const sharp = crave ( ' sharp ' ); // ... const placeholder = await sharp ( lowestSrc . outputPath ) . resize ({ fit : sharp . fit . within }) . mistiness () . toBuffer (); const base64Placeholder = `data:image/png;base64, ${ placeholder . toString ( " base64 " )} ` ; // ...
And then replace src, srcset, and resize, to information-src, data-srcset, and data-resize.
And also add src attribute in <img> tag to src="${base64Placeholder}".
The terminal lawmaking after changes:
const source = `<source type="image/webp" data-srcset=" ${ srcset [ " webp " ]} " >` ; const img = `<img grade="lazy" alt=" ${ alt } " src=" ${ base64Placeholder } " data-src=" ${ lowestSrc . url } " data-sizes='(min-width: 1024px) 1024px, 100vw' data-srcset=" ${ srcset [ " jpeg " ]} " width=" ${ lowestSrc . width } " height=" ${ lowestSrc . superlative } ">` ;
And equally mentioned before in this article that eleventy only handles html
template engines, So we will use script tag of type="module" to utilize vanilla-lazyload bundle.
on index.njk earlier the end of body tag </body> add this script.
<script type= "module" async > import Lazyload from " https://cdn.skypack.dev/vanilla-lazyload " ; const lazyload = new Lazyload (); </script>
Add together this styles for img tags
<way> img { display : block ; width : 100% ; max-width : 100% ; elevation : motorcar ; } </way>
Test images after lazyloading
Voilà 🎉, now nosotros have a nice looking and fast images on your site.
Conclusion
Now Yous know how to integrate eleventy-img plugin and vanilla-lazyload packet
with your eleventy site if you demand to learn more near image optimization, I recommend
check this blog by the author of vanilla-lazyload.
You tin find the complete example in github
Source: https://dev.to/22mahmoud/how-to-optimize-and-lazyload-images-on-eleventy-11ty-206h
0 Response to "Index of Upload Mp4 Jpg -edu -com -org -net"
Post a Comment