{"id":9191,"date":"2022-03-29T13:35:00","date_gmt":"2022-03-29T11:35:00","guid":{"rendered":"https:\/\/zeni.cz\/?p=9191"},"modified":"2024-07-10T10:55:40","modified_gmt":"2024-07-10T08:55:40","slug":"image-optimization-and-compression-in-wordpress","status":"publish","type":"post","link":"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/web-optimization\/image-optimization-and-compression-in-wordpress\/","title":{"rendered":"Image Optimization And Compression In WordPress"},"content":{"rendered":"<div class=\"gb-container gb-container-e37a5077\">\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><strong><strong>Image optimization and compression is very important. It reduces the time it takes to load your website, which can help you increase its traffic. Like that, your website can become more successful.<\/strong><\/strong><\/p>\n\n<\/div>\n\n<div class=\"gb-container gb-container-cdac73b3\">\n\n<h2 class=\"wp-block-heading\">Image Size<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><strong>Always use images at the size you actually display them<\/strong>. It is unnecessary to load an image with a resolution of 1024&#215;1024 px if you display it on your website in a size of 16&#215;16 px.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><strong>Don&#8217;t overdo it with lots of pictures<\/strong>. The more images, the more <strong>data<\/strong> is loading and the <strong>slower the page is loading<\/strong>. Decide whether the image has any added value for your page, such as when writing articles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">In <strong>WordPress<\/strong>, each <strong>image <\/strong>is <strong>reduced <\/strong>to 4 different sizes when uploaded and it is then possible to <strong>load the version <\/strong>that <strong>suits a page best<\/strong>. For example, a size of a thumbnail in a blog is different from a size of a full image in a blog.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Thumbnail &#8211; 150 x 150 px<\/li>\n\n\n\n<li>Medium size &#8211; maximum of 300 x 300 px<\/li>\n\n\n\n<li>Big size &#8211; maximum of 1024 x 1024 px<\/li>\n\n\n\n<li>Full size &#8211; the original size of an uploaded image<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">For additional website optimization, you can also <strong>add custom<\/strong> image sizes to WordPress.<\/p>\n\n<\/div>\n\n<div class=\"gb-container gb-container-c6976302\">\n\n<h2 class=\"wp-block-heading\">Image Format<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>Bitmap Images<\/strong><\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Suitable for very detailed images such as <strong>photographs<\/strong>.<\/li>\n\n\n\n<li>Bitmap images contain a map of individual pixels.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/A-bitmap-image.png\" alt=\"A bitmap image\" class=\"wp-image-7208\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/A-bitmap-image.png 960w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/A-bitmap-image-300x200.png 300w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/A-bitmap-image-768x512.png 768w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/A-bitmap-image-600x400.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">A bitmap image<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JPEG<\/strong> format supports a <strong>large number of colours<\/strong>, making images look <strong>more vivid.<\/strong> <strong>JPG<\/strong> is best suited for displaying photographs.<\/li>\n\n\n\n<li><strong>PNG<\/strong> supports fewer colours than JPEG, but unlike JPEG, it supports <strong>transparency <\/strong>and also handles <strong>text and illustrations <\/strong>better.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">In this meme, you can see the difference between JPEG and PNG in displaying illustrations and texts:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"450\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-JPEG-and-PNG.png\" alt=\"The difference between JPEG and PNG\" class=\"wp-image-7205\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-JPEG-and-PNG.png 420w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-JPEG-and-PNG-280x300.png 280w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-JPEG-and-PNG-300x321.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><figcaption class=\"wp-element-caption\">The difference between JPEG and PNG<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WebP<\/strong> format can be used as a <strong>modern replacement<\/strong> for JPG and PNG formats. Files in this format are much smaller than competing formats, while preserving <strong>the same quality<\/strong>.<\/li>\n\n\n\n<li>An interesting fact is that this format was <strong>developed by Google.<\/strong><\/li>\n\n\n\n<li>WebP is not yet natively supported for WordPress, but there are plugins that can fix this. We use the WordPress <strong>plugin <\/strong><a href=\"https:\/\/wordpress.org\/plugins\/webp-converter-for-media\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WebP Converter for Media<\/a>.<\/li>\n<\/ul>\n\n<\/div>\n\n<div class=\"gb-container gb-container-98017e04\">\n\n<h3 class=\"wp-block-heading\"><strong><strong>Vector Graphics<\/strong><\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It <strong>can save a huge amount of data<\/strong>, it contains instructions in text form to create an image and not a pixel map, as in bitmap graphics. Therefore, a larger file is not required to display a larger image.<\/li>\n\n\n\n<li>If applicable, it is good to prefer it to bitmap (pixel).<\/li>\n\n\n\n<li>Most often used for logos and icons.<\/li>\n\n\n\n<li>The file size increases with the amount of details in the image.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">A suitable format for <strong>vector graphics<\/strong> on a website is <strong>SVG<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><strong>SVG <\/strong>images <strong>cannot<\/strong> be uploaded to media libraries in <strong>WordPress<\/strong>. We can display these images <strong>using code<\/strong> in a plugin or in a template when creating the HTML structure, either by additional loading or embedding in the HTML structure.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">In WordPress, the possibility of using it directly in HTML is also useful in <strong>Gutenberg <\/strong>or the <a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" rel=\"noreferrer noopener nofollow\">Classic editor<\/a>. We can insert SVG images in the editor as<strong> own HTML<\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">The <strong>advantage <\/strong>of SVG images is also <strong>the possibility of modifying<\/strong> their <strong>displaying <\/strong>using CSS styling, as they are a common part of HTML.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/Scalability.png\" alt=\"Scalability\" class=\"wp-image-7202\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/Scalability.png 960w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/Scalability-300x200.png 300w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/Scalability-768x512.png 768w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/Scalability-600x400.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Scalability<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-db4f84b4\">\n\n<h2 class=\"wp-block-heading\">Image Compression<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">Image formats usually support <strong>multiple levels <\/strong>of compression. Thus, it is possible to <strong>save more data<\/strong> with stronger compression, but also worse quality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><strong>Compression<\/strong> should be applied to every <strong>image <\/strong>uploaded to your website. More compressed images are smaller and will<strong> load faster<\/strong>. However, you must not forget that with compression, images <strong>lose quality,<\/strong> so it is necessary to <strong>choose <\/strong>a compression that will sufficiently <strong>preserve <\/strong>their <strong>details<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/An-overly-compressed-image.png\" alt=\"An overly compressed image\" class=\"wp-image-7199\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/An-overly-compressed-image.png 960w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/An-overly-compressed-image-300x200.png 300w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/An-overly-compressed-image-768x512.png 768w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/An-overly-compressed-image-600x400.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">An overly compressed image<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">Here, you can see the very convenient <strong>WebP format<\/strong>, which provides the best file size to file quality ratio, compared with the JPEG format.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-WebP-and-JPEG.png\" alt=\"The difference between WebP and JPEG\" class=\"wp-image-7196\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-WebP-and-JPEG.png 960w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-WebP-and-JPEG-300x200.png 300w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-WebP-and-JPEG-768x512.png 768w, https:\/\/zeni.cz\/app\/uploads\/2022\/03\/The-difference-between-WebP-and-JPEG-600x400.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">The difference between WebP and JPEG<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-6adc1d09\">\n\n<h2 class=\"wp-block-heading\">WordPress Plugins For Image Compression<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">A good <strong>WordPress plugin<\/strong> can help you with image compression. There are various plugins to choose from, but we will mention only few here.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\" rel=\"noreferrer noopener nofollow\">EWWW Image Optimizer<\/a> \u2013 this WordPress plugin is free and <strong>automatically compresses<\/strong> images when you <strong>upload <\/strong>them,<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" rel=\"noreferrer noopener nofollow\">Smush<\/a> &#8211; in addition to image compression, it offers other useful optimization techniques,<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/webp-converter-for-media\/\" rel=\"noreferrer noopener nofollow\">WebP Converter for Media<\/a> &#8211; replaces JPG and PNG files with the <strong>WebP <\/strong>format, so you can save more than half the load <strong>without losing any quality<\/strong>. After installing the plugin, the images will be automatically converted to the new format.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">Image optimization and compression is just <strong>one of many aspects <\/strong>that can help you <strong>speed up your website<\/strong> and increase its <strong>traffic<\/strong>. To learn more, read <a href=\"https:\/\/zeni.cz\/en\/blog\/6-ways-to-improve-the-speed-and-performance-of-your-wordpress-website\/\">6 Ways to Improve the Speed and Performance of Your WordPress Website<\/a> or <a href=\"https:\/\/zeni.cz\/en\/blog\/speed-up-wordpress-websites-by-opzimizing-javascript-and-css\/\">Speed Up WordPress Websites by Optimizing JavaScript and CSS<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">If you are interested in <strong>more information<\/strong> or you need an advice or help concerning your website speed, <a href=\"https:\/\/zeni.cz\/en\/contact\/\">contact us<\/a> and we will be happy to help.<\/p>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Image optimization and compression is very important. It reduces the time it takes to load your website, which can help you increase its traffic. Like that, your website can become more successful.<\/p>\n","protected":false},"author":29,"featured_media":7212,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[310],"tags":[211],"class_list":["post-9191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-optimization","tag-zeni-team-3","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"author_meta":{"display_name":"rjurinek","author_link":"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/author\/rjurinek\/"},"featured_img":"https:\/\/zeni.cz\/app\/uploads\/2022\/03\/Image-Optimization-And-Compression-In-WordPress-300x200.jpeg","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/.\/web-optimization\/\" class=\"advgb-post-tax-term\">Web Optimization<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web Optimization<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/.\/web-optimization\/\" class=\"advgb-post-tax-term\">zeni team<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">zeni team<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on 29.3.2022","modified":"Updated on 10.7.2024"},"absolute_dates_time":{"created":"Posted on 29.3.2022 13:35","modified":"Updated on 10.7.2024 10:55"},"featured_img_caption":"Image Optimization And Compression In WordPress","series_order":"","_links":{"self":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/comments?post=9191"}],"version-history":[{"count":4,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9191\/revisions"}],"predecessor-version":[{"id":12410,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9191\/revisions\/12410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/media\/7212"}],"wp:attachment":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/media?parent=9191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/categories?post=9191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/tags?post=9191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}