{"id":84,"date":"2016-03-10T14:00:22","date_gmt":"2016-03-10T12:00:22","guid":{"rendered":"http:\/\/divinotes.flywheelsites.com\/?p=84"},"modified":"2016-03-10T14:00:22","modified_gmt":"2016-03-10T12:00:22","slug":"image-optimization-for-wordpress","status":"publish","type":"post","link":"https:\/\/divinotes.com\/image-optimization-for-wordpress\/","title":{"rendered":"Image Optimization For Wordpress"},"content":{"rendered":"<p>[et_pb_section admin_label=&#8221;section&#8221;][et_pb_row admin_label=&#8221;row&#8221;][et_pb_column type=&#8221;4_4&#8243;][et_pb_text admin_label=&#8221;Text&#8221; background_layout=&#8221;light&#8221; text_orientation=&#8221;left&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;]<\/p>\n<p>Who hasn\u2019t put their site through Google\u2019s <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\">PageSpeed Insights<\/a> and thought \u201chow on earth am I going to get those images any smaller\u201d? I know I have. Well, even though you won\u2019t necessarily be able to satisfy Google, you can at least get your images as lean as possible and score points with both it, and your users but making\u00a0a few little <strong>image optimization<\/strong> tweaks.<\/p>\n<h2>Get Your Images in Shape before Uploading<\/h2>\n<p>Before you get started with image compression, take a step back and make sure your images get off to a good start. Here are three things you can do to help:<\/p>\n<ul>\n<li>Resize them<\/li>\n<li>Name them properly<\/li>\n<li>Use the right file format for the job<\/li>\n<\/ul>\n<h3>Right Sizing your Images<\/h3>\n<p>If you\u2019re going to use an image that only needs to be 640 x 480 pixels, <strong>resize it<\/strong> before you upload it. You\u2019ll not only save on bandwidth but, if storage space is an issue, you\u2019ll buy yourself some breathing room.<\/p>\n<h3>Name Your Images Appropriately<\/h3>\n<p>It might sound unnecessary but naming your images appropriately helps with Search Engine Optimisation (SEO). For Google and Co. to be able to make sense of what\u2019s on your page, you should name your images according to the subject matter they relate to. For example, using an image of a recipe ingredient in a blog post about a specific recipe and leaving the file name as DSC0274.jpg means that search engines have little or no idea of what the image is. This might change in future as Artificial Intelligence improves but for now they just don\u2019t know what to make of it. Simply <strong>rename name it<\/strong> according to what you want search engines to identify the image as.<\/p>\n<h3>Choose your Filetype<\/h3>\n<p>Most image editing packages will allow you to save or export your images in a variety of forms. The two most widely used formats online are jpeg and png. As a rule of thumb, if it\u2019s a photo, save it as a jpeg, and if it\u2019s a graphic like a logo, save it as a png. The difference in file size is often significant.<\/p>\n<h2>Tools for Optimizing your Images<\/h2>\n<p>There are a couple of routes you can take when it comes to getting your image files as small as possible without noticeably degrading their quality. There are a number of companies that offer online <strong>image optimization<\/strong>, and among the best are <a href=\"https:\/\/kraken.io\/web-interface\">Kraken<\/a>, <a href=\"http:\/\/www.jpegmini.com\">JPEGmini<\/a>, <a href=\"https:\/\/compressor.io\">Compressor<\/a>, and my personal favourite, <a href=\"https:\/\/tinypng.com\/\">TinyPNG<\/a>.<\/p>\n<p><b>Kraken<\/b> supports JPEG, PNG, GIF (including animated GIFs) and SVG images, <b>JPEGmini<\/b> only supports JPEG, <b>Compressor.io<\/b> supports JPEG, PNG, GIF, and SVG, and <b>TinyPNG<\/b> supports PNG and JPEG.<\/p>\n<p>To test their compression abilities, let\u2019s take a photo and run it through all three and compare the results. For this test, I\u2019ve used an image from\u00a0<a href=\"https:\/\/pixabay.com\/en\/model-arsa-aroni-photography-956676\/\">pixabay.com<\/a> which has a reasonable degree of complexity.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Row&#8221;][et_pb_column type=&#8221;1_2&#8243;][et_pb_image admin_label=&#8221;Test Image&#8221; src=&#8221;http:\/\/divinotes.com\/wp-content\/uploads\/2016\/03\/TinyPNG-Image-Compression-Test-Image.jpg&#8221; alt=&#8221;Image Optimization For Wordpress &#8211; Test Image&#8221; title_text=&#8221;Image Optimization For Wordpress &#8211; Test Image&#8221; show_in_lightbox=&#8221;off&#8221; url_new_window=&#8221;off&#8221; use_overlay=&#8221;off&#8221; animation=&#8221;off&#8221; sticky=&#8221;off&#8221; align=&#8221;left&#8221; force_fullwidth=&#8221;off&#8221; always_center_on_mobile=&#8221;on&#8221; use_border_color=&#8221;on&#8221; border_color=&#8221;#dddddd&#8221; border_style=&#8221;solid&#8221; border_width=&#8221;5px&#8221;]<br \/>\n[\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243;][et_pb_counters admin_label=&#8221;Bar Counters&#8221; background_layout=&#8221;light&#8221; background_color=&#8221;#dddddd&#8221; bar_bg_color=&#8221;#bd6982&#8243; use_percentages=&#8221;on&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;] [et_pb_counter percent=&#8221;37%&#8221;]Kraken[\/et_pb_counter][et_pb_counter percent=&#8221;45%&#8221;]JPEGMini[\/et_pb_counter][et_pb_counter percent=&#8221;49%&#8221;]Compressor.io[\/et_pb_counter][et_pb_counter percent=&#8221;67%&#8221;]TinyPNG[\/et_pb_counter] [\/et_pb_counters][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;row&#8221;][et_pb_column type=&#8221;4_4&#8243;][et_pb_text admin_label=&#8221;Text&#8221; background_layout=&#8221;light&#8221; text_orientation=&#8221;left&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;]<\/p>\n<p>As you can see from the results, by no small margin, the best compression comes from TinyPNG and to my eye the image quality is very acceptable at 188 KB. That&#8217;s 386 KB less than the original <span style=\"font-weight: 400;\">574 KB.<\/span><\/p>\n<p>Of the four tools, at the time of writing, only two have WordPress plugins. Kraken have a number of <a href=\"https:\/\/kraken.io\/plans\">plans<\/a> which all start out as a free account with a 50 MB testing quota. TinyPNG on the other hand offer 500 free compressions per month after which they <a href=\"https:\/\/tinypng.com\/developers\">charge<\/a> per image. You need to\u00a0remember that between WordPress and your theme, for every image you upload, a number of additional files are generated from the one you original uploaded.<\/p>\n<h2>Conclusion<\/h2>\n<p>So there you have it, a quick rundown of four good <strong>image optimization<\/strong> tools. The one that wins hands down for me is <a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\">TinyPNG<\/a> which gives a generous monthly quota and does an excellent job at compression your images. So in your endeavours to speed up your page load times, I\u2019d definitely recommend installing TinyPNG and lose some weight on those flabby images!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Who hasn\u2019t put their site through Google\u2019s PageSpeed Insights and thought \u201chow on earth am I going to get those images any smaller\u201d? I know I have. Well, even though you won\u2019t necessarily be able to satisfy Google, you can at least get your images as lean as possible and score points with both it, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":88,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[2],"tags":[9,10,4,6,5,7,8],"class_list":["post-84","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips","tag-compression","tag-image-seo","tag-images","tag-jpeg","tag-jpg","tag-png","tag-svg","et-has-post-format-content","et_post_format-et-post-format-standard"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":5,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":1188,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/posts\/84\/revisions\/1188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/media\/88"}],"wp:attachment":[{"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/divinotes.com\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}