Resize and Compress Images in HTML CSS & JavaScript
 |
| Resize and Compress Images in HTML CSS & JavaScript |
The Ultimate Guide to Image Resizing and Compression for Improved Website Performance
Introduction
In today's digital age, where attention spans are short and website performance is crucial, the importance of image resizing and compression cannot be overstated. High-quality visuals are essential for engaging users and conveying your message effectively, but they can also significantly impact your website's loading speed. In this comprehensive guide, we will delve into the world of image resizing and compression techniques, providing you with valuable insights and strategies to optimize your website's performance and outrank the competition on Google.
Understanding Image Resizing
Image resizing involves adjusting the dimensions of an image to fit within specific requirements without distorting its aspect ratio. When it comes to optimizing your website's loading speed, resizing your images to the appropriate dimensions is crucial. By reducing the file size of your images, you can improve loading times, enhance user experience, and boost your website's search engine rankings.
The Benefits of Image Compression
While resizing addresses the issue of image dimensions, image compression takes it a step further by reducing the file size of the image itself. Image compression techniques eliminate unnecessary data from the image file, resulting in a smaller file size without compromising its visual quality. The advantages of image compression are manifold: faster page load times, reduced bandwidth consumption, and improved user satisfaction.
Choosing the Right Image Format
When it comes to image optimization, selecting the appropriate image format is essential. There are several common image formats, each with its own strengths and best use cases. Let's explore the three most popular formats:
1. JPEG (Joint Photographic Experts Group)
JPEG is the most widely used image format, ideal for photographs and complex images with many colors. It utilizes lossy compression, which means that some data is discarded to achieve smaller file sizes. However, it's important to strike a balance between compression and visual quality to maintain an appealing appearance.
2. PNG (Portable Network Graphics)
PNG is a versatile image format that supports lossless compression, meaning it retains all image data without loss of quality. It is best suited for images with transparency or graphics with sharp lines, such as logos and icons. PNG files are generally larger than their JPEG counterparts, so consider the balance between quality and file size.
3. WebP
WebP is a relatively new image format developed by Google. It provides both lossy and lossless compression, offering smaller file sizes without compromising visual quality. While WebP is supported by modern web browsers, it's essential to consider compatibility when implementing it on your website.
Best Practices for Image Resizing and Compression
<!DOCTYPE html><!-- Coding By CodingNepal - youtube.com/codingnepal --><html lang="en" dir="ltr"><head><meta charset="utf-8"><title>Image Resizer JavaScript | CodingNepal</title><link rel="stylesheet" href="style.css"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="script.js" defer></script></head><body><style>/* Import Google font - Poppins */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #927DFC;}.wrapper{width: 450px;height: 288px;padding: 30px;background: #fff;border-radius: 9px;transition: height 0.2s ease;}.wrapper.active{height: 537px;}.wrapper .upload-box{height: 225px;display: flex;cursor: pointer;align-items: center;justify-content: center;flex-direction: column;border-radius: 5px;border: 2px dashed #afafaf;}.wrapper.active .upload-box{border: none;}.upload-box p{font-size: 1.06rem;margin-top: 20px;}.wrapper.active .upload-box p{display: none;}.wrapper.active .upload-box img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}.wrapper .content{opacity: 0;margin-top: 28px;pointer-events: none;}.wrapper.active .content{opacity: 1;pointer-events: auto;transition: opacity 0.5s 0.05s ease;}.content .row{display: flex;justify-content: space-between;}.content .row .column{width: calc(100% / 2 - 15px);}.row .column label{font-size: 1.06rem;}.sizes .column input{width: 100%;height: 49px;outline: none;margin-top: 7px;padding: 0 15px;font-size: 1.06rem;border-radius: 4px;border: 1px solid #aaa;}.sizes .column input:focus{padding: 0 14px;border: 2px solid #927DFC;}.content .checkboxes{margin-top: 20px;}.checkboxes .column{display: flex;align-items: center;}.checkboxes .column input{width: 17px;height: 17px;margin-right: 9px;accent-color: #927DFC;}.content .download-btn{width: 100%;color: #fff;outline: none;border: none;cursor: pointer;font-size: 1.06rem;border-radius: 5px;padding: 15px 0;margin: 30px 0 10px;background: #927DFC;text-transform: uppercase;}</style><div class="wrapper"><div class="upload-box"><input type="file" accept="image/*" hidden><img src="https://www.codingnepalweb.com/demos/resize-and-compress-image-javascript/upload-icon.svg" alt=""><p>Browse File to Upload</p></div><div class="content"><div class="row sizes"><div class="column width"><label>Width</label><input type="number"></div><div class="column height"><label>Height</label><input type="number"></div></div><div class="row checkboxes"><div class="column ratio"><input type="checkbox" id="ratio" checked><label for="ratio">Lock aspect ratio</label></div><div class="column quality"><input type="checkbox" id="quality"><label for="quality">Reduce quality</label></div></div><button class="download-btn">Download Image</button></div></div><script>const uploadBox = document.querySelector(".upload-box"),previewImg = uploadBox.querySelector("img"),fileInput = uploadBox.querySelector("input"),widthInput = document.querySelector(".width input"),heightInput = document.querySelector(".height input"),ratioInput = document.querySelector(".ratio input"),qualityInput = document.querySelector(".quality input"),downloadBtn = document.querySelector(".download-btn");let ogImageRatio;const loadFile = (e) => {const file = e.target.files[0]; // getting first user selected fileif(!file) return; // return if user hasn't selected any filepreviewImg.src = URL.createObjectURL(file); // passing selected file url to preview img srcpreviewImg.addEventListener("load", () => { // once img loadedwidthInput.value = previewImg.naturalWidth;heightInput.value = previewImg.naturalHeight;ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight;document.querySelector(".wrapper").classList.add("active");});}widthInput.addEventListener("keyup", () => {// getting height according to the ratio checkbox statusconst height = ratioInput.checked ? widthInput.value / ogImageRatio : heightInput.value;heightInput.value = Math.floor(height);});heightInput.addEventListener("keyup", () => {// getting width according to the ratio checkbox statusconst width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;widthInput.value = Math.floor(width);});const resizeAndDownload = () => {const canvas = document.createElement("canvas");const a = document.createElement("a");const ctx = canvas.getContext("2d");// if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0// 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0const imgQuality = qualityInput.checked ? 0.5 : 1.0;// setting canvas height & width according to the input valuescanvas.width = widthInput.value;canvas.height = heightInput.value;// drawing user selected image onto the canvasctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);// passing canvas data url as href value of <a> elementa.href = canvas.toDataURL("image/jpeg", imgQuality);a.download = new Date().getTime(); // passing current time as download valuea.click(); // clicking <a> element so the file download}downloadBtn.addEventListener("click", resizeAndDownload);fileInput.addEventListener("change", loadFile);uploadBox.addEventListener("click", () => fileInput.click());</script></body></html>
To ensure optimal image performance on your website, follow these best practices:
1. Resize Images to the Required Dimensions
Before uploading images to your website, ensure they are resized to fit the intended display dimensions. Avoid using large images and relying on HTML or CSS to scale them down, as this increases load times. Use image editing software or online tools to resize your images accurately.
2. Use Compression Tools
Leverage image compression tools to reduce file sizes without sacrificing visual quality. There are numerous online and offline tools available that automatically compress images while maintaining their integrity. Experiment with different tools and settings to find the right balance for your images.
3. Optimize Image Alt Text
Alt text provides alternative information for users who cannot view images, and it also plays a crucial role in SEO. Use descriptive and keyword-rich alt text that accurately describes the image content. This helps search engines understand the context of your images, improving your website's visibility in search results.
4. Lazy Loading
Implement lazy loading techniques to defer the loading of images until the user scrolls to the relevant section. This technique can significantly improve initial page load times by prioritizing essential content. Consider using plugins or JavaScript libraries that enable lazy loading effortlessly.
5. Content Delivery Networks (CDNs)
Utilize a content delivery network to distribute your images across multiple servers worldwide. CDNs store copies of your website's static content, such as images, in various locations, ensuring faster delivery to users regardless of their geographical location. This distributed approach reduces latency and improves the overall user experience.
Conclusion
Optimizing your website's image resizing and compression techniques is essential for achieving faster load times, enhancing user experience, and outranking your competition on Google. By following the best practices outlined in this guide, you can ensure your website delivers visually appealing content without sacrificing performance. Remember to regularly audit your website's images, test different optimization techniques, and stay up-to-date with emerging trends in image optimization. With a well-optimized website, you can captivate your audience, drive more organic traffic, and achieve success in the competitive digital landscape.
