So, in your WordPress theme add this code into functions.php

function custom_mime_types( $mime_types ) {
$mime_types['avif'] = 'image/avif'; // Adding .avif
return $mime_types;
}
add_filter( 'mime_types', 'custom_mime_types' );

function add_avif_upload_support( $checked, $file, $filename, $mimes ) {
if ( ! $checked['type'] ) {
$check_filetype = wp_check_filetype( $filename, $mimes );
$ext = $check_filetype['ext'];
$type = $check_filetype['type'];
$proper_filename = $filename;

    if ( $type && 0 === strpos( $type, 'image/' ) && $ext !== 'svg' ) {
        $checked = compact( 'ext', 'type', 'proper_filename' );
    } else {
        $checked = array( 'ext' => false, 'type' => false, 'proper_filename' => false );
    }
}

return $checked;

}
add_filter( 'wp_check_filetype_and_ext', 'add_avif_upload_support', 10, 4 );

Now you should be able to upload AVIF images into your WordPress website with no problems!.

The post Enable uploading AVIF Images on WordPress website appeared first on Wadiweb.

We will be using Sharp Js Library which is an great library for optimizing, resizing , It also has many other features that will help you to improve your images with ease. In this article, we will focus on resizing images using Sharp.

Sharp requires Node.js to be installed on your Operating System, which you can download below. ( I recommend downloading and installing the stable version for your operating system ).

Sharp is a high-speed Node.js module to convert large images in standard formats to smaller, web-friendly JPEG, PNG, WebP, GIF, and AVIF images of varying dimensions.

Using Sharp to resize your images is very easy to do, and we will go through the steps to resize your images in bulk for your website.

1- Install Sharp Library

The first step is installing Sharp using npm or yarn

Open your command line terminal in this folder, -I use Gitbash– then run the following command

NPM

If you have npm installed then run this line.

npm i sharp

Yarn

Or you can replace npm install with yarn add if you have yarn in your system.

yarn add sharp

It should install the required packages within moments.

Script

Now we should create a new file that will contain our code to resize images, Create a file name index.js and add the following code.

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

The packages are Sharp Library(sharp) which we just installed earlier, Filesystem (fs), and path (path) packages which should already.

Now let’s create a folder that will contain our original images we will name (images). and another folder for outputting resized images we will name (output).

The packages and folders should look something like this

Images Resizing Structure

You can clone the structure and the code from the GitHub repo Sharp Images Optimization

We will add the original images that we will resize to the (images) folder.

const directoryName = "images";

const fileNames = fs.readdirSync(directoryName);

directoryName variable is the images folder name, and filesNames variable we get to loop through for resizing using Sharp.

