{"id":395,"date":"2015-08-03T11:38:08","date_gmt":"2015-08-03T11:38:08","guid":{"rendered":"http:\/\/fazilabdulkhadar.com\/?p=395"},"modified":"2021-02-23T12:00:54","modified_gmt":"2021-02-23T12:00:54","slug":"5-ways-to-rreduce-the-number-of-images-used-in-your-websites","status":"publish","type":"post","link":"http:\/\/fazilabdulkhadar.com\/index.php\/2015\/08\/03\/5-ways-to-rreduce-the-number-of-images-used-in-your-websites\/","title":{"rendered":"5 Ways to Reduce the Number of Images Used in Your Websites"},"content":{"rendered":"<p><strong>1. Use CSS3 gradients:<\/strong> Use CSS3 gradients instead of gradients images for the backgrounds. CSS3 gradients let you display smooth transitions between two or more specified colours.<br \/>\nEarlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser. use the following link to generate CSS gradients.<a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">colorzilla<\/a>\u00a0and\u00a0<a href=\"http:\/\/www.cssmatic.com\/gradient-generator#'\\-moz\\-linear\\-gradient\\%28left\\%2C\\%20rgba\\%28248\\%2C80\\%2C50\\%2C1\\%29\\%200\\%25\\%2C\\%20rgba\\%28241\\%2C111\\%2C92\\%2C1\\%29\\%2050\\%25\\%2C\\%20rgba\\%28246\\%2C41\\%2C12\\%2C1\\%29\\%2051\\%25\\%2C\\%20rgba\\%28240\\%2C47\\%2C23\\%2C1\\%29\\%2071\\%25\\%2C\\%20rgba\\%28231\\%2C56\\%2C39\\%2C1\\%29\\%20100\\%25\\%29\\%3B'\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">cssmatic<\/a>.<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1070 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/1.jpeg\" alt=\"\" width=\"579\" height=\"108\" data-sizes=\"auto\" data-srcset=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/1.jpeg 579w, http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/1-300x56.jpeg 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/div>\n<p>2.Use font icons: Use font icons instead of image icons. Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them a popular choice on the web. Below are a few advantages of font icons.<\/p>\n<ul>\n<li>You can apply any CSS effects to them.<\/li>\n<li>Because they are vector graphics, they\u2019re scalable. That means you can scale them up or down without losing their quality.<\/li>\n<li>You send one single or few HTTP request(s) to load them instead of multiple HTTP requests that bitmap images might require.<\/li>\n<li>They load fast because of their small size.<\/li>\n<li>They\u2019re supported in all browsers (even back to IE6).<\/li>\n<\/ul>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1071 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/2.jpeg\" alt=\"\" width=\"400\" height=\"100\" data-sizes=\"auto\" data-srcset=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/2.jpeg 400w, http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/2-300x75.jpeg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n<p>You can generate the Font icon trough the following resources: awsome font, glyphicons, fontello.<\/p>\n<p><strong>3.Use Sprites Images:<\/strong>\u00a0An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.<\/p>\n<ul>\n<li>web browsers only do a few HTTP requests in parallel<\/li>\n<li>doing an HTTP request means a round-trip to the server, which takes lots of time<\/li>\n<li>we have a &#8220;fast&#8221; internet connection, which means we download fast.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1072 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/3.jpeg\" alt=\"\" width=\"120\" height=\"80\" \/><\/p>\n<p><strong>4.Use Inline SVG and data URL:<\/strong> SVG stands for &#8220;scalable vector graphics&#8221;, and the name itself is very suggestive. SVG gives us the power to scale a graphic from 100% to 1000% without losing any quality at all. An SVG file is all XML and is a declaration of various shapes and paths inside an SVG object. Inline SVG spits out all of our XML data directly in our document and allows us to access the various elements via CSS and JavaScript. This gives us great control over the manipulation of things like fill, stroke, position, opacity, and a host of other properties and attributes.<\/p>\n<p><em><strong>Data URI<\/strong><\/em>\u00a0is a base64 encoded string that represents a file. Getting the contents of a file as a string means that you can directly embed the data within your HTML or CSS code.<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1073 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/4.jpeg\" alt=\"\" width=\"544\" height=\"175\" data-sizes=\"auto\" data-srcset=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/4.jpeg 544w, http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/4-300x97.jpeg 300w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/div>\n<p>Data URI converter:<a href=\"http:\/\/websemantics.co.uk\/online_tools\/image_to_data_uri_convertor\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">http:\/\/websemantics.co.uk\/online_tools\/image_to_data_uri_convertor\/<\/a><\/p>\n<p><strong>5.Use Unicode instead of image shapes and icons: <\/strong>It is an international encoding standard for use with different languages and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs.<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-left\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1074 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/5.jpeg\" alt=\"\" width=\"167\" height=\"234\" \/><\/div>\n<p>to see the\u00a0<em>Unicode Symbols<\/em> with Names and Descriptions please refer to the following URL &#8211; <a href=\"http:\/\/unicode-table.com\/en\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">http:\/\/unicode-table.com\/en\/<\/a> and\u00a0Image courtesy:\u00a0<a href=\"http:\/\/unicode-table.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">http:\/\/unicode-table.com\/<\/a><\/p>\n<p>Thanks<br \/>\nFazil<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Use CSS3 gradients: Use CSS3 gradients instead of gradients images for the backgrounds. CSS3 gradients let you display smooth transitions between two or more specified colours. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look&hellip;<\/p>\n","protected":false},"author":1,"featured_media":396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/comments?post=395"}],"version-history":[{"count":4,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/395\/revisions"}],"predecessor-version":[{"id":1076,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/395\/revisions\/1076"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media\/396"}],"wp:attachment":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media?parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/categories?post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/tags?post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}