{"id":1060,"date":"2023-05-13T12:43:18","date_gmt":"2023-05-13T12:43:18","guid":{"rendered":"https:\/\/georgelaczko.com\/?page_id=1060"},"modified":"2023-05-13T12:43:20","modified_gmt":"2023-05-13T12:43:20","slug":"image-optimization","status":"publish","type":"page","link":"https:\/\/georgelaczko.com\/image-optimization\/","title":{"rendered":"Image Optimization"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">HOW TO OPTIMIZE YOUR IMAGE FOR YOUR WEBSITE \u2013 THE SEO PROCESS<\/h2>\n\n\n\n<p>Note from George Laczko: Use the video to follow along.<\/p>\n\n\n\n<ul>\n<li>With this process, you will not need to install a new WordPress plugin.<\/li>\n\n\n\n<li>Only free programs are used<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">OVERVIEW OF THE STEPS:<\/h2>\n\n\n\n<ul>\n<li>Keep it simple. It is a good idea to have only two types of image sizes on your website. For myself, I use:<\/li>\n\n\n\n<li>Square image: 1:1<\/li>\n\n\n\n<li>Wide image: 16:9<\/li>\n\n\n\n<li>Have a transparent logo. This will be placed on each of all your images (PNG). This logo should be your brand name or website. If you don\u2019t have this,&nbsp;<a href=\"https:\/\/www.freelogodesign.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here to create your free logo<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/www.canva.com\/design\/DAFV5NfONME\/ROdoas2DaejqC3CpgXXAfQ\/edit\" target=\"_blank\" rel=\"noreferrer noopener\">this tool<\/a>.<\/li>\n\n\n\n<li>Image size under 100 KB, but I find the sweet spot at 50 -120 KB.<\/li>\n\n\n\n<li>Image format:<\/li>\n\n\n\n<li>WebP (<a href=\"https:\/\/web.dev\/serve-images-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">25% smaller size than JPEG<\/a>)<\/li>\n\n\n\n<li>JPEG<\/li>\n\n\n\n<li>(Optional but recommended) If your images are original, find the&nbsp;<a href=\"https:\/\/creativecommons.org\/licenses\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creative Commons<\/a>&nbsp;that fits your needs. I use CC BY-SA<\/li>\n\n\n\n<li>(Optional but recommended) Use original images (stock photos alternative).<\/li>\n\n\n\n<li>To flip image: Shift + F<\/li>\n<\/ul>\n\n\n\n<p>Steps using GIMP photo editor:&nbsp;<a href=\"https:\/\/www.gimp.org\/downloads\/\" target=\"_blank\" rel=\"noreferrer noopener\">Download GIMP<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. (OPTIONAL)&nbsp;<a href=\"https:\/\/www.imgonline.com.ua\/eng\/delete-exif.php\" target=\"_blank\" rel=\"noreferrer noopener\">REMOVE METADATA<\/a><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2. OPEN GIMP AND DRAG AND DROP YOUR IMAGE INTO THE PROGRAM<\/h3>\n\n\n\n<p>Note: only use this step if the image is not cropped. Crop the image at either 16:9 or 1:1.<\/p>\n\n\n\n<ul>\n<li>Use the Keyboard shortcut \u2018R,\u2019 &gt; check the box \u2018Fixed Aspect ratio (sometimes located in the top right corner).<\/li>\n\n\n\n<li>Now type in 1600:900 or 500:500. See the example below.<\/li>\n\n\n\n<li>Now hover over the image and select the one you want to keep.<\/li>\n\n\n\n<li>Hit Enter. (Manual option: image, right-click &gt; Image &gt; Crop to selection)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. CROP YOUR IMAGE<\/h2>\n\n\n\n<ul>\n<li>Rectangle select toolr or short cut \u201cR\u201d<\/li>\n\n\n\n<li>To save, Image &gt; Image &gt; Crop to selection<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4.TRANSPARENT LOGO<\/h2>\n\n\n\n<ul>\n<li>Shift + S (Scale tool)<\/li>\n\n\n\n<li>Scale box will pop up (Note: Each website should have the same Width &amp; Height)<\/li>\n\n\n\n<li>Move tool &gt; shortcut \u2018M\u2019<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">5. RESIZE THE IMAGE (SCALING)<\/h2>\n\n\n\n<ul>\n<li>Image Tap &gt; Scale Image &gt; Width should be 750 for 16:9 and 500 for 1:1&gt; Select Scale<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">6. EDIT&nbsp;<a href=\"https:\/\/gitlab.gnome.org\/GNOME\/gimp\/-\/issues\/1485\" target=\"_blank\" rel=\"noreferrer noopener\">METADATA<\/a><\/h2>\n\n\n\n<ul>\n<li>Image &gt; Metadata &gt; Edit Metadata<\/li>\n\n\n\n<li>Copyrighted Status: Copyrighted<\/li>\n\n\n\n<li>Copyright Notice: CC BY-SA<\/li>\n\n\n\n<li>Copyright URL: https:\/\/georgelaczko.com\/copyright-info\/<\/li>\n\n\n\n<li>Document Name: George Laczko<\/li>\n\n\n\n<li>Author: George Laczko<\/li>\n\n\n\n<li>Description: a portrait of George Laczko<\/li>\n\n\n\n<li>Keywords: A headshot of George Laczko<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">7. NOW TO SAVE:<\/h2>\n\n\n\n<ul>\n<li>Export as &gt; shortcut &gt; Shift + Ctrl + E<\/li>\n\n\n\n<li>Select File Type (bottom)<\/li>\n\n\n\n<li>Make sure the name of the file is SEO friendly<\/li>\n\n\n\n<li>Choice \u2018WebP image\u2019 or JEPG<\/li>\n\n\n\n<li>Note: Make sure F<\/li>\n\n\n\n<li>For JEPG make sure you select a file size. This option is not available for WebP images. For quality, select from 60 to 90.<\/li>\n\n\n\n<li>Export<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">OTHER SHORT<\/h2>\n\n\n\n<p>Filp Tool: Shfit + F or Tools &gt; Tranform Tools &gt; Fiip<\/p>\n\n\n\n<p>Tip: To speed things up,&nbsp;<a href=\"https:\/\/docs.gimp.org\/2.10\/en\/gimp-concepts-shortcuts.html\" target=\"_blank\" rel=\"noreferrer noopener\">create your shortcuts with GIMP<\/a><\/p>\n\n\n\n<p>Next Chapter: Repurposing your images for other platforms \u2013 process \u2013 using your newly created image on many platforms.<\/p>\n\n\n\n<p>Next Chapter: How to outsource your process (the simple stuff)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HOW TO OPTIMIZE YOUR IMAGE FOR YOUR WEBSITE \u2013 THE SEO PROCESS Note from George Laczko: Use the video to follow along. OVERVIEW OF THE STEPS: Steps using GIMP photo editor:&nbsp;Download GIMP 1. (OPTIONAL)&nbsp;REMOVE METADATA 2. OPEN GIMP AND DRAG AND DROP YOUR IMAGE INTO THE PROGRAM Note: only use this step if the image is not cropped. Crop the image at either 16:9 or 1:1. 3. CROP YOUR IMAGE 4.TRANSPARENT LOGO 5. RESIZE THE IMAGE (SCALING) 6. EDIT&nbsp;METADATA 7. NOW TO SAVE: OTHER SHORT Filp Tool: Shfit + F or Tools &gt; Tranform Tools &gt; Fiip Tip: To speed\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"ppma_author":[53],"blocksy_meta":"","featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"post_excerpt_stackable":"<p>HOW TO OPTIMIZE YOUR IMAGE FOR YOUR WEBSITE \u2013 THE SEO PROCESS Note from George Laczko: Use the video to follow along. With this process, you will not need to install a new WordPress plugin. Only free programs are used OVERVIEW OF THE STEPS: Keep it simple. It is a good idea to have only two types of image sizes on your website. For myself, I use: Square image: 1:1 Wide image: 16:9 Have a transparent logo. This will be placed on each of all your images (PNG). This logo should be your brand name or website. If you don\u2019t&hellip;<\/p>\n","category_list":"","author_info":{"name":"George Laczko","url":"https:\/\/georgelaczko.com\/author\/canadageorgegmail-com\/"},"comments_num":"0 comments","_links":{"self":[{"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/pages\/1060"}],"collection":[{"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/comments?post=1060"}],"version-history":[{"count":1,"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/pages\/1060\/revisions"}],"predecessor-version":[{"id":1061,"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/pages\/1060\/revisions\/1061"}],"wp:attachment":[{"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/media?parent=1060"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/georgelaczko.com\/wp-json\/wp\/v2\/ppma_author?post=1060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}