fileNames.forEach((file) => {

  const fileFormat = getExtension(file);
  let sh = sharp("./images/" + file);

  if( 'jpg' == fileFormat ) {
    sh.jpeg({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } 
});

function getExtension(filename) {
  let ext = path.extname(filename || "").split(".");

  return ext[ext.length - 1];
}

Now we will loop through all images that are jpg formatted, and set those images’ quality to 80 (percent) you can set the number higher or lower. you can read more about available options for image optimization (Output Images).

Resizing Images use the method resize, and we will keep images same dimensions, width is set to 900 (PX), this will make the images’ width to 900 Pixels and the height will be resized accordingly with the same dimensions.

You can check more options from (Resizing Images) Options.

Add similar logic for WebP and PNG formatted images

fileNames.forEach((file) => {

  const fileFormat = getExtension(file);
  let sh = sharp("./images/" + file);

  if( 'jpg' == fileFormat ) {
    sh.jpeg({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if ('png' === fileFormat) {
    sh.png({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if('webp' === fileFormat){
    sh.webp({lossless:true, quality: 80, alphaQuality: 100, force: true}).resize(
        {fit: sharp.fit.contain, width: 900}
      )
  }
});

function getExtension(filename) {
  let ext = path.extname(filename || "").split(".");

  return ext[ext.length - 1];
}

The final code in index.js file should be

// Packages
const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

// Original Images directory
const directoryName = "images";

// Get file names
const fileNames = fs.readdirSync(directoryName);

// Loop through images
fileNames.forEach((file) => {

  // Get image format (extension)
  const fileFormat = getExtension(file);

  console.log("fileFormat", fileFormat)
  if (fileFormat === "svg") {
    console.log("SVGs are not processed in this script at the moment");
    return;
  }
  let sh = sharp("./images/" + file);

  if( 'jpg' == fileFormat ) {
    sh.jpeg({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if ('png' === fileFormat) {
    sh.png({
      quality: 80,
      progressive: true,
    }).resize(
      {
        fit:  sharp.fit.contain,
        width: 900,
      }
    )
  } else if('webp' === fileFormat){
    sh.webp({lossless:true, quality: 80, alphaQuality: 100, force: true}).resize(
        {fit: sharp.fit.contain, width: 900}
      )
  }


  console.log('output/' + file);
  let fileNameWOExtension = file.replace(/\.[^/.]+$/, "");

  console.log(fileNameWOExtension);


  sh.toFile('output/' + `${file}`, function (err, info) {
    // console.log(info);
    if(err) {
      console.log(err + "Error occurred while optimization process")
    }
  })
});

// Get Image Extension
function getExtension(filename) {
  let ext = path.extname(filename || "").split(".");

  return ext[ext.length - 1];
}

After finishing the code and organizing our folders Let’s add our images and test resizing images

In images folder we have about 25 images free from pexels, images varying in size so we will use Sharp to resize those images making their width 900 Pixels and the height will resize to the same aspect ratio.

Run the following command in the Visual Studio Code terminal (or Git bash or any other terminal to run your commands).

node index.js

You should see the console logs appear in the terminal while resizing images. The time of resizing images depends on the size and quantity of the images. So 25 images didn’t take more than 2 seconds.

So, let’s see images before and after resizing dimensions

Before Resizing

After Resizing

Conclusion

Resizing images using Sharp doesn’t require much work after the initial setup. you can resize your images very fast and with many custom options available.

Learn how to optimize images for your website to be production ready (How to Optimize Images for Your Website).

The post How to Resize Images for Your Website appeared first on Wadiweb.

• WordPress optimizing plugins. (Mostly Paid)
• Websites for Optimizing Images. (Freemium)
• Optimizing Images Using JS Libraries. (Free)

Optimizing Images Using JS Libraries

Optimizing Images through writing a simple JS script is free and easy and my choice which I use on most of my posts and pages. JS libraries can scale easily you can optimize hundreds of images with just a few lines of code at -almost- no cost.

There are many JS libraries for optimizing images out there but we will focus on Imagemin which is the most popular and used, Imagemin is open source JavaScript Library and easy to use, and with great documentation.

• Imagemin

Imagemin requires Node.js to be installed on your Operating System, which you can download below. ( I recommend downloading and installing the stable version for your operating system ).

Imagemin

Imagemin package is a great choice for optimizing your images, with a simple script you can crop, resize, and compress your images to reduce the size of images, reducing webpages size.

Using Imagemin package is very straightforward and simple, you can go through its documentation and available options here.

The first step to using Imagemin after installing Node.js is to install the packages that we are going to use.

Now, create a Folder for optimizing images.

Open your command line terminal in this folder, -I use Gitbash– then run the following command

npm install imagemin imageminJpegtran imageminPngquant imageminWebp

Or you can replace npm install with yarn add if you have yarn in your system.

yarn add imagemin imageminJpegtran imageminPngquant imageminWebp

It will take a minute to finish installing the packages, and there should be [node_modules]folder.

Now we will create a file (index.mjs) to write up our code for optimizing images.

1- Include the packages

import  imagemin from 'imagemin';
import  imageminJpegtran from 'imagemin-jpegtran';
import  imageminPngquant from 'imagemin-pngquant';
import imageminWebp from 'imagemin-webp';

2- Add code for optimizing the images

(async () => {
	const files =  await imagemin(['images/*.{jpg,png}'], {
		destination: 'output',
		plugins: [
			imageminWebp(
				{
					quality: 80,
				}
			)
		]
	});

    console.log(files);
    console.log('Images optimized');
})();

3- Create a folder inside the same directory named (images) which will include your original images.

4- Save the file and then from the terminal run the following command

node index.mjs

5- New folder named (output) should appear -as per our code you can change it from the destination – containing the optimized images which will be formatted WebP.

If you want to use the Code we use for our optimizing Image on Imagemin you can find the code here.

Testing Optimizing Images

Now that you’re familiar with how to optimize images using Imagemin. I will display some results Before and After optimizing my images on one of my pages.

Wadi Gallery Grid for Elementor Page is basically a page full of images and videos so having optimized images is a necessity.

Before Optimizing Images Results

Using tools.pingdom.com here are the page results before images optimization

Page size is 11.3 MB and Load time is 3.37 seconds.

Images size takes the lion’s share of the page size more than 90% percent of page size is images!. Images take 10.2 MB of the total page size. That is why image optimization is necessary for any modern website that relies on images to create appealing web pages.

After Optimizing Image Results

Now after doing the images optimization process using Imagemin and covert all images to WebP format here are the results

As you can see the web page size dropped from 10.2 MB to 3.6 MB by just doing image optimization which doesn’t take more than 5 minutes after the initial setup of Imagemin!

Images now take about 72% of the web page size from more than 90% of the page size before images optimization – considering that Gallery Grid for Elementor demo page is a gallery for media images and videos I think it is very reasonable- that is a good improvement on a web page.

Conclusion

As you can see, image optimization for web pages is a necessity for every aspect of your website, whether to have a faster page for your users or better SEO that will help your web pages to rank on Search.

The post How to Optimize Images For Your Website appeared first on Wadiweb.