{"id":6195,"date":"2021-12-03T18:29:05","date_gmt":"2021-12-03T18:29:05","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=6195"},"modified":"2022-04-08T17:45:48","modified_gmt":"2022-04-08T14:45:48","slug":"how-to-optimize-an-html-website","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-to-optimize-an-html-website\/","title":{"rendered":"How To Optimize An HTML Website?"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Difference between HTML and WordPress<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a> is a flexible content management system (CMS) that allows a user to create, edit, organize and publish content. On the other hand, <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTML\" data-type=\"URL\" data-id=\"https:\/\/en.wikipedia.org\/wiki\/HTML\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a> 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 &#8211; one for each page on the site.&nbsp;Don&#8217;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.<\/p>\n\n\n\n<p>If your site doesn\u2019t require too many regular updates, or any additional content, simple HTML is a better alternative as it will make your website perform faster.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Why is image optimization for your HTML site important?<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Page Speed<\/strong> &#8211; 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.<\/li><li><strong>User Experience (UX)<\/strong> &#8211; When your HTML site takes too long to load, it isn\u2019t 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.<\/li><li><strong>Search Engine Optimization (SEO)<\/strong> &#8211; 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\u2019s search algorithm. Compressing and optimizing the images of your HTML site will help you avoid the penalties of having a slow website.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is Archive Optimizer?<\/h2>\n\n\n\n<p><a href=\"https:\/\/shortpixel.com\/archives\">Archive Optimizer<\/a> is a tool our team at <a rel=\"noreferrer noopener\" href=\"https:\/\/shortpixel.com\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\" target=\"_blank\">ShortPixel<\/a> has integrated in every client\u2019s 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, <strong>you can compress and optimize all the images for your HTML site in one go<\/strong>.<\/p>\n\n\n\n<p>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 (<a href=\"https:\/\/help.shortpixel.com\/article\/11-lossy-glossy-or-lossless-which-one-is-the-best-for-me\">Lossy, Glossy and Lossless<\/a>), resizing, WebP\/AVIF generation, ability to remove EXIF data, and the ability to convert CMYK to RGB.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-step guide to optimize your HTML site images<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>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. <\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.57.jpeg\"><img decoding=\"async\" width=\"665\" height=\"216\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.57.jpeg\" alt=\"\" class=\"wp-image-6196\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.57.jpeg 665w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.57-300x97.jpeg 300w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/figure>\n\n\n\n<p>2. From the ShortPixel <a rel=\"noreferrer noopener\" href=\"https:\/\/shortpixel.com\/dashboard\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/dashboard\" target=\"_blank\">dashboard<\/a>, select <a rel=\"noreferrer noopener\" href=\"https:\/\/shortpixel.com\/archives\" target=\"_blank\">Archive Optimizer<\/a>, and drop the archive inside the outlined rectangle (or click it and manually select the archive). Eventually, click the <strong>Options <\/strong>drop-down and adjust the settings, and then hit the <strong>Start Upload<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.58.jpeg\"><img decoding=\"async\" width=\"920\" height=\"563\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.58.jpeg\" alt=\"\" class=\"wp-image-6197\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.58.jpeg 920w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.58-300x184.jpeg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.58-768x470.jpeg 768w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/a><\/figure>\n\n\n\n<p>3. Wait until the process is finished, and then download your optimized files. You can see in the example below that <strong>we literally compressed almost 85% our HTML website<\/strong>. Simple as that!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.59.jpeg\"><img decoding=\"async\" width=\"779\" height=\"209\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.59.jpeg\" alt=\"\" class=\"wp-image-6198\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.59.jpeg 779w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.59-300x80.jpeg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/11\/WhatsApp-Image-2021-11-22-at-20.18.59-768x206.jpeg 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Get started now!<\/h2>\n\n\n\n<p>You can sign up with ShortPixel by clicking <a rel=\"noreferrer noopener\" href=\"https:\/\/shortpixel.com\/free-sign-up\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/free-sign-up\" target=\"_blank\">this link<\/a>. Once you enter your e-mail, you will be able login to your account and start using the Archive Optimizer <a rel=\"noreferrer noopener\" href=\"https:\/\/shortpixel.com\/archives\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/archives\" target=\"_blank\">here<\/a>. Looking forward to seeing you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6212,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/6195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=6195"}],"version-history":[{"count":7,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/6195\/revisions"}],"predecessor-version":[{"id":6213,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/6195\/revisions\/6213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/6212"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=6195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=6195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=6195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}