probe-image-size
astro-imagetools
probe-image-size | astro-imagetools | |
---|---|---|
2 | 3 | |
957 | 372 | |
0.3% | - | |
0.0 | 4.8 | |
11 months ago | 8 months ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
probe-image-size
-
Issues With Using 'http.get()' Which Resulted In 'BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.' Error
import React, { useState } from "react"; const url = require("url"); const http = require("http"); const sizeOf = require("image-size"); function Upload() { const [photoName, setPhotoName] = useState(""); const [photoLink, setPhotoLink] = useState(""); const [submittedData, setSubmittedData] = useState([]); const [errors, setErrors] = useState([]); function handlePhotoNameChange(event) { console.log("handlePhotoNameChange"); setPhotoName(event.target.value); } function handlePhotoLinkChange(event) { console.log("handlePhotoLinkChange"); setPhotoLink(event.target.value); } function handleSubmit(event) { event.preventDefault(); if (photoName.length > 0) { // TODO: // Use 'probe-image-size' library to determine width and height of the image the user passed in // Then, add a 'width' and 'height' key value to the 'formData' variable so that the // values are then added back to 'db.json' accordingly: // https://github.com/nodeca/probe-image-size const options = url.parse(photoLink); // 'http.get()' request so that I can obtain the image itself: http.get(options, function (response) { const chunks = []; response .on("data", function (chunk) { chunks.push(chunk); }) .on("end", function () { const buffer = Buffer.concat(chunks); console.log(sizeOf(buffer)); }); }); const formData = { photoName: photoName, photoLink: photoLink }; const dataArray = [...submittedData, formData]; setSubmittedData(dataArray); setPhotoName(""); setPhotoLink(""); setErrors([]); console.log("handleSubmit() called"); console.log("dataArray (before fetch() call): ", dataArray); fetch("http://localhost:3000/photos", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ dataArray: dataArray, }), }) .then((response) => response.json()) .then((response) => { console.log("response (from fetch request): ", response); }); } else { setErrors(["Name of photo is required!"]); } } const listOfSubmissions = submittedData.map((data, index) => { return ( {data.photoName} {data.photoLink} ); }); return ( Upload Image To Board Name: Link: Upload {errors.length > 0 ? errors.map((error, index) => ( {error} )) : null} Recent Submissions Below: {listOfSubmissions} ); } export default Upload;
-
Lazy loading images, so easy you won’t believe it (a native strategy)
Again, there are multiple ways to get dimensions and your development pipeline might just provide this information by default. In case it doesn't, we have found a nice and small npm package called probe-image-size. It allows for 'probing' an image locally or remotely.
astro-imagetools
-
Astro + Storyblok: SSR Tips and Tricks
I found that my SSR pages loaded very slowly because I was using astro-imagetools to process images. Since optimized images aren't necessary during editing anyways, I created a wrapper component to bypass image processing in the preview environment:
-
Lazy loading images, so easy you won’t believe it (a native strategy)
In our case, using Astro, we simply used astro-imagetools to compress images automatically while importing them. We might improve this later, for example generating multiple image sizes and formats, reducing the load even further for modern browsers. Currently, it checks our box though.
-
Is Astro ready for your blog?
There is no official Astro solution for working with images, but Astro ImageTools gives Astro the ability to provide optimized, responsive images.4
What are some alternatives?
sharp - High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Tailwind CSS - A utility-first CSS framework for rapid UI development.
pica - Resize image in browser with high quality and high speed
feed - A RSS, Atom and JSON Feed generator for Node.js, making content syndication simple and intuitive! 🚀
gm - GraphicsMagick for node
rehype - HTML processor powered by plugins part of the @unifiedjs collective
lwip - Light Weight Image Processor for NodeJS
Sass - Sass makes CSS fun!
Korkut - Quick and simple image processing at the command line. :hammer:
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
is-progressive - Check if JPEG images are progressive
node - Node.js JavaScript runtime ✨🐢🚀✨