HTMLMinifier VS ImageOptim

This project uses HTMLMinifier, optipng, and zopfli to create a custom production Elm build pipeline. You can see how I make use of these tools in this build script. Here are the results in case you're interested. I used the same ideas from this project to build and deploy dwayne/elm-conduit, which you can learn more about in my article Yet Another Tour of an Open-Source Elm SPA.

Minification involves removing unnecessary characters, whitespace, and comments from code files. It helps reduce HTML, CSS, JavaScript, etc., file sizes without compromising functionality. Removing redundant elements makes these HTML, JavaScript, and CSS files smaller. Since smaller code files need less internet traffic to transfer, they load faster. Utilizing tools like UglifyJS, Clean-CSS, and HTMLMinifier enhances this process of code reduction. They analyze the code, remove redundant code, and generate optimized files for deployment.

html-minifier works since it has a cli and I can do something like the authors states in the documentation html-minifier --collapse-whitespace inside package.json "scripts": { }, thus I can run the task through the VSCode interface

[build] command = "pnpm build" publish = "_site" [build.processing] skip_processing = false [build.processing.css] minify = true bundle = false [build.processing.js] minify = true bundle = false # Config for the Netlify Build Plugin: netlify-plugin-minify-html [[plugins]] package = "netlify-plugin-minify-html" # Specify which deploy contexts we'll minify HTML in. # Supports any Deploy Contexts available in Netlify. # https://docs.netlify.com/site-deploys/overview/#deploy-contexts [plugins.inputs] contexts = [ 'production', 'branch-deploy', 'deploy-preview' ] # Optionally, override the default options for the minification # https://github.com/kangax/html-minifier#options-quick-reference [plugins.inputs.minifierOptions] collapseWhitespace = true conservativeCollapse = true minifyCSS = true minifyJS = true

Program: html-minifier Arguments: $FileName$ --collapse-whitespace --remove-comments -o $FileName$

HTMLMinifier

I found this one https://github.com/kangax/html-minifier which seems to be browser compatible, but impossible to get it to build with my setup (Next.js + typescript).

That's Minifcation and you'd normally thigs like https://github.com/kangax/html-minifier

I am not sure what you'd use this tool for possibly for scraping work but beautiful soup is probably better for that

☕ Minify HTML & CSS with HTMLMinifier and cssnano

Compressing images: This technique reduces image size without compromising quality. You can achieve this using various image compression tools like TinyPNG or ImageOptim. These tools are specifically designed to manage multiple image formats and compression methods. They help reduce image files, resulting in less data transfer from the server to the user's device. It is advisable to compress images before uploading them to the web server.

ImageOptim: ImageOptim is a free and open-source tool that can be used to compress JPEG, PNG, and GIF images.

Currently installed apps: Alfred for searching applications/files and launching websites quickly i Stat menus to monitor my hardware Geo Gebra Classic 6 for school Rectangle for better window management Obsidian for note taking Resolve for video editing and all utilities that come with it Bitwarden as my go-to password manager Microsoft Word, Excel PowerPoint and Teams for school Dropover for moving or sending more files quickly Gestimer for work sessions iTerm as a better terminal than the built-in one Python and all things that come with the install Parallels Desktop and all stuff that comes with the install for running windows only applications Visual Studio Code for coding Blender for 3D Image Optim CurseForge for modded Minecraft Minecraft Find any file Mac Updater 3; would love to have the pro version

ImageOptim - file resizing and optimising images, even on the command line (free)

ImageOptim - Price: Free Image optimizer for Mac that allows you to reduce the file size of your images without losing quality, and strip the metadata.

If you're on a Mac, use ImageOptim to optimize your images: https://imageoptim.com/mac If you're on Windows, I imagine there's a similar app

Bonus points: before you re-import them drop the exports folder into imageoptimfor the most efficient lossless compression imaginable.

ImageOptim — shrink those file sizes!