GeneralWebP Animation Guide (Img2WebP & PowerShell)
Posted:

GeneralWebP Animation Guide (Img2WebP & PowerShell)Posted:

Wraith
  • Graphics King
Status: Online
Joined: Sep 29, 20174Year Member
Posts: 2,641
Reputation Power: 21040
Motto: Discord - https://dc.wraithfx.com/
Motto: Discord - https://dc.wraithfx.com/
Status: Online
Joined: Sep 29, 20174Year Member
Posts: 2,641
Reputation Power: 21040
Motto: Discord - https://dc.wraithfx.com/
Huge thanks to Zesri for the help & original script.


What is WebP?


Ever since the WebP filetype was added to TTG, we have been able to create smaller images files while retaining most of the image quality. This makes creating profile art easier for designers as we are limited on the maximum size for avatars, signatures and banners. WebP files are generally smaller than GIF, JPEG & PNG files which make them perfect to use here on TTG. In this guide I explain how to setup the script and how to use it.

"WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 smaller file sizes compared to PNG."


Also note that WebP images do not have to be animated and are a great alternative for PNG and JPEG.


Script Setup


Before you begin setting anything up, you need to download the files provided here. This is a zip file which contains both the PowerShell script and the executable which converts the image(s) to the WebP format. Now that you have all of the files needed, follow the rest of this guide to successfully setup the script.

    1. First you will need to extract the zip file and move it to a directory that you wish to store it (I have saved mine to my documents folder).

    2. Open up the "Run" box by either pressing Windows Key + R or or by right-clicking the start icon and then click on "Run". You will then see a box that looks like the one in the image in the spoiler below. You then need to type/paste the following "systempropertiesadvanced" into the textbox and once done, click "OK".

    3. Once you have done that, you should have a window titled "System Properties". Make sure you are on the "Advanced" tab and if so, click on the "Environment Variables" button as shown in the image in the spoiler below. You should now have a window that displays both user and system variables.

    4. Look at the system variables section and find the variable called "Path". Double-click on it so that it opens the "Edit environment variable" window as shown in the screenshots in the spoiler below.

    5. Click on the "New" button on the top right and enter the directory path of the "WebP" folder that you moved earlier. This will make it so that both of the files in that path can be executed anywhere via PowerShell. An example of what your directory should look like can be seen in the images in the spoiler below.

    6. If you have done all of the above correctly, open PowerShell by either pressing the windows key and typing it in or by right-clicking the start icon and then click "Windows PowerShell". Once PowerShell opens, type/paste the following "sequence.ps1" and hit enter. You should have something that looks like the images in the spoiler below if you have done all of the steps shown above.

By following this guide, you should now be able to execute the script from any directory on your computer. If you are running into an error when trying to execute the script, you may need to lift the restrictions on your PowerShell. To do this, first run PowerShell as administrator and type/paste the following "Get-ExecutionPolicy". If the output from that command is "Restricted", enter the following command "Set-ExecutionPolicy RemoteSigned". It will then ask you if you want to change the execution policy and that is when you type "a" and press enter. You should now be able to execute the script as expected. If you are still unable to, feel free to comment on this post.


Script Tutorial


    1. Create a folder and put all of the images that you want to combine into a WebP into the folder. Once you have done that, hold shift and right-click in the folder so that it brings up a bunch of options and look for the one that says "Open PowerShell window here". Look at the image in the spoiler below if you are unsure on what I mean.

    2. Once you see a PowerShell window open, type/paste the following "sequence.ps1" and hit enter. You should then see some text in the PowerShell window as seen in the image in the spoiler below.

    3. From there enter your desired frame rate, file name etc. When you get to the compression section, you can choose either "y" (yes) or "n" (no). Choosing "n" will skip the compression options and export the WebP file in full quality. If you decide that you do want compression, enter your desired compression settings (refer to message box pop-up or the bottom of this thread for more info on compression).

    4. Once you have entered all of your desired settings, hit enter and your WebP will compile. The script will make a folder inside of your working directory called "WebP" which can be seen in the image in the spoiler below.

The compression settings can be a little confusing but entering a lower number will add more compression/make the compression stronger. The way I would think of it is if you want a higher quality image at a cost of a bigger file size, enter a bigger number. Higher numbers are equal to higher quality. I have mentioned this a few times to prevent confusion but if you are still confused, feel free to comment or drop me a PM.

If you have made it to this point, you should have now successfully created an animated WebP image which is located in the "WebP" folder inside of your working directory.


This thread has taken me quite some time to make as I wanted to make everything as clear as possible so I hope this helps those looking to create WebP animations. If I have made any errors in this thread, feel free to let me know and I will fix them asap.


Last edited by Wraith ; edited 1 time in total

The following 4 users thanked Wraith for this useful post:

Nero (10-31-2021), Zesri (10-31-2021), PDC (10-31-2021), Vatasy (10-31-2021)
#2. Posted:
PDC
  • 2 Million
Status: Offline
Joined: Apr 27, 201011Year Member
Posts: 1,379
Reputation Power: 1376
Status: Offline
Joined: Apr 27, 201011Year Member
Posts: 1,379
Reputation Power: 1376
Thank you for creating this post, I do not have time to thoroughly part through it right now, but I will save and return to it.
#3. Posted:
Wraith
  • Graphics King
Status: Online
Joined: Sep 29, 20174Year Member
Posts: 2,641
Reputation Power: 21040
Motto: Discord - https://dc.wraithfx.com/
Motto: Discord - https://dc.wraithfx.com/
Status: Online
Joined: Sep 29, 20174Year Member
Posts: 2,641
Reputation Power: 21040
Motto: Discord - https://dc.wraithfx.com/
Some things have been updated on both this thread and the script.


  • Corrected default compression method to 4 (was originally 6) and updated thread images to match the change.

  • Removed text box on the script.

  • Added start, reset and quit options to the script.


All of the script changes were made by Zesri.
Users browsing this topic: None
Jump to:


RECENT POSTS

HOT TOPICS