{"id":72116,"date":"2019-10-23T04:18:52","date_gmt":"2019-10-23T11:18:52","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/"},"modified":"2019-10-23T04:18:52","modified_gmt":"2019-10-23T11:18:52","slug":"a-guide-to-optimizing-images-for-mobile","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/","title":{"rendered":"A Guide To Optimizing Images For Mobile"},"content":{"rendered":"A Guide To Optimizing Images For Mobile<\/title><\/p>\n<article>\n<header>\n<h1>A Guide To Optimizing Images For Mobile<\/h1>\n<address>Suzanne Scacca<\/address>\n<p> <time datetime=\"2019-10-22T12:30:59+02:00\">2019-10-22T12:30:59+02:00<\/time><time datetime=\"2019-10-23T11:05:20+00:00\">2019-10-23T11:05:20+00:00<\/time><\/header>\n<p>(<em>This is a sponsored article.<\/em>) You know how critical it is to <a href=\"https:\/\/www.smashingmagazine.com\/2019\/06\/web-designers-speed-mobile-websites\/\">build websites that load quickly<\/a>. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now that Google has made mobile-first indexing the default, you really can\u2019t afford to let any performance optimizations fall by the wayside what with how difficult it can be to get your mobile site as speedy as your desktop.<\/p>\n<p>Google takes many factors into account when ranking a website and visitors take maybe a handful of factors into account when deciding to explore a site. At the intersection of the two is <strong>website speed<\/strong>.<\/p>\n<p>It should come as no surprise that images cause a lot of the problems websites have with speed. And while you could always just trim the fat and build more minimally designed and content-centric sites, why compromise?<\/p>\n<p><strong>Images are a powerful force on the web.<\/strong><\/p>\n<p>Not only can well-chosen images improve the aesthetics of a site, but they also make it easier for your visitors to consume content. Of course, there are the SEO benefits of images, too.<\/p>\n<p>So, today, let\u2019s focus on how you can still design with as many images as you want without slowing down your website. This will require you to update your image optimization strategy and adopt a tool called <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>, but it shouldn\u2019t take much work from you to get this new system in place.<\/p>\n<h3>The Necessity Of An Image Optimization Strategy For Mobile<\/h3>\n<p>According to <a href=\"https:\/\/httparchive.org\/reports\/page-weight\">HTTP Archive<\/a>:<\/p>\n<ul>\n<li>The median size of a <strong>desktop website in 2019 is 1939.5 KB<\/strong>.<\/li>\n<li>The median size of a <strong>mobile website in 2019 is 1745.0 KB<\/strong>.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a9ed8892-e624-4d14-b3d9-4e52e4e79a2d\/http-archive-total-kilobytes.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-total-kilobytes.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a9ed8892-e624-4d14-b3d9-4e52e4e79a2d\/http-archive-total-kilobytes.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a9ed8892-e624-4d14-b3d9-4e52e4e79a2d\/http-archive-total-kilobytes.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a9ed8892-e624-4d14-b3d9-4e52e4e79a2d\/http-archive-total-kilobytes.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a9ed8892-e624-4d14-b3d9-4e52e4e79a2d\/http-archive-total-kilobytes.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-total-kilobytes.png?w=900\" sizes=\"100vw\" alt=\"HTTP Archive desktop and mobile kilobytes\"><\/a><figcaption>\n HTTP Archive charts how many kilobytes desktop and mobile websites are, on average. (Source: <a href=\"https:\/\/httparchive.org\/reports\/page-weight\">HTTP Archive<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a9ed8892-e624-4d14-b3d9-4e52e4e79a2d\/http-archive-total-kilobytes.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>If we don\u2019t get a handle on this growth, it\u2019s going to be impossible to meet consumer and Google demands when it comes to providing fast websites. That or we\u2019re going to have to get <em>really<\/em> good at optimizing for speed.<\/p>\n<p>Speaking of speed, let\u2019s see what HTTP Archive has to say about image weight.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/df7e14c3-ad1d-4ea9-9e7a-dff3b04590a5\/http-archive-image-bytes.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-image-bytes.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/df7e14c3-ad1d-4ea9-9e7a-dff3b04590a5\/http-archive-image-bytes.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/df7e14c3-ad1d-4ea9-9e7a-dff3b04590a5\/http-archive-image-bytes.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/df7e14c3-ad1d-4ea9-9e7a-dff3b04590a5\/http-archive-image-bytes.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/df7e14c3-ad1d-4ea9-9e7a-dff3b04590a5\/http-archive-image-bytes.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-image-bytes.png?w=900\" sizes=\"100vw\" alt=\"HTTP Archive image bytes desktop vs mobile\"><\/a><figcaption>\n HTTP Archive plots out how much images weigh on desktop vs mobile websites. (Source: <a href=\"https:\/\/httparchive.org\/reports\/page-weight\">HTTP Archive<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/df7e14c3-ad1d-4ea9-9e7a-dff3b04590a5\/http-archive-image-bytes.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>As it stands today:<\/p>\n<ul>\n<li>The median size of <strong>images on desktop is 980.3 KB<\/strong> out of the total 1939.5 KB.<\/li>\n<li>The median size of <strong>images on mobile is 891.7 KB<\/strong> out of the total 1745.0 KB.<\/li>\n<\/ul>\n<p>Bottom line: images add a lot of weight to websites and consume a lot of bandwidth. And although this data shows that the median size of images on mobile is less than their desktop counterparts, the proportion of images-to-website is slightly larger.<\/p>\n<p>That said, if you have the right image optimization strategy in place, this can easily be remedied.<\/p>\n<p>Here is what this strategy should entail:<\/p>\n<h4>1. Size Your Images Correctly<\/h4>\n<p>There are lots of tedious tasks you\u2019d have to handle without the right automations in place. Like resizing your images.<\/p>\n<p>But you have to do it, right?<\/p>\n<p>Let\u2019s say you use <a href=\"https:\/\/unsplash.com\/photos\/k6SFjtLiZWI\">Unsplash<\/a> to source a number of images for a website you\u2019re working on.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fc72e8cd-cb58-4854-97c8-59e2a1671105\/unsplash-image.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/unsplash-image.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fc72e8cd-cb58-4854-97c8-59e2a1671105\/unsplash-image.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fc72e8cd-cb58-4854-97c8-59e2a1671105\/unsplash-image.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fc72e8cd-cb58-4854-97c8-59e2a1671105\/unsplash-image.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fc72e8cd-cb58-4854-97c8-59e2a1671105\/unsplash-image.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/unsplash-image.png?w=900\" sizes=\"100vw\" alt=\"Unsplash photo from Mark Boxx\"><\/a><figcaption>\n An example of a photo you\u2019d find on Unsplash, this one comes from Mark Boss. (Source: <a href=\"https:\/\/unsplash.com\/photos\/k6SFjtLiZWI\">Unsplash<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fc72e8cd-cb58-4854-97c8-59e2a1671105\/unsplash-image.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Unlike premium stock repositories where you might get to choose what size or file format you download the file in, you don\u2019t get a choice here.<\/p>\n<p>So, you download the image and any others you need. You then have the choice to use the image as is or manually resize it. After looking at the size of the file and the dimensions of the image, you realize it would be a good idea to resize it.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/04421551-6e73-44e5-be46-a3f374e3bc95\/unsplash-image-sizes.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/unsplash-image-sizes.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/04421551-6e73-44e5-be46-a3f374e3bc95\/unsplash-image-sizes.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/04421551-6e73-44e5-be46-a3f374e3bc95\/unsplash-image-sizes.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/04421551-6e73-44e5-be46-a3f374e3bc95\/unsplash-image-sizes.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/04421551-6e73-44e5-be46-a3f374e3bc95\/unsplash-image-sizes.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/unsplash-image-sizes.png?w=900\" sizes=\"100vw\" alt=\"Original dimensions of image from Unsplash\"><\/a><figcaption>\n These are the original dimensions of the Unsplash image: 5591\u00d73145 px. (Source: <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/04421551-6e73-44e5-be46-a3f374e3bc95\/unsplash-image-sizes.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>This particular image exported as a 3.6 MB file and a 5591\u00d73145 px image. That\u2019s way too big for any website.<\/p>\n<p>There\u2019s no reason to upload images larger than 1 MB \u2014 and that\u2019s even pushing it. As for dimensions? Well, that depends on the width of your site, but I think somewhere between 1200 and 2000 px should be your max.<\/p>\n<p>You\u2019re going to have to go through this same process whether images come from a stock site or from someone\u2019s DSLR. The point is, no source image is ever going to come out the \u201cright\u201d size for your website, which means resizing has to take place at some point.<\/p>\n<p>What\u2019s more, responsive websites display images in different sizes depending on the device or browser they\u2019re viewed on. And then there are the different use cases \u2014 like full-sized image vs. thumbnail or full-sized product photo vs. featured image.<\/p>\n<p><strong>So, there\u2019s more resizing that has to be done even after you\u2019ve gone through the trouble of manually resizing them.<\/strong><\/p>\n<p>Here\u2019s what you <em>shouldn\u2019t<\/em> do:<\/p>\n<ul>\n<li>Resize images one-by-one on your own. It\u2019s time-consuming and inefficient.<\/li>\n<li>Rely on browser resizing to display your images responsively as it can cause issues.<\/li>\n<\/ul>\n<p>Instead, you can integrate your existing image server (on your web host) or external storage service (like S3) with ImageKit. Or you can use ImageKit\u2019s Media Library to store your files.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4efc97b2-cbda-462f-840e-9706e1494fcf\/imagekit-image-upload.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-image-upload.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4efc97b2-cbda-462f-840e-9706e1494fcf\/imagekit-image-upload.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4efc97b2-cbda-462f-840e-9706e1494fcf\/imagekit-image-upload.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4efc97b2-cbda-462f-840e-9706e1494fcf\/imagekit-image-upload.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4efc97b2-cbda-462f-840e-9706e1494fcf\/imagekit-image-upload.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-image-upload.png?w=900\" sizes=\"100vw\" alt=\"ImageKit Media Library upload\"><\/a><figcaption>\n This is how easy it is to upload a new file to the ImageKit Media Library. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4efc97b2-cbda-462f-840e-9706e1494fcf\/imagekit-image-upload.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>As you can see, ImageKit has accepted the upload of this Unsplash photo at its original dimensions and sizes. The same goes for wherever your files originate from.<\/p>\n<p>However, once you integrate your images or image storage with ImageKit, the tool will take control of your image sizing. You can see how that\u2019s done here:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f2bcc92-c9ad-4444-979d-6a4ba0390938\/imagekit-url-endpoints.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-url-endpoints.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f2bcc92-c9ad-4444-979d-6a4ba0390938\/imagekit-url-endpoints.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f2bcc92-c9ad-4444-979d-6a4ba0390938\/imagekit-url-endpoints.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f2bcc92-c9ad-4444-979d-6a4ba0390938\/imagekit-url-endpoints.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f2bcc92-c9ad-4444-979d-6a4ba0390938\/imagekit-url-endpoints.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-url-endpoints.png?w=900\" sizes=\"100vw\" alt=\"ImageKit image URL endpoints\"><\/a><figcaption>\n ImageKit image URL endpoints enable users to more easily control image resizing parameters. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f2bcc92-c9ad-4444-979d-6a4ba0390938\/imagekit-url-endpoints.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Let me briefly explain what you\u2019re looking at above:<\/p>\n<ul>\n<li>The <strong>Image Origin Preference<\/strong> tells ImageKit where images need to be optimized from. In this case, it\u2019s the ImageKit Media Library and they\u2019ll be served over my website.<\/li>\n<li>The <strong>Old Image URL<\/strong> is a reminder of where our images lived on the server.<\/li>\n<li>The <strong>New Image URLs<\/strong> explains where your images will be optimized through ImageKit.<\/li>\n<\/ul>\n<p>The formula is simple enough. You take the original URL for your image and you transform it with the new ImageKit URL.<\/p>\n<p>The ImageKit URL alone will instantly shrink the size of your image files. However, if you want to do some resizing of your image\u2019s dimensions while you\u2019re at it, you can use transformation parameters to do so.<\/p>\n<p>For example, this is the Unsplash photo as seen from the media library of my website. It lives on my own servers, which is why the address shows my own URL:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2d024ba2-5531-4af6-9c9d-8fdf7a84857e\/imagekit-full-sized.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-full-sized.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2d024ba2-5531-4af6-9c9d-8fdf7a84857e\/imagekit-full-sized.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2d024ba2-5531-4af6-9c9d-8fdf7a84857e\/imagekit-full-sized.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2d024ba2-5531-4af6-9c9d-8fdf7a84857e\/imagekit-full-sized.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2d024ba2-5531-4af6-9c9d-8fdf7a84857e\/imagekit-full-sized.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-full-sized.png?w=900\" sizes=\"100vw\" alt=\"An Unsplash image without resizing\"><\/a><figcaption>\n How a full-sized image from Unsplash might appear if you leave it as is on your server. (Source: <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2d024ba2-5531-4af6-9c9d-8fdf7a84857e\/imagekit-full-sized.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>To see what it looks like once ImageKit has transformed it, I swap out my domain name with the endpoint provided by ImageKit. I then add my image resizing parameters (<a href=\"https:\/\/synd.co\/2N3fiTb\">they allow you to do more than just resize<\/a>, too) and reattach the remainder of the URL that points to my image storage.<\/p>\n<p>This is what happens when I use ImageKit to automatically resize my image to 1000\u00d7560 pixels:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/853235ec-64e9-4926-a03e-90358f4221d2\/imagekit-resized.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-resized.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/853235ec-64e9-4926-a03e-90358f4221d2\/imagekit-resized.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/853235ec-64e9-4926-a03e-90358f4221d2\/imagekit-resized.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/853235ec-64e9-4926-a03e-90358f4221d2\/imagekit-resized.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/853235ec-64e9-4926-a03e-90358f4221d2\/imagekit-resized.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-resized.png?w=900\" sizes=\"100vw\" alt=\"ImageKit endpoint image resizing\"><\/a><figcaption>\n ImageKit endpoints enable users to define how their images are to be resized like in this example. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/853235ec-64e9-4926-a03e-90358f4221d2\/imagekit-resized.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>To create this resized image, I transformed the ImageKit URL into the following:<\/p>\n<p><em>https:\/\/imagekit.io\/vq1l4ywcv\/<strong>tr:w-1000,h-560\/\u2026<\/strong><\/em><\/p>\n<p>It\u2019s the width (w-) and height (h-) parameters that reduced the file\u2019s dimensions.<\/p>\n<p>Now, as you can see, this isn\u2019t as pixel-perfect as the original image, but that\u2019s because I have quite a bit of compression applied to the file (80%). I\u2019ll cover how that works below.<\/p>\n<p>In the meantime, let\u2019s focus on how great the image still looks as well as the gains we\u2019re about to get in speed.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e3843ad-cecb-4457-9502-0ff2005019b6\/imagekit-resized-photo.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-resized-photo.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e3843ad-cecb-4457-9502-0ff2005019b6\/imagekit-resized-photo.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e3843ad-cecb-4457-9502-0ff2005019b6\/imagekit-resized-photo.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e3843ad-cecb-4457-9502-0ff2005019b6\/imagekit-resized-photo.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e3843ad-cecb-4457-9502-0ff2005019b6\/imagekit-resized-photo.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-resized-photo.png?w=900\" sizes=\"100vw\" alt=\"ImageKit resizing example on original Unsplash photo\"><\/a><figcaption>\n This is what can happen after ImageKit users resize their images. (Source: <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e3843ad-cecb-4457-9502-0ff2005019b6\/imagekit-resized-photo.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Previously, this was a 3.6 MB file for the 5591\u00d73145 px image. Now, it\u2019s a <strong>128 KB<\/strong> file for the 1000\u00d7560 px image.<\/p>\n<p>To sweeten the deal further, ImageKit makes it easy to resize your images this way using URL-based image transformation. Essentially, it works like this:<\/p>\n<ul>\n<li>You save one master image to ImageKit\u2019s media library or your preferred server.<\/li>\n<li>ImageKit automatically uses multiple techniques to bring down the image size significantly.<\/li>\n<li>You can then use ImageKit\u2019s resizing and cropping parameters to modify each image to cater to different device resolutions and sizes.<\/li>\n<\/ul>\n<p>When <a href=\"https:\/\/imagekit.io\/blog\/91mobiles-image-optimization-imagekit-case-study\/\">91mobiles<\/a> took advantage of this form of image optimization, it saved its website 3.5 TB every month of bandwidth. And they didn\u2019t have to do anything but integrate with the platform. There was no need to move their images to ImageKit or another third-party storage service. It all took place within their legacy infrastructure.<\/p>\n<h4>2. Use Faster-loading Image Formats<\/h4>\n<p>It\u2019s not just the size of your images that drain storage space and bandwidth. The file types you use have an impact, too.<\/p>\n<p><strong>PNGs<\/strong>, in general, are used for things like logos, images containing text and other super-fine images that have a transparent background. While you can use them to save your photos, they tend to produce the largest sizes. Even when lossless compression is applied, PNGs still remain larger in size than other file types.<\/p>\n<p><strong>GIFs<\/strong> are the animated counterpart of PNGs and use lossless compression as well.<\/p>\n<p><strong>JPGs<\/strong>, on the other hand, are best suited for colorful images and photos. They\u2019re smaller in size and they shrink down with lossy compression. It\u2019s possible to compress JPGs enough to get them to a manageable size, but you have to be careful as lossy compression degrades the overall quality of a file and there\u2019s no turning back once it\u2019s been done.<\/p>\n<p><strong>WebPs<\/strong> have been gaining in popularity since Google introduced them in the early 2010s. According to a Google study, <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\">WebPs can be anywhere between 25% and 34% smaller than JPGs<\/a>. What\u2019s more, you can use both lossy and lossless compression on WebPs to get them down to even smaller sizes.<\/p>\n<p>Something to keep in mind with WebPs is that they\u2019re not universally accepted. As of writing this, WebPs aren\u2019t accepted by iOS devices. However, the latest versions of all other browsers, Google or otherwise, will gladly display them.<\/p>\n<p>As for how ImageKit helps with this, it\u2019s simple really:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/072aa21f-3cc8-4dfb-986a-5890ca38c878\/imagekit-image-format-settings.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-image-format-settings.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/072aa21f-3cc8-4dfb-986a-5890ca38c878\/imagekit-image-format-settings.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/072aa21f-3cc8-4dfb-986a-5890ca38c878\/imagekit-image-format-settings.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/072aa21f-3cc8-4dfb-986a-5890ca38c878\/imagekit-image-format-settings.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/072aa21f-3cc8-4dfb-986a-5890ca38c878\/imagekit-image-format-settings.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-image-format-settings.png?w=900\" sizes=\"100vw\" alt=\"Image Kit image format settings\"><\/a><figcaption>\n This ImageKit setting puts the responsibility on ImageKit to serve the best file format. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/072aa21f-3cc8-4dfb-986a-5890ca38c878\/imagekit-image-format-settings.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>When this setting is configured, ImageKit automatically determines the best file format to deliver each of your files in. It takes into account what the original image format and content was along with whether or not the visitor\u2019s device supports it.<\/p>\n<p>JPGs, PNGs and GIFs will all be converted into WebPs when possible \u2014 say, if the visitor visits from Chrome (which accepts them). If it\u2019s not possible \u2014 say, if the visitor visits from Safari (which doesn\u2019t accept them) \u2014 ImageKit will convert to the best (i.e. smallest) format with the defined transformations. This might be a PNG or JPG.<\/p>\n<p><a href=\"https:\/\/imagekit.io\/blog\/nykaa-image-management-optimization-imagekit-case-study\/\">Nykaa<\/a> was able to capitalize on this image optimization strategy from ImageKit. Even though their website had already been designed using a mix of JPGs and PNGs and were stored in a number of places around the web, ImageKit took care of automating the image formats right from the original URLs.<\/p>\n<h4>3. Compress Images<\/h4>\n<p>Next, we need to talk about image compression. I\u2019ve already referenced this a couple times, but it breaks down to two types:<\/p>\n<h5>Lossless<\/h5>\n<p>This form of compression is used on PNGs and GIFs. To compress the file, metadata is stripped out. This way, the integrity of the image remains intact, but the file shrinkage isn\u2019t as substantial as you\u2019d get with lossy compression.<\/p>\n<h5>Lossy<\/h5>\n<p>This form of compression is applied to JPGs and WebPs. To compress the file, some parts of the image are \u201clost\u201d, which can give certain spots a granier appearance than the original image. In most cases, it\u2019s barely noticeable unless you look closely at a side-by-side of the two images. But to your visitors, the degradation is easy to miss since there\u2019s no original to compare against.<\/p>\n<p>With lossy compression, you get to control what percentage of the file degrades. A safe range would be anything over 70% to 80%. ImageKit, by default, sets its optimization for 80% and it estimates that you can save at least 20% to 25% of your file size just from that. In reality, though, it\u2019s probably more (we\u2019re looking at upwards of 40% like in the Unsplash image example above):<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a5175d79-3ebd-41da-a58e-db40790e3445\/imagekit-image-size-settings.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-image-size-settings.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a5175d79-3ebd-41da-a58e-db40790e3445\/imagekit-image-size-settings.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a5175d79-3ebd-41da-a58e-db40790e3445\/imagekit-image-size-settings.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a5175d79-3ebd-41da-a58e-db40790e3445\/imagekit-image-size-settings.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a5175d79-3ebd-41da-a58e-db40790e3445\/imagekit-image-size-settings.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-image-size-settings.png?w=900\" sizes=\"100vw\" alt=\"ImageKit lossy compression settings\"><\/a><figcaption>\n This ImageKit setting enables its users to decide how much lossy compression they want applied to their JPGs. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a5175d79-3ebd-41da-a58e-db40790e3445\/imagekit-image-size-settings.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>You can change this to whatever default you believe will maintain quality while giving you the image sizes that help your site load quickly.<\/p>\n<p>Whether you use the default or your own optimization setting, remember to switch on the additional compression settings available under the Advanced tab.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8355fa12-bd1d-4c5d-8a35-2afe3909eaa3\/imagekit-optimization-settings.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-optimization-settings.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8355fa12-bd1d-4c5d-8a35-2afe3909eaa3\/imagekit-optimization-settings.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8355fa12-bd1d-4c5d-8a35-2afe3909eaa3\/imagekit-optimization-settings.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8355fa12-bd1d-4c5d-8a35-2afe3909eaa3\/imagekit-optimization-settings.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8355fa12-bd1d-4c5d-8a35-2afe3909eaa3\/imagekit-optimization-settings.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-optimization-settings.png?w=900\" sizes=\"100vw\" alt=\"ImageKit advanced optimization settings\"><\/a><figcaption>\n ImageKit provides Advanced image optimization settings for JPGs and PNGs. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8355fa12-bd1d-4c5d-8a35-2afe3909eaa3\/imagekit-optimization-settings.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>These three settings, in particular, will enable you to do as much compressing and as safely as possible.<\/p>\n<p>The first setting \u201cSave a Copy\u201d, for instance, keeps your original images on the ImageKit server. That way, you have a copy of the image pre-compression without having to manage the burden of it on your own server.<\/p>\n<p>The second setting \u201cPreserve Image Metadata\u201d enables you to apply lossless compression when feasible.<\/p>\n<p>And the last setting \u201cPNG Image Compression Mode\u201d allows you to decide what level of lossless optimization you want to use on your PNGs: maximum, minimum or none.<\/p>\n<p>When done, you\u2019ll end up with results like this side-by-side comparison:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b3eb701f-8ef1-4c31-9877-80deb80b7297\/imagekit-compressed-vs-original.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-compressed-vs-original.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b3eb701f-8ef1-4c31-9877-80deb80b7297\/imagekit-compressed-vs-original.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b3eb701f-8ef1-4c31-9877-80deb80b7297\/imagekit-compressed-vs-original.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b3eb701f-8ef1-4c31-9877-80deb80b7297\/imagekit-compressed-vs-original.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b3eb701f-8ef1-4c31-9877-80deb80b7297\/imagekit-compressed-vs-original.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-compressed-vs-original.png?w=900\" sizes=\"100vw\" alt=\"Comparison between compressed and original JPG from Unsplash\"><\/a><figcaption>\n This side-by-side comparison of an Unsplash image from Luke Jeremiah shows a compressed file and an original JPG. (Source: <a href=\"https:\/\/unsplash.com\/photos\/GQYPMTHUjbU\">Unsplash<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b3eb701f-8ef1-4c31-9877-80deb80b7297\/imagekit-compressed-vs-original.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>This is a JPG from Unsplash. Can you tell which is the original and which is the compressed and resized version from ImageKit?<\/p>\n<p>The one on the left with the black trim is:<\/p>\n<ul>\n<li>1500\u00d71005 px<\/li>\n<li>266 KB<\/li>\n<li>Compressed at 95%<\/li>\n<\/ul>\n<p>The one on the right with the white trim is:<\/p>\n<ul>\n<li>5444\u00d73649 px<\/li>\n<li>2.5 MB<\/li>\n<li>Original<\/li>\n<\/ul>\n<p>It\u2019s up to you to decide which of the ImageKit compression and optimization settings you\u2019re most comfortable using and then configure accordingly.<\/p>\n<h4>4. Save to and Pull Images from External Server<\/h4>\n<p>There are two ways to run images through ImageKit.<\/p>\n<p>The first is by uploading your images directly to its Media Library:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7b69e8ab-7c1d-436b-8f78-b34f8393edfd\/imagekit-media-library.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-media-library.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7b69e8ab-7c1d-436b-8f78-b34f8393edfd\/imagekit-media-library.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7b69e8ab-7c1d-436b-8f78-b34f8393edfd\/imagekit-media-library.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7b69e8ab-7c1d-436b-8f78-b34f8393edfd\/imagekit-media-library.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7b69e8ab-7c1d-436b-8f78-b34f8393edfd\/imagekit-media-library.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-media-library.png?w=900\" sizes=\"100vw\" alt=\"ImageKit Media Library\"><\/a><figcaption>\n ImageKit allows users to store their images in its Media Library instead of their own servers. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7b69e8ab-7c1d-436b-8f78-b34f8393edfd\/imagekit-media-library.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>The second is by integrating with your website or external storage service. We\u2019ve actually already seen this part of ImageKit. It\u2019s where you get your URL endpoints from so you can define your image parameters:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/325c36e9-0370-4cf3-b030-dd9507f069e2\/imagekit-integration.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-integration.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/325c36e9-0370-4cf3-b030-dd9507f069e2\/imagekit-integration.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/325c36e9-0370-4cf3-b030-dd9507f069e2\/imagekit-integration.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/325c36e9-0370-4cf3-b030-dd9507f069e2\/imagekit-integration.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/325c36e9-0370-4cf3-b030-dd9507f069e2\/imagekit-integration.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/imagekit-integration.png?w=900\" sizes=\"100vw\" alt=\"ImageKit integrations\"><\/a><figcaption>\n ImageKit integrates with content management systems, third-party storage and Cloudinary. (Source: <a href=\"https:\/\/synd.co\/2NgacDp\">ImageKit<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/325c36e9-0370-4cf3-b030-dd9507f069e2\/imagekit-integration.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Even with all of the optimizations above, you might still be having a hard time with image storage and maintenance \u2014 either because of how they affect your speed or how much storage you have to hold them.<\/p>\n<p>For instance, if you store your images on your server, you\u2019ll eventually be constrained for space (unless you have a monster-sized hosting account).<\/p>\n<p>When you\u2019re building massive e-commerce stores or business websites with thousands or even millions of images and corresponding image sizes, you can\u2019t afford to be hosting those images on your own. Granted, there is a way to serve them more quickly to visitors (which I\u2019ll explain in the next point), but why take on the burden and cost of additional storage if you don\u2019t have to?<\/p>\n<h4>5. Add a CDN<\/h4>\n<p>A CDN is another essential optimization tool for large repositories of images. Think of it like a second server, only this one caches (copies) your website and serves them through data centers located significantly closer to your visitors around the world.<\/p>\n<p>As a result, the time it takes to send your website and its thousands of product images from New York, New York to Bangladesh, India happens insanely fast.<\/p>\n<p>With ImageKit, you get to enjoy the privilege of serving your images not just through its core processing servers, but through AWS CloudFront CDN (included in all plans) which has over 150 locations worldwide.<\/p>\n<p><a href=\"https:\/\/imagekit.io\/blog\/sintra-digital-business-improved-page-size-using-imagekit\/\">Sintra<\/a>, a client of ImageKit, saw a big leap in performance after moving to ImageKit. With the ImageKit image CDN (which has delivery nodes all around the globe), it saw an 18% drop in page load times.<\/p>\n<h3>Wrapping Up<\/h3>\n<p>What\u2019s especially nice about ImageKit is that it\u2019s not just a preventative measure against slowdowns caused by images. You can use it to retroactively fix and improve mobile websites and PWAs, even if they already have millions of images on them. What\u2019s more, the performance center makes it easy to keep an eye on your website\u2019s images and identify opportunities for speed enhancements.<\/p>\n<p>Plus, as you can see from the tips above, ImageKit has simplified a lot of the work you\u2019d otherwise have to do, whether you\u2019d handle it manually or configure it through a plugin.<\/p>\n<p>With consumers and Google becoming pickier by the day about how quickly websites load on mobile, this is the kind of image optimization strategy you need. It\u2019ll lighten your load while ensuring that any images added before or after ImageKit are optimized to the fullest. Even better, your clients will reap the benefits of more leads and greater conversions.<\/p>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-16.png?w=900\" alt=\"Smashing Editorial\"><span>(yk)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Guide To Optimizing Images For Mobile A Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00 (This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales….<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":72117,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-72116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-23T11:18:52+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-23T11:18:52+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#article\",\"name\":\"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies\",\"headline\":\"A Guide To Optimizing Images For Mobile\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/http-archive-total-kilobytes.png?fit=400%2C267&ssl=1\",\"width\":400,\"height\":267},\"datePublished\":\"2019-10-23T04:18:52-07:00\",\"dateModified\":\"2019-10-23T04:18:52-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#listItem\",\"name\":\"A Guide To Optimizing Images For Mobile\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#listItem\",\"position\":3,\"name\":\"A Guide To Optimizing Images For Mobile\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/\",\"name\":\"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies\",\"description\":\"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/http-archive-total-kilobytes.png?fit=400%2C267&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#mainImage\",\"width\":400,\"height\":267},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/a-guide-to-optimizing-images-for-mobile\\\/#mainImage\"},\"datePublished\":\"2019-10-23T04:18:52-07:00\",\"dateModified\":\"2019-10-23T04:18:52-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies","description":"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#article","name":"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies","headline":"A Guide To Optimizing Images For Mobile","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-total-kilobytes.png?fit=400%2C267&ssl=1","width":400,"height":267},"datePublished":"2019-10-23T04:18:52-07:00","dateModified":"2019-10-23T04:18:52-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#listItem","name":"A Guide To Optimizing Images For Mobile"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#listItem","position":3,"name":"A Guide To Optimizing Images For Mobile","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/","name":"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies","description":"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-total-kilobytes.png?fit=400%2C267&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#mainImage","width":400,"height":267},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/#mainImage"},"datePublished":"2019-10-23T04:18:52-07:00","dateModified":"2019-10-23T04:18:52-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies","og:description":"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/","article:published_time":"2019-10-23T11:18:52+00:00","article:modified_time":"2019-10-23T11:18:52+00:00","twitter:card":"summary","twitter:title":"A Guide To Optimizing Images For Mobile | Design for Immersive Technologies","twitter:description":"A Guide To Optimizing Images For MobileA Guide To Optimizing Images For Mobile Suzanne Scacca 2019-10-22T12:30:59+02:002019-10-23T11:05:20+00:00(This is a sponsored article.) You know how critical it is to build websites that load quickly. All it takes is for a page to load one second too long for it to start losing visitors and sales. Plus, now"},"aioseo_meta_data":{"post_id":"72116","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:08:06","updated":"2026-09-02 08:48:05","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tA Guide To Optimizing Images For Mobile\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"A Guide To Optimizing Images For Mobile","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/a-guide-to-optimizing-images-for-mobile\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iLa","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/http-archive-total-kilobytes.png?fit=400%2C267&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=72116"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/72117"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=72116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=72116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=72116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}