{"id":118568,"date":"2024-10-02T08:00:28","date_gmt":"2024-10-02T06:00:28","guid":{"rendered":"https:\/\/yourwebsitemadeeasy.com\/staging\/altijd-de-beste-en-snelste-afbeeldingen-op-je-website\/"},"modified":"2026-02-13T20:16:03","modified_gmt":"2026-02-13T19:16:03","slug":"images-on-your-website","status":"publish","type":"post","link":"https:\/\/yourwebsitemadeeasy.com\/en\/images-on-your-website\/","title":{"rendered":"Get the best and fastest images on your website"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>A Practical and Simple Guide for Anyone Who Loves Beautiful Images and Fast Websites<\/strong><\/h2>\n\n\n\n<p><strong>Images play a pivotal role in your website's success. They can impact loading time, user experience, and search engine optimisation (SEO). In this article, you will learn step by step how to prepare images for your website, according to the method I use myself, which guarantees the best results.<\/strong><\/p>\n\n\n\n<p>At the end, you will find a handy Cheat Sheet and a list of links to the best tools.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contents<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li style=\"font-size:18px\"><a href=\"#1\" data-type=\"internal\" data-id=\"#1\">What is file size?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#2\">What is resolution?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#3\">The best dimensions for your website.<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#4\">How do I resize images to the correct size?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#5\">What is the correct colour space?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#6\">Which file format should I use when saving?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#7\">How do I compress images?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#8\">How do I optimise images for SEO (Google)?<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#9\" data-type=\"internal\" data-id=\"#8\"><strong>Summery:<\/strong> step-by-step guide for creating files for your website.<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#9\"><strong>Bonus:<\/strong> Cheat Sheet for images<\/a><\/li>\n\n\n\n<li style=\"font-size:18px\"><a href=\"#10\">Glossary and overview of the best tools.<\/a><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1\"><strong>1. What is file size?<\/strong><\/h2>\n\n\n\n<p>The file size of an image can be expressed in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In weight: how much space the file takes up on a hard drive or in an email.<\/li>\n\n\n\n<li>In pixels: the number of pixels in the width and height of the image.<\/li>\n<\/ul>\n\n\n\n<p>For a website, the weight is extremely important, as it determines the speed of your site. But to control this and ensure good quality, you work with the file size in pixels.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2\"><strong>2. What is resolution?<\/strong><\/h2>\n\n\n\n<p>Pixels are the smallest squares of colour that make up your photo. The number of pixels determines the resolution of your image. The more pixels, the larger the image can be displayed without losing quality. But more pixels also means a larger file. As a starting point, having a large file is good, so you can still use it for different purposes. But for your website, always ensure an appropriate number of pixels.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"714\" src=\"https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-pixels-and-resolution.jpg\" alt=\"A low resolution photo with large visible pixels\" class=\"wp-image-129901\" style=\"width:660px\" srcset=\"https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-pixels-and-resolution.jpg 1000w, https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-pixels-and-resolution-980x700.jpg 980w, https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-pixels-and-resolution-480x343.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw\" \/><\/figure>\n\n\n\n<p>The number of pixels in a row determines the resolution. This can also be approached in 2 ways: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How many pixels per inch, expressed as dpi or ppi. For example, the resolution is 72dpi.<\/li>\n\n\n\n<li>The total number of pixels in width and height. For example, the resolution is 1500x1000 pixels. <\/li>\n<\/ul>\n\n\n\n<p>The total number of pixels is more specific, because dpi only says something if the dimensions in inches (or cm) are also mentioned. Because a web page is displayed on the screen from left to right, the width of the images is leading.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3\"><strong>3. The best dimensions for your website.<\/strong><\/h2>\n\n\n\n<p>This is very simple: the best size for an image is the exact size in which it is displayed on the screen. But what size do you make them then? You don't necessarily have to calculate it separately for each image. You can follow these rules of thumb:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"572\" src=\"https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-screen-sizes.png\" alt=\"A latop screen with markup of screen sizes\" class=\"wp-image-129903\" srcset=\"https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-screen-sizes.png 1000w, https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-screen-sizes-980x561.png 980w, https:\/\/yourwebsitemadeeasy.com\/wp-content\/uploads\/YWME-screen-sizes-480x275.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Full screen width: <\/strong><br>set images that fill the entire screen to 2200 pixels wide.*<\/li>\n\n\n\n<li><strong>Content width: <\/strong><br>images that are no larger than the content of your website can be 1200-1600 pixels wide.<\/li>\n\n\n\n<li><strong>1\/2 Content width: <\/strong><br>set images that take up about half of your website to 600-800 pixels wide.<\/li>\n<\/ul>\n\n\n\n<p>If you want to know what the content width of your website is, look in the WordPress dashboard at: Theme customiser &gt; general settings &gt; layout settings &gt; website content width<\/p>\n\n\n\n<p><em>* Nowadays, people increasingly view websites on smaller screens, such as tablets and smartphones. That's why I recommend keeping the files as small as possible while maintaining sufficient quality. If you're a photographer or want maximum image quality on a large screen for other reasons, you can use images with a width of 2560 pixels. However, for most websites, 2200 pixels wide is more than enough.   <\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4\"><strong>4. How do I resize the images to the correct size?<\/strong><\/h2>\n\n\n\n<p>Always make a copy of the original file before cropping or scaling an image. Otherwise, you will lose the full resolution image. First crop images nicely in the correct ratio, and then adjust the pixel size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">In this table you can see the pixel sizes in the most common aspect ratios:<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Ratio<\/strong><\/td><td><strong>Screen width<\/strong><\/td><td><strong>Content width<\/strong><\/td><td><strong>1\/2 Content width<\/strong><\/td><\/tr><tr><td><strong>3:2<\/strong><\/td><td>2200 x 1467 px<\/td><td>1400 x 934 px<\/td><td>800 x 534 px<\/td><\/tr><tr><td><strong>4:3<\/strong><\/td><td>2200 x 1650 px<\/td><td>1400 x 1050 px<\/td><td>800 x 600 px<\/td><\/tr><tr><td><strong>5:4<\/strong><\/td><td>2200 x 1760 px<\/td><td>1400 x 1120 px<\/td><td>800 x 640 px<\/td><\/tr><tr><td><strong>16:9<\/strong><\/td><td>2200 x 1238 px<\/td><td>1400 x 788 px<\/td><td>800 x 450 px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>I edit my files with Adobe Photoshop or Adobe Bridge, but you can also use a free online tool such as <a href=\"https:\/\/shortpixel.com\/online-image-compression\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Shortpixel<\/a>. You can even do it with Canva: create a canvas in the correct pixel size, drag your image onto it and export this. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5\"><strong>5. What is the correct colour space?<\/strong><\/h2>\n\n\n\n<p>Colours for the screen are always <strong>RGB<\/strong>, and the correct colour space or colour profile is <strong>sRGB<\/strong>. So pay attention if you get files from your corporate identity designer or printer, as they may sometimes differ and need to be converted to RGB .<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6\"><strong>6. Which file format should I use when saving?<\/strong><\/h2>\n\n\n\n<p>The most commonly used file formats are JPG, PNG, GIF, SVG and WebP. Which one you choose makes a big difference, because there is an appropriate choice for each type of image:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>JPG <\/strong><\/td><td>use this for your photos. JPG is a format that greatly reduces your file size and is therefore excellent for making your site faster. Set the compression to 8 or 80 (unless it needs to be very specific, then you can vary this). <\/td><\/tr><tr><td><strong>PNG<\/strong><\/td><td>if there is transparency in your image, sharp details, or it's a logo, then use PNG. Do keep in mind that files in PNG are heavier than JPG, so it's not very suitable for larger images. <\/td><\/tr><tr><td><strong>GIF<\/strong><\/td><td>this sounds very old-fashioned and is a bit like that. However, the GIF format is still widely used to store small animations. In that case, we're talking about 'gif animations'.<\/td><\/tr><tr><td><strong>SVG<\/strong><\/td><td>SVG doesn't contain pixels but vectors, and the files are very small. You'll never choose SVG for photos, but you will for logos or illustrations if they come from a vector program. However, you do need something to upload SVG to your site because they contain code. I use Divi Toolbox for this (my favourite Divi plugin). <\/td><\/tr><tr><td><strong>WebP<\/strong><\/td><td>this is a newer file format that makes the file size of images smaller than JPEG and PNG images while maintaining the quality of the photo. WebP is often generated on the website itself with a plugin, so you don't have to do anything further for that. In that case, you can save the images as JPG, PNG, or GIF and let the plugin do the Webp conversion.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7\"><strong>7. How do I compress images?<\/strong><\/h2>\n\n\n\n<p>If you have set your files to the correct size and saved them in the correct file format, you can get started. <\/p>\n\n\n\n<p>I guarantee you that in most cases it is already a huge improvement. Because correct size and file format are the most important aspects of good image files. The quality is good without the files being too heavy. <\/p>\n\n\n\n<p>But if you want to make the weight even smaller, you can compress the images further with online tools like Shortpixel or Sqoosh. It's even easier if you use an image optimisation or caching plugin. However, be careful: only use one tool or plugin to avoid loss of quality and conflicts. So choose one method.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>A few free online tools to compress images:<\/td><td><strong>Shortpixel<\/strong>, useful for compressing multiple JPG, PNG, and GIF files at once. Glossy is my favourite setting. <br><strong>Sqoosh<\/strong>, this is handy for WEBP. You get very good results with it, recommended for your largest files. <\/td><\/tr><tr><td>Plugins that do optimisation and WebP conversion on your site are:<\/td><td><strong>Shortpixel<\/strong>, I use this the most and recommend it to my clients as well.<br><strong>Smush<\/strong>, can be a good solution if you don\u2019t want a paid plugin.<\/td><\/tr><tr><td>Free caching plugins that can compress images:<\/td><td><strong>WP Optimize<\/strong>, free and suitable for all hosting.<br><strong>LiteSpeed Cache<\/strong>, for hosting on LiteSpeed servers such as Cloud86 or Heijsen Hosting.<br><strong>Speed Optimiser<\/strong>, for SiteGround hosting.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8\"><strong>8. How do I optimise images for SEO (Google)?<\/strong><\/h2>\n\n\n\n<p>This step is so often overlooked! <\/p>\n\n\n\n<p>Of course, you can now put your files online directly. But if it's also important to you that your website is good for SEO and thus for Google, make sure your images also score well on this point. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What's important for SEO is that all your images:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>have the correct size<\/strong> (explained in point 4).<\/li>\n\n\n\n<li><strong>load quickly and are saved in a good file format<\/strong> (I discuss this in points 5 and 6).<\/li>\n\n\n\n<li><strong>have readable titles<\/strong> that also contain keywords.<\/li>\n\n\n\n<li><strong>have an ALT tag<\/strong> in the WordPress media library. <\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Keywords in titles<\/h3>\n\n\n\n<p>It's smart to change the file name before uploading to your website, because the file name becomes the default title in WordPress. This saves a lot of work afterwards.<\/p>\n\n\n\n<p>If you already know on which page you're going to place your images on your website, give the files a file name that is readable and contains a keyword. Don't use underscores, but rather hyphens. Spaces are also allowed and make for a nice title.<\/p>\n\n\n\n<p>If you don't (yet) know the keyword, at least make sure the file name says something about what you see in the image. You can also change the title later in the media library.<\/p>\n\n\n\n<p>Example with keyword 'training shoes for kids':<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Not a good file name<\/strong><\/td><td><strong>A good file name<\/strong><\/td><\/tr><tr><td><em>GYMNKE_1_kid.jpg<\/em><\/td><td><em><em>Red training shoes for kids Nike 1 M.jpg<\/em><\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Alt tags<\/h3>\n\n\n\n<p>An Alt tag is shown by screen readers instead of the image. This is to improve accessibility for visually impaired people, for example. Google considers this increasingly important. You add an Alt tag per image via: WordPress dashboard &gt; media library<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns ywme-blog-block is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading green-highlight\" id=\"9\"><strong>Summary:<\/strong><\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8\">Step-by-step guide for creating files for your website<\/h2>\n\n\n\n<p>Now you have been able to read the explanation above. The steps are summarised below in the correct order. If you make it a routine, you not only ensure the best and fastest images, but also save a lot of time! <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">These are the 6 simple steps:<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li style=\"font-size:18px\">Collect the files, make a copy and give them a good file name.<\/li>\n\n\n\n<li style=\"font-size:18px\">Now crop the images if necessary and set them to the correct size.<\/li>\n\n\n\n<li style=\"font-size:18px\">Make sure the colour space is sRGB.<\/li>\n\n\n\n<li style=\"font-size:18px\">Save them in the correct file format.<\/li>\n\n\n\n<li style=\"font-size:18px\">Optional: compress the files with an online tool - unless you do this with a plugin.<\/li>\n\n\n\n<li style=\"font-size:18px\">Now upload them to the media library, check the title and add an ALT tag.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns ywme-blog-block-blue has-background is-layout-flex wp-container-core-columns-is-layout-fe847a89 wp-block-columns-is-layout-flex\" style=\"background-color:#6183bf;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading green-highlight has-white-color has-text-color has-link-color wp-elements-f1da453b5b4e1c730ccd5f3454456805\" id=\"10\"><strong>Bonus: Cheat Sheet for images<\/strong><\/h2>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color wp-elements-2c82cbe1ae77b1b9c6c04c6477a0baa0\"><strong>Download the Cheat Sheet with dimensions, file formats, all links and of course, the 6 simple steps for getting the best images on your website.<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-white-color has-text-color has-link-color wp-elements-360f4a48e0328fba7ec14bb683e1d45a\" id=\"11\"><strong>Free Cheat Sheet<\/strong><\/h2>\n\n\n\n\t\t\t<div class=\"srfm-form-container srfm-form-container-128945 srfm-bg-color srfm-custom-stylings\">\n\t\t\t<style>\n\t\t\t\t\/* Need to check and remove the input variables related to the Style Tab. *\/\n\t\t\t\t.srfm-form-container-128945 {\n\t\t\t\t\t\/* New test variables *\/\n\t\t\t\t\t--srfm-color-scheme-primary: #b13f87;\n\t\t\t\t\t--srfm-color-scheme-text-on-primary: #FFFFFF;\n\t\t\t\t\t--srfm-color-scheme-text: #222222;\n\t\t\t\t\t--srfm-quill-editor-color: #b13f87;\n\n\t\t\t\t\t--srfm-color-input-label: #222222;\n\t\t\t\t\t--srfm-color-input-description: hsl( from #222222 h s l \/ 0.65 );\n\t\t\t\t\t--srfm-color-input-placeholder: hsl( from #222222 h s l \/ 0.5 );\n\t\t\t\t\t--srfm-color-input-text: #222222;\n\t\t\t\t\t--srfm-color-input-prefix: hsl( from #222222 h s l \/ 0.65 );\n\t\t\t\t\t--srfm-color-input-background: hsl( from #222222 h s l \/ 0.02 );\n\t\t\t\t\t--srfm-color-input-background-hover: hsl( from #222222 h s l \/ 0.05 );\n\t\t\t\t\t--srfm-color-input-background-disabled: hsl( from #222222 h s l \/ 0.07 );\n\t\t\t\t\t--srfm-color-input-border: hsl( from #222222 h s l \/ 0.25 );\n\t\t\t\t\t--srfm-color-input-border-disabled: hsl( from #222222 h s l \/ 0.15 );\n\t\t\t\t\t--srfm-color-multi-choice-svg: hsl( from #222222 h s l \/ 0.7 );\n\t\t\t\t\t--srfm-color-input-border-hover: hsl( from #b13f87 h s l \/ 0.65 );\n\t\t\t\t\t--srfm-color-input-border-focus-glow: hsl( from #b13f87 h s l \/ 0.15 );\n\t\t\t\t\t--srfm-color-input-selected: hsl( from #b13f87 h s l \/ 0.1 );\n\t\t\t\t\t--srfm-btn-color-hover: hsl( from #b13f87 h s l \/ 0.9 );\n\t\t\t\t\t--srfm-btn-color-disabled: hsl( from #b13f87 h s l \/ 0.25 );\n\n\t\t\t\t\t\/* Dropdown Variables *\/\n\t\t\t\t\t--srfm-dropdown-input-background-hover: hsl( from #222222 h s l \/ 0.05 );\n\t\t\t\t\t--srfm-dropdown-option-background-hover: hsl( from #222222 h s l \/ 0.10 );\n\t\t\t\t\t--srfm-dropdown-option-background-selected: hsl( from #222222 h s l \/ 0.05 );\n\t\t\t\t\t--srfm-dropdown-option-selected-icon: hsl( from #222222 h s l \/ 0.65 );\n\t\t\t\t\t--srfm-dropdown-option-text-color: hsl( from #222222 h s l \/ 0.80 );\n\t\t\t\t\t--srfm-dropdown-option-selected-text: #222222;\n\t\t\t\t\t--srfm-dropdown-badge-background: hsl( from #222222 h s l \/ 0.05 );\n\t\t\t\t\t--srfm-dropdown-badge-background-hover: hsl( from #222222 h s l \/ 0.10 );\n\t\t\t\t\t--srfm-dropdown-menu-border-color: hsl( from #222222 h s l \/ 0.10 );\n\t\t\t\t\t--srfm-dropdown-placeholder-color: hsl( from #222222 h s l \/ 0.50 );\n\t\t\t\t\t--srfm-dropdown-icon-color: hsl( from #222222 h s l \/ 0.65 );\n\t\t\t\t\t--srfm-dropdown-icon-disabled: hsl( from #222222 h s l \/ 0.25 );\n\n\t\t\t\t\t\/* Background Control Variables *\/\n\t\t\t\t\t--srfm-instant-form-padding-top: 32px;--srfm-instant-form-padding-right: 32px;--srfm-instant-form-padding-bottom: 32px;--srfm-instant-form-padding-left: 32px;--srfm-instant-form-border-radius-top: 12px;--srfm-instant-form-border-radius-right: 12px;--srfm-instant-form-border-radius-bottom: 12px;--srfm-instant-form-border-radius-left: 12px;--srfm-form-padding-top: 0px;--srfm-form-padding-right: 0px;--srfm-form-padding-bottom: 0px;--srfm-form-padding-left: 0px;--srfm-form-border-radius-top: 0px;--srfm-form-border-radius-right: 0px;--srfm-form-border-radius-bottom: 0px;--srfm-form-border-radius-left: 0px;--srfm-bg-color: #ffffff00;--srfm-bg-overlay-opacity: 1;\t\t\t\t\t--srfm-row-gap-between-blocks: 18px;--srfm-address-label-font-size: 16px;--srfm-address-label-line-height: 24px;--srfm-address-description-font-size: 14px;--srfm-address-description-line-height: 20px;--srfm-col-gap-between-fields: 16px;--srfm-row-gap-between-fields: 16px;--srfm-gap-below-address-label: 14px;--srfm-dropdown-font-size: 14px;--srfm-dropdown-gap-between-input-menu: 4px;--srfm-dropdown-badge-padding: 2px 6px;--srfm-dropdown-multiselect-font-size: 12px;--srfm-dropdown-multiselect-line-height: 16px;--srfm-dropdown-padding-right: 12px;--srfm-dropdown-padding-right-icon: calc( var( --srfm-dropdown-padding-right ) + 20px );--srfm-dropdown-multiselect-padding: 8px var( --srfm-dropdown-padding-right-icon ) 8px 8px;--srfm-input-height: 44px;--srfm-input-field-padding: 10px 12px;--srfm-input-field-font-size: 16px;--srfm-input-field-line-height: 24px;--srfm-input-field-margin-top: 6px;--srfm-input-field-margin-bottom: 6px;--srfm-checkbox-label-font-size: 16px;--srfm-checkbox-label-line-height: 24px;--srfm-checkbox-description-font-size: 14px;--srfm-checkbox-description-line-height: 20px;--srfm-check-ctn-width: 16px;--srfm-check-ctn-height: 16px;--srfm-check-svg-size: 10px;--srfm-checkbox-margin-top-frontend: 4px;--srfm-checkbox-margin-top-editor: 6px;--srfm-check-gap: 8px;--srfm-checkbox-description-margin-left: 24px;--srfm-flag-section-padding: 10px 0 10px 12px;--srfm-gap-between-icon-text: 8px;--srfm-label-font-size: 16px;--srfm-label-line-height: 24px;--srfm-description-font-size: 14px;--srfm-description-line-height: 20px;--srfm-btn-padding: 10px 14px;--srfm-btn-font-size: 16px;--srfm-btn-line-height: 24px;--srfm-multi-choice-horizontal-padding: 20px;--srfm-multi-choice-vertical-padding: 20px;--srfm-multi-choice-internal-option-gap: 8px;--srfm-multi-choice-vertical-svg-size: 40px;--srfm-multi-choice-horizontal-image-size: 24px;--srfm-multi-choice-vertical-image-size: 120px;--srfm-multi-choice-outer-padding: 2px;--srfm-upload-vertical-padding: 28px;--srfm-upload-inner-gap: 12px;--srfm-upload-text-line-height: 24px;--srfm-upload-file-margin-top: 16px;--srfm-upload-preview-size: 42px;--srfm-slider-label-font-size: 12px;--srfm-slider-label-line-height: 16px;--srfm-slider-label-top-padding: 8px;--srfm-slider-error-gap: 6px;--srfm-page-break-row-gap: 28px;--srfm-rating-icon-size: 28px;--srfm-rating-icon-gap: 6px;--srfm-datepicker-dropdown-input-gap: 4px;--srfm-login-row-gap: 14px;--srfm-signature-canvas-height: 140px;--srfm-signature-button-bottom: 14px;\t\t--srfm-page-break-back-btn-text-color: hsl( from #222222 h s l \/ 0.80 );\n\t\t--srfm-page-break-back-btn-background: hsl( from #222222 h s l \/ 0.05 );\n\t\t--srfm-page-break-unfilled-progress: hsl( from #222222 h s l \/ 0.15 );\n\t\t--srfm-page-break-indicator-text-color: hsl( from #222222 h s l \/ 0.50 );\n\t\t--srfm-page-break-connector-checked: hsl( from #222222 h s l \/ 0.15 );\n\t\t--srfm-page-break-connector-pending: hsl( from #222222 h s l \/ 0.25 );\n\t\t--srfm-page-break-connector-active: hsl( from #b13f87 h s l \/ 0.50 );\n\t\t--srfm-page-break-steps-unfilled: hsl( from #222222 h s l \/ 0.50 );\n\t\t--srfm-page-break-steps-filled: hsl( from #222222 h s l \/ 0.25 );\n\t\t--srfm-page-break-steps-progress: hsl( from #222222 h s l \/ 0.15 );\n\t\t--srfm-page-break-steps-pending-text-color: hsl( from #222222 h s l \/ 0.80 );\n\t\t--srfm-error-color: #ffffff;--srfm-error-color-border: hsl( from #ffffff h s l \/ 0.65);--srfm-error-color-border-glow: hsl( from #ffffff h s l \/ 0.15);--srfm-row-gap-between-blocks: 2px;--srfm-column-gap-between-blocks: 10px;--srfm-button-padding-top: 10px;--srfm-button-padding-right: 20px;--srfm-button-padding-bottom: 10px;--srfm-button-padding-left: 20px;--srfm-button-border-style: none;--srfm-button-background-type-normal: color;--srfm-button-background-color-normal: #68b07a;--srfm-button-background-gradient-normal: linear-gradient(90deg, #FFC9B2 0%, #C7CBFF 100%);--srfm-button-background-type-hover: color;--srfm-button-background-color-hover: #b13f87;--srfm-button-background-gradient-hover: linear-gradient(90deg, #FFC9B2 0%, #C7CBFF 100%);--srfm-btn-font-size: 18px;--srfm-btn-line-height: 1.5em;--srfm-label-font-size: 16px;--srfm-label-line-height: 1.5em;--srfm-description-font-size: 14px;--srfm-description-line-height: 1.4em;--srfm-color-input-description: #1E1E1EA6;--srfm-input-label-gap: 6px;--srfm-color-input-background: #ffffff;--srfm-color-input-background-hover: hsl( from #ffffff h s l \/ 0.05 );--srfm-color-input-background-disabled: hsl( from #ffffff h s l \/ 0.05 );--srfm-color-input-border: #6083bf00;--srfm-color-input-border-disabled: hsl( from #6083bf00 h s l \/ 0.15 );--srfm-field-border-radius-top: 30px;--srfm-field-border-radius-right: 30px;--srfm-field-border-radius-bottom: 30px;--srfm-field-border-radius-left: 30px;--srfm-field-border-width-top: 2px;--srfm-field-border-width-right: 2px;--srfm-field-border-width-bottom: 2px;--srfm-field-border-width-left: 2px;--srfm-field-box-shadow-normal: 0px 0px 0px 0px var(--srfm-color-input-border-focus-glow);--srfm-field-box-shadow-focus: 0px 0px 0px 3px var(--srfm-color-input-border-focus-glow);--srfm-page-break-next-btn-color-normal: #FFFFFF;--srfm-page-break-next-btn-bg-normal: #434343;--srfm-page-break-next-btn-border-color-normal: #434343;--srfm-page-break-back-btn-color-normal: #FFFFFF;--srfm-page-break-back-btn-bg-normal: #434343;--srfm-page-break-back-btn-border-color-normal: #434343;--srfm-page-break-next-btn-color-hover: #FFFFFFCC;--srfm-page-break-next-btn-bg-hover: #434343CC;--srfm-page-break-next-btn-border-color-hover: #434343CC;--srfm-page-break-back-btn-color-hover: #FFFFFFCC;--srfm-page-break-back-btn-bg-hover: #434343CC;--srfm-page-break-back-btn-border-color-hover: #434343CC;--srfm-button-border-radius-top: 30px;--srfm-button-border-radius-right: 30px;--srfm-button-border-radius-bottom: 30px;--srfm-button-border-radius-left: 30px;--srfm-color-input-label: #ffffff;--srfm-password-strength-weak: #DC2626;--srfm-password-strength-weak-border-glow: hsl( from var(--srfm-password-strength-weak) h s l \/ 0.15 );--srfm-password-strength-weak-border-color: hsl( from var(--srfm-password-strength-weak) h s l \/ 0.65 );--srfm-password-strength-medium: #D97706;--srfm-password-strength-medium-border-glow: hsl( from var(--srfm-password-strength-medium) h s l \/ 0.15 );--srfm-password-strength-medium-border-color: hsl( from var(--srfm-password-strength-medium) h s l \/ 0.65 );--srfm-password-strength-strong: #16A34A;--srfm-password-strength-strong-border-glow: hsl( from var(--srfm-password-strength-strong) h s l \/ 0.15 );--srfm-password-strength-strong-border-color: hsl( from var(--srfm-password-strength-strong) h s l \/ 0.65 );a {\n\tcolor: #fff!important;\n}\na:hover {\n\tcolor: #222!important;\n}\t\t\t\t}\n\t\t\t<\/style>\n\t\t\t\t\t\t\t<form method=\"post\" enctype=\"multipart\/form-data\" id=\"srfm-form-128945\" class=\"srfm-form \"\n\t\t\t\tform-id=\"128945\" after-submission=\"hide form\" message-type=\"same page\" success-url=\"\" ajaxurl=\"https:\/\/yourwebsitemadeeasy.com\/wp-admin\/admin-ajax.php\" data-submit-token=\"7cf1fe5e1022a6a7213344f4bb37cef283dcf7b3667f8ae7bf2848786e9b91b1\"\n\t\t\t\t>\n\t\t\t\t\n\t\t\t\t<input type=\"hidden\" value=\"128945\" name=\"form-id\">\n\t\t\t\t<input type=\"hidden\" value=\"\" name=\"srfm-sender-email-field\" id=\"srfm-sender-email\">\n\t\t\t\t<input type=\"hidden\" value=\"\" id=\"srfm-page-break\">\n\t\t\t\t\t\t\t\t\t<input type=\"hidden\" value=\"\" name=\"srfm-honeypot-field\">\n\t\t\t\t\t\t\t<p id=\"srfm-error-message\" class=\"srfm-common-error-message srfm-error-message srfm-head-error\" hidden>\t\t<span class=\"srfm-icon\" aria-hidden=\"true\">\n\t\t\t<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' fill='none'><path d='M9.99935 18.3327C14.6017 18.3327 18.3327 14.6017 18.3327 9.99935C18.3327 5.39698 14.6017 1.66602 9.99935 1.66602C5.39698 1.66602 1.66602 5.39698 1.66602 9.99935C1.66602 14.6017 5.39698 18.3327 9.99935 18.3327Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' \/><path d='M10 6.66602V9.99935' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' \/><path d='M10 13.334H10.0083' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' \/><\/svg>\t\t<\/span>\n\t\t<span class=\"srfm-error-content\">There was an error trying to submit your form. Please try again.<\/span><\/p>\n\t\t\t\t\t<div data-block-id=\"081fadcc\" class=\"srfm-block-single srfm-block srfm-input-block srf-input-081fadcc-block  srfm-block-width-50  dotted srfm-slug-text-field\" >\n\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-block-wrap\">\n\t\t\t\t<input class=\"srfm-input-common srfm-input-input\" type=\"text\" name=\"srfm-input-081fadcc-lbl-TmFtZQ-text-field\" id=\"srfm-input-081fadcc-lbl-TmFtZQ\"\n\t\t\t\t\taria-describedby='srfm-error-081fadcc'\t\t\t\t\tdata-required=\"true\" aria-required=\"true\" data-unique=\"false\" maxlength=\"100\" value=\"\"  placeholder=\"Name *\"  data-srfm-mask=\"none\"   \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"srfm-error-wrap\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-error-message\" data-srfm-id=\"srfm-error-081fadcc\" data-error-msg=\"This field is required.\" data-unique-msg=\"Value needs to be unique.\">\n\t\t\t\t\t\tThis field is required.\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div data-block-id=\"49eaba9a\" class=\"srfm-block-single srfm-block srfm-email-block srf-email-49eaba9a-block  srfm-block-width-50  dotted srfm-slug-email srfm-email-block-wrap\">\n\t\t\t\t<div class=\"srfm-email-block srf-email-49eaba9a-block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-block-wrap\">\n\t\t\t\t\t\t<input class=\"srfm-input-common srfm-input-email\" type=\"email\" name=\"srfm-email-49eaba9a-lbl-RW1haWw-email\" id=\"srfm-email-49eaba9a-lbl-RW1haWw\"\n\t\t\t\t\t\taria-describedby='srfm-error-49eaba9a'\t\t\t\t\t\tdata-required=\"true\" aria-required=\"true\" data-unique=\"false\" value=\"\"  placeholder=\"Email *\"   \/>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"srfm-error-wrap\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-error-message\" data-srfm-id=\"srfm-error-49eaba9a\" data-error-msg=\"This field is required.\" data-unique-msg=\"Value needs to be unique.\">\n\t\t\t\t\t\tThis field is required.\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\n\n\t\t\t<div data-block-id=\"efad2413\" class=\"srfm-block-single srfm-block srfm-checkbox-block srf-checkbox-efad2413-block srfm-block-width-100 \">\n\t\t\t\t<div class=\"srfm-block-wrap\">\n\t\t\t\t\t<input class=\"srfm-input-common screen-reader-text srfm-input-checkbox\" id=\"srfm-checkbox-3896828003\"\n\t\t\t\t\t\taria-describedby='srfm-error-efad2413'\t\t\t\t\tname=\"srfm-checkbox-efad2413-lbl-QnkgdXNpbmcgdGhpcyBmb3JtLCB5b3UgYWdyZWUgdG8gb3VyIHByaXZhY3kgcG9saWN5IGFuZCBHRFBSIGNvbXBsaWFuY2Uu-checkbox\" data-required=\"true\" aria-required=\"true\" type=\"checkbox\" checked\/>\n\t\t\t\t\t<label class=\"srfm-cbx\" for=\"srfm-checkbox-3896828003\">\n\t\t\t\t\t\t<span class=\"srfm-span-wrap\">\n\t\t\t\t\t\t\t<svg class=\"srfm-check-icon\" width=\"12px\" height=\"10px\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<use xlink:href=\"#srfm-checkbox-efad2413-check\"><\/use>\n\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"srfm-span-wrap srfm-block-label\">By using this form, you agree to our <a href=\"https:\/\/yourwebsitemadeeasy.com\/?page_id=127106\">privacy policy<\/a> and GDPR compliance.\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"srfm-required\" aria-hidden=\"true\"> *<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/label>\n\t\t\t\t\t<svg class=\"srfm-inline-svg\" aria-hidden=\"true\">\n\t\t\t\t\t\t<symbol id=\"srfm-checkbox-efad2413-check\" viewbox=\"0 0 12 10\">\n\t\t\t\t\t\t<polyline points=\"1.5 6 4.5 9 10.5 1\"><\/polyline>\n\t\t\t\t\t\t<\/symbol>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"srfm-error-wrap\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-error-message\" data-srfm-id=\"srfm-error-efad2413\" data-error-msg=\"This field is required.\">\n\t\t\t\t\t\tThis field is required.\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-captcha-container srfm-display-none\">\n\n\t\t\t\t\t\t\n\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"srfm-validation-error\" id=\"captcha-error\" style=\"display: none;\">Please verify that you are not a robot.<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"srfm-submit-container \" style=\"\">\n\t\t\t\t\t\t<div style=\"width: 100%; text-align: justify\" class=\"wp-block-button\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button style=\"width: 100%;\" id=\"srfm-submit-btn\" class=\"srfm-btn-frontend srfm-button srfm-submit-button  g-recaptcha srfm-btn-bg-color srfm-btn-bg-hover-color\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-callback=\"recaptchaCallback\"\n\t\t\t\t\t\t\t\tdata-error-callback=\"onGCaptchaV3Error\"\n\t\t\t\t\t\t\t\trecaptcha-type=\"v3-reCAPTCHA\"\n\t\t\t\t\t\t\t\tdata-sitekey=\"6LdZkF8sAAAAAI-lc17Tz9YUmovR2MK9ICOVkH08\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div class=\"srfm-submit-wrap\">\n\t\t\t\t\t\t\t\t\tSend me the goodies\t\t\t\t\t\t\t\t<div class=\"srfm-loader\"><\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p id=\"srfm-error-message\" class=\"srfm-common-error-message srfm-error-message srfm-footer-error\" hidden>\t\t<span class=\"srfm-icon\" aria-hidden=\"true\">\n\t\t\t<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' fill='none'><path d='M9.99935 18.3327C14.6017 18.3327 18.3327 14.6017 18.3327 9.99935C18.3327 5.39698 14.6017 1.66602 9.99935 1.66602C5.39698 1.66602 1.66602 5.39698 1.66602 9.99935C1.66602 14.6017 5.39698 18.3327 9.99935 18.3327Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' \/><path d='M10 6.66602V9.99935' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' \/><path d='M10 13.334H10.0083' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' \/><\/svg>\t\t<\/span>\n\t\t<span class=\"srfm-error-content\">There was an error trying to submit your form. Please try again.<\/span><\/p>\n\t\t\t\t\t<\/form>\n\t\t\t<div class=\"srfm-single-form srfm-success-box in-page\">\n\t\t\t\t<div aria-live=\"polite\" aria-atomic=\"true\" role=\"alert\" id=\"srfm-success-message-page-128945\" class=\"srfm-success-box-description\"><\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"11\"><strong>11. Glossary and overview of the best tools.<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Glossary<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alt tag: <\/strong> text associated with images that can be displayed instead of the image itself.<\/li>\n\n\n\n<li><strong>File format:<\/strong> the way data, such as images, are structured and stored in a computer file.<\/li>\n\n\n\n<li><strong>Cache:<\/strong> a temporary storage location for data to provide faster access and better performance.<\/li>\n\n\n\n<li><strong>Content Width<\/strong>: the maximum width of the standard content in your website layout.<\/li>\n\n\n\n<li><strong>Compression:<\/strong> reducing file size to save storage space and increase transfer speed..<\/li>\n\n\n\n<li><strong>Pixel:<\/strong> the smallest unit of a digital image or display.<\/li>\n\n\n\n<li><strong>Ratio:<\/strong> the relationship between the width and height of an image or screen.<\/li>\n\n\n\n<li><strong>Resolution:<\/strong> the number of pixels in an image or on a screen, often expressed in pixels per inch (ppi or dpi).<\/li>\n\n\n\n<li><strong>SEO:<\/strong> abbreviation for \"Search Engine Optimisation\". The process of optimising a website to achieve a higher position in search engine results.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The best tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Divi Toolbox<\/strong> <a href=\"https:\/\/divilover.com\/ref\/237\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/divilover.com\/ref\/237\/<\/a><\/li>\n\n\n\n<li><strong>Canva <\/strong><a href=\"https:\/\/www.canva.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/www.canva.com\/<\/a><\/li>\n\n\n\n<li><strong>Adobe Express <\/strong><a href=\"https:\/\/www.adobe.com\/express\/feature\/image\/resize\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/www.adobe.com\/express\/feature\/image\/resize<\/a><\/li>\n\n\n\n<li><strong>Adobe Photoshop <\/strong><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/www.adobe.com\/products\/photoshop.html<\/a><\/li>\n\n\n\n<li><strong>Adobe Bridge <\/strong>h<a href=\"\/\/www.adobe.com\/products\/bridge.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ttps:\/\/www.adobe.com\/products\/bridge.html<\/a><\/li>\n\n\n\n<li><strong>Apple Photos <\/strong><a href=\"https:\/\/support.apple.com\/guide\/photos\/welcome\/mac\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/support.apple.com\/guide\/photos\/welcome\/mac <\/a> <\/li>\n\n\n\n<li><strong>Shortpixel online<\/strong> <a href=\"https:\/\/shortpixel.com\/online-image-compression\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/shortpixel.com\/online-image-compression<\/a><\/li>\n\n\n\n<li><strong>Shortpixel plugin <\/strong><a href=\"https:\/\/shortpixel.com\/otp\/af\/7VADDJV3155590\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/shortpixel.com\/otp\/af\/7VADDJV3155590<\/a><\/li>\n\n\n\n<li><strong>Smush <\/strong><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/wordpress.org\/plugins\/wp-smushit\/<\/a><\/li>\n\n\n\n<li><strong>Sqoosh <\/strong><a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/squoosh.app\/<\/a><\/li>\n\n\n\n<li><strong>Litespeed Cache <\/strong><a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/wordpress.org\/plugins\/litespeed-cache\/<\/a><\/li>\n\n\n\n<li><strong>WP Optimize <\/strong><a href=\"https:\/\/wordpress.org\/plugins\/wp-optimize\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/wordpress.org\/plugins\/wp-optimize\/<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading green-highlight\"><strong>That's it!<\/strong><\/h2>\n\n\n\n<p>This is my recipe for preparing images. I hope it also helps you to place the best quality images on your website without slowing it down.<\/p>\n\n\n\n<p>Do you have questions or additions? Please <a href=\"https:\/\/yourwebsitemadeeasy.com\/en\/contact\/\" data-type=\"page\" data-id=\"130279\">contact<\/a> me. I'd love to hear from you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images play a pivotal role in your website&#8217;s success. They can impact loading time, user experience, and search engine optimisation (SEO). In this article, you will learn step-by-step how to prepare images for your website.<\/p>\n","protected":false},"author":3,"featured_media":222715,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"footnotes":""},"categories":[91,87,89],"tags":[],"hf_cat_post":[167,168],"class_list":["post-118568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-videos-and-downloads","category-all","category-tips-and-tricks"],"_links":{"self":[{"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/posts\/118568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/comments?post=118568"}],"version-history":[{"count":5,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/posts\/118568\/revisions"}],"predecessor-version":[{"id":221102,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/posts\/118568\/revisions\/221102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/media\/222715"}],"wp:attachment":[{"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/media?parent=118568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/categories?post=118568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/tags?post=118568"},{"taxonomy":"hf_cat_post","embeddable":true,"href":"https:\/\/yourwebsitemadeeasy.com\/en\/wp-json\/wp\/v2\/hf_cat_post?post=118568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}