Whether you are developing an HTML website all by yourself, from scratch, or utilizing a template/online tool to help out, it is really important to learn why and how to optimize your images.
Difference between HTML and WordPress
WordPress is a flexible content management system (CMS) that allows a user to create, edit, organize and publish content. On the other hand, HTML is a markup language that allows for static page creation on the web. A static HTML website is composed of a library of HTML files – one for each page on the site. Don’t get confused, though: any website is, in the end, presented to you in HTML format; the difference is how it is generated, either dynamically by WordPress or by hand by yourself.
If your site doesn’t require too many regular updates, or any additional content, simple HTML is a better alternative as it will make your website perform faster.
Why is image optimization for your HTML site important?
- Page Speed – Optimizing your images improves the page speed of your HTML site. Large, unoptimized images can make your website slow and clunky. Users are always in a rush, and they will definitely not wait for your site to load for long. It will go a long way toward ensuring that it loads fast if you decide to compress and optimize your images.
- User Experience (UX) – When your HTML site takes too long to load, it isn’t giving your users the best experience; they expect the website to load promptly. That being said, optimizing your images is one of the numerous actions you can take to improve the user experience.
- Search Engine Optimization (SEO) – Image optimization helps ensure that your images rank on search engines like Google, and it will also be beneficial to the overall SEO of your website. Moreover, speed is an important ranking factor in Google’s search algorithm. Compressing and optimizing the images of your HTML site will help you avoid the penalties of having a slow website.
What is Archive Optimizer?
Archive Optimizer is a tool our team at ShortPixel has integrated in every client’s account, that allows you to upload a ZIP file with image files inside, wait until magic happens, and then download it with the same images optimized while keeping the original folder structure. So, besides a multitude of other possibilities, you can compress and optimize all the images for your HTML site in one go.
You can upload ZIP archives with any type of files inside, including photo albums, HTML websites, etc. Only the JPG, PNG, GIF and PDF files will be optimized. Some notable features include: the ability to change the compression level (Lossy, Glossy and Lossless), resizing, WebP/AVIF generation, ability to remove EXIF data, and the ability to convert CMYK to RGB.
Step-by-step guide to optimize your HTML site images
- Create a ZIP archive with your files. In our example below, we are zipping all our website, including CSS, JS and fonts. The Archive Optimizer will correctly ignore them.
2. From the ShortPixel dashboard, select Archive Optimizer, and drop the archive inside the outlined rectangle (or click it and manually select the archive). Eventually, click the Options drop-down and adjust the settings, and then hit the Start Upload button.
3. Wait until the process is finished, and then download your optimized files. You can see in the example below that we literally compressed almost 85% our HTML website. Simple as that!