{"id":6217,"date":"2020-04-09T15:00:33","date_gmt":"2020-04-09T13:00:33","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=6217"},"modified":"2021-04-22T11:08:56","modified_gmt":"2021-04-22T09:08:56","slug":"how-to-optimize-images-for-web","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/","title":{"rendered":"How to Optimize Images for the Web"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]For many entrepreneurs and marketers, visuals are essential for their business. Images can have a tremendous impact both on users and on a website\u2019s performance, which is why mastering image optimization is essential for your site\u2019s wellbeing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]What exactly is image optimization and how do you optimize images for web sites? We\u2019ll share with you all the necessary steps you need to take care of to ensure your images load without a hitch.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this roundup we\u2019ll walk you through the following topics:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#image-optimization-and-its-benefits\">Image Optimization and Its Benefits<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#optimization\">How to Optimize Images<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#optimization-tools\">Image Optimization Tools<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"image-optimization-and-its-benefits\"><\/a>Image Optimization and Its Benefits<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>When you optimize images, you reduce their size without jeopardizing the image quality<\/strong>. And when you reduce the size of your files, your pages load faster. This is important for both your SEO and your visitors. The faster your content fully loads, the lower the <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-bounce-rate-in-wordpress\/\">bounce rate<\/a> will be. Another thing to keep in mind when it comes to images is the imperative of good resolution, which means high-quality images. <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-increase-image-resolution-in-photoshop\">Increasing the resolution of an image<\/a> using tools like Photoshop is rather easy, so you have to excuse for skimping on that one. But, let&#8217;s go back to our topic today, which is image optimization for speed purposes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Around a decade ago, Google decided to include site speed among its relevant ranking factors. One of their webmasters, John Mueller, wrote back in 2016 that <a href=\"https:\/\/twitter.com\/JohnMu\/status\/802420206375079936\" target=\"_blank\" rel=\"noopener noreferrer\">websites should take less than 2-3 seconds to load<\/a>, and this is still relevant to this day.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Over time, Google has even developed tools such as <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google&#8217;s PageSpeed Insights<\/a>, to help people evaluate their website\u2019s speed. Countless other tools serve the same purpose, e.g. <a href=\"https:\/\/tools.pingdom.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pingdom<\/a>, <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GTmetrix<\/a>, or <a href=\"https:\/\/pageweight.imgix.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Page Weight<\/a> (which tells you how much images affect your page speed), but PageSpeed Insights remains quite popular among SEO experts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Don&#8217;t forget to <a href=\"https:\/\/qodeinteractive.com\/magazine\/free-seo-tools\/\">use optimization tools for better ranking<\/a>, some of which completely are free of charge.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If your images are too large, Google will probably not be able to crawl and index them, and this could be another contributing factor to lower rankings<\/strong>. Don\u2019t forget that some of your visitors come from Google Image Search (you can <a href=\"https:\/\/yoast.com\/image-search-google-analytics\/\" target=\"_blank\" rel=\"noopener noreferrer\">check your image traffic in Google Analytics<\/a>), so do your best to keep them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another benefit of using smaller image files is that <strong>you can create backups in no time<\/strong>. They also <strong>take up less storage space (which would reduce the cost of backup storage) and soak up less bandwidth<\/strong>. Most hosting plans come with certain bandwidth limits per plan, so you should use your images in a smart way.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"optimization\"><\/a>How to Optimize Images<\/h2>\n<p>[\/vc_column_text][vc_column_text]To ideally optimize your images, there are several things you need to take care of:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">File Formats <\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Image Dimensions<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Image Compression<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Image Names<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Blur Up Images<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;35px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">File Formatting<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/File-Formatting.png\" class=\"attachment-full size-full\" alt=\"File Formatting\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/File-Formatting.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/File-Formatting-300x169.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/File-Formatting-620x350.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s start by showing you how to choose the appropriate file format. There are numerous image formats out there, but the three most common ones are:[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">JPEG<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">this is one of the most widely used image file types on the web. It\u2019s a <strong>lossy kind of a format<\/strong>, which means that images are compressed, and some of their original quality is lost. The typical compression ratio is 10:1, so if your image has 10MB, after you export it as a JPEG file, it\u2019ll have 1MB in size. What\u2019s also great about JPEG files is that you can choose just how much you want to compress your image even in Photoshop or GIMP. The downside of saving your files as JPEG is that <strong>you can\u2019t get back the information that was thrown away during compression and there\u2019s no transparency support<\/strong>. Avoid it when saving images that are text-heavy or come with lots of defined lines, as they may come out looking blurry.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">PNG<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">is a <strong>lossless format that supports transparency<\/strong>. There are two types of PNG formats, <strong>PNG-8<\/strong>, and <strong>PNG-24<\/strong>. The former stands for images that are 8 bits per pixel (such as logos and images with simple colors), and the latter means an image is 24 bits per pixel (it supports up to 16 million colors, which makes it appropriate for complex photographs). Even though JPEG is more widespread, PNG is a standout choice when in need of transparent pixels.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">GIF<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">this is another <strong>common format that uses lossless compression<\/strong>. But, a GIF image contains <strong>only 256 colors<\/strong>, which makes it suitable for simple images that don\u2019t contain too many colors, such as banners. You could divide an image into multiple blocks, with each block containing 256 colors, so when you combine the blocks into a single image, you\u2019d have a file with far more colors. But, if you do this, your file will be quite large, so you might as well avoid it. <\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;35px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Image Dimensions<\/h3>\n<p>[\/vc_column_text][vc_column_text]Images you take with your smartphone or a professional camera have large resolutions of around 300 dpi and the dimensions of at least 2000 px and above. But photos that big aren\u2019t fit for websites, they take forever to load. Sure, you want your visuals to look impressive, but still, the load time needs to be low. That\u2019s why you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/resize-image-in-photoshop\/\">change the image size in Photoshop<\/a> <strong>or another image editing software of your choice before adding them to your website<\/strong>. The resolution itself ultimately doesn\u2019t matter as much as the weight of the image, which needs to stay below 100 kb, or 150kb max. But more on that in the next chapter.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Image Compression<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Compression.png\" class=\"attachment-full size-full\" alt=\"Image Compression\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Compression.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Compression-300x169.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Compression-620x350.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you overdo it and compress your image too much, that\u2019ll result in a small file size and a low-quality image. On the other hand, when a compression rate is not big, images have great quality but are also large. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As a rule of thumb, <strong>the overall weight of your website shouldn\u2019t surpass 2 MB. Ideally, the fast-loading website\u2019s size should be around 1 MB<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that in mind, <strong>consider keeping your images at around 150 KB or smaller. If you\u2019re using the PNG format, don\u2019t go over 100 KB<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are two types of compression: lossy and lossless. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Lossy or irreversible compression<\/strong> means some of the data and quality will be lost from the original version. Even after you considerably reduce the size of the file, it\u2019ll seem there are no noticeable differences. Of course, on closer inspection, those differences will be more apparent. If the new file size is too small, you may see some pixelated areas and jagged edges on your image.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Lossless compression<\/strong> is a method that allows you do reduce the image size without degrading its quality. No data is lost when a file is losslessly compressed, meaning the original data can be recovered anytime. However, since no data is removed, files can be compressed by no more than 50%.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Image Name<\/h3>\n<p>[\/vc_column_text][vc_column_text]Don\u2019t overlook this step. <strong>Giving proper names to your image files is important for image SEO, since Google and other search engines crawl names of your image files<\/strong>. Avoid generic names, but rather go down the descriptive route and <strong>include keywords<\/strong>. For instance, if there\u2019s an image of a car on your website, you could specify its make and model in the file name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s also <strong>important to optimize alt attributes a.k.a. text alternatives to images<\/strong>. If, for some reason, a browser can\u2019t render an image, the alternative text will show up instead. Even when a page fully loads, if you hover over an image, alt attributes appear. <strong>They matter quite a bit as they impact your website\u2019s SEO and increase the chances of your images appearing in Google image search<\/strong>. Just be careful not to overstuff your alt attributes with keywords, as search engines may penalize you for doing it.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Blurry Image Preview<\/h3>\n<p>[\/vc_column_text][vc_column_text]This step is all about <strong>creating the impression of fast-loading, high-quality images by loading the lower quality version of an image first<\/strong>. While your visitors wait for the website to fully load, the smaller version of the image appears. It\u2019s stretched to the original size and it seems blurry, but this lasts only for a wee bit of time, before the full-sized image loads. Although it requires some basic CSS knowledge, <a href=\"https:\/\/css-tricks.com\/the-blur-up-technique-for-loading-background-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">creating the blur up effect<\/a> is actually quite doable.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;creative-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"optimization-tools\"><\/a>Image Optimization Tools<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;35px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Optimization-Tools.png\" class=\"attachment-full size-full\" alt=\"Image Optimization Tools\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Optimization-Tools.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Optimization-Tools-300x169.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Image-Optimization-Tools-620x350.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Image optimization tools allow you to modify your images as per your needs. You can compress them, change file types, modify image dimensions, etc.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adobe Photoshop<\/h3>\n<p>[\/vc_column_text][vc_column_text]The most popular image editing tool is unquestionably <a href=\"https:\/\/www.photoshop.com\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Photoshop<\/a>. It packs some impressive image editing features, but the <strong><em>Save for Web<\/em> option<\/strong> is particularly interesting.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you need to reduce the size of one of your photos without jeopardizing its quality, use this option. It\u2019ll allow you to <strong>choose the image type, image quality, and dimensions<\/strong>. Pay attention to <em>Quality and Blur<\/em> options. By modifying them (even without touching other settings), you can maintain a high-quality image that doesn\u2019t weight much.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Quality-and-blur-Photoshop-options.jpg\" class=\"attachment-full size-full\" alt=\"Quality and blur Photoshop options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Quality-and-blur-Photoshop-options.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Quality-and-blur-Photoshop-options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Quality-and-blur-Photoshop-options-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Besides Photoshop, you can also use <a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gimp<\/a>, <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyPNG<\/a>, <a href=\"https:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JPEG Mini<\/a>, <a href=\"https:\/\/www.getpaint.net\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Paint.NET<\/a>, <a href=\"https:\/\/imageoptim.com\/mac\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a> (for Mac users), <a href=\"https:\/\/trimage.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Trimage<\/a>, <a href=\"https:\/\/ezgif.com\/optimize\" target=\"_blank\" rel=\"noopener noreferrer\">Ezgif<\/a>, and others.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Image Optimization Plugins in WordPress<\/h3>\n<p>[\/vc_column_text][vc_column_text]WordPress comes with lots of nifty plugins that can help you optimize your photos without too much fuss. But, no matter how powerful each of them is, you should still <strong>resize your images before uploading them to WordPress, or else you could lose lots of precious hosting space<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some of the best plugins for image optimization include <a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimole<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\" target=\"_blank\" rel=\"noopener noreferrer\">EWWW Image Optimizer Cloud<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">Smush<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimus \u2013 WordPress Image Optimizer<\/a>, and <a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">Compress JPEG &amp; PNG Images<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Smush is the most popular one, with over 1 million active downloads, but no matter the plugin you choose, all will help you optimize images so that your website can load faster. The one thing you could look out for is that <strong>a plugin you install can compress and optimize images externally, on its own servers<\/strong>. That way your page load time won\u2019t be affected by image sizes.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Image optimization is one of the determining factors for your website\u2019s flawless performance. If done poorly, you risk low rankings, high load times, as well as huge bounce and low conversion rates. Optimizing images properly will not only help you lead a more successful online business, but it\u2019ll save you lots of site\u2019s storage you\u2019ll surely need as your website continues to develop and expand. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]No good ever came from bad UX, so follow our tips on how to optimize images for the web, and your website will work like a clockwork. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Image optimization is one of the determining factors for your website\u2019s flawless performance. Discover how to optimize images for the web in a few easy steps.<\/p>\n","protected":false},"author":4,"featured_media":7871,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[27,4],"class_list":["post-6217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-content","tag-tips"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/6217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=6217"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/6217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/7871"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=6217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=6217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=6217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}