Dealing with photos and build sites fast

---------

Your speed and maintain the performance of your site always hits the big obstacle are the pictures we'll talk here about steps to deal with the images to improve the performance and speed of your site.

There are several ways to deal with images to maintain performance and speed of your site:

- Optimize images

- CSS Sprites

- loading / Defer images

- Data URI

- WebP

---

Optimize images Optimize your pictures is meant here is to reduce the image size without affecting image quality and also delete and crop the image size only user and reduce the color depth in the picture and this works to reduce the size of the image used, you can use any of the photo editors (GIMP, Photoshop) to do this and also there are many Web sites to improve such images (tinypng, optimizilla). CSS Sprites Imagine that your site contains 5 photo browser will load each image individually and that means an increase in the number of requests "Requests" and I always aim to reduce the number of requests to increase the speed and performance of the site, also imagine we can assemble all the images on the site in picture and that's what we mean by the CSS sprites. If the intended collection of photographs here is a compilation of all images in the site in picture and this reduces the number of requests which leads to an increase in performance and speed of your site. -How to make a compilation of images and use them on the site? All you have to do is assemble the images into a single image and set this picture as wallpaper "background" and you control the pictures through the background-position property. CSS sprites In the picture at the top instead of using each individual picture images are grouped together in one image and background property through background-position and we can control the image and determine which of the two images appears. background. In the picture we find that using the background property to set the image and then determine which of the two images to be through the background-position property also found when we wanted to change the image on hover event occurs, just change the value of the background-position property, through a process of merging images together we can reduce the number of requests that a browser if we use each image separately. Defer images Simple ways to deal with pictures is delaying the emergence of images to the user until the end of the download site. Adopt the idea of postponing the images to use another image or don't use any pictures at the end of the browser from loading the site we use the JavaScript call real images in places. Images uploaded after the download site, the red line splitter is a reference to the end of the download site. At first we use data-attrbiute mode and place the image that we want, and use another image in the src or left without anything like the picture. img markup II using the JavaScript we specify all the images and then replace the data-attrbiute with the src of the image we call the function when the page finishes loading. Change the image path upon completion of the download site You can view the code here. Also many people prefer to use the Load Plugin a tool working on do not show pictures but when you come to it, meaning that the image will not appear unless the user has access to. Data URI Many people are not aware of the possibility of adding images inside HTML&CSS without loading any source image is encoded within the file without having to load the resources requested from the browser and this process is called base64 encoding. How do I embed images and converted to base64: -You can search for any tool you convert images into base64 let that site. -Upload the image and then you'll find that the site has managed to turn the image to base64. -Take the formula out for you site and copied in the img element's src or within the url if you want to include in the CSS. base64 encoding The benefit of using images to Base64 format is that the page doesn't need to load the image and this helps us to reduce the number of applications which helps us to increase performance and speed of our website because they are considered part of the HTML code. Always when you load the contents of the site is loading HTML file first and then the CSS and images are downloaded and assume that our site contains 3 images, the number of applications is 5 = 1 HTML file + 1 CSS file + 3 files. But if we convert images to base64 format would be total is only 2 = 1 HTML file + 1 CSS file, which we reduce the number of requests from 5 to 2 and this happens a big difference in performance and speed. But by using the Base64 format images you will notice that the HTML file size became larger and you can solve this problem by minimizing the "Minify" HTML file size - WebP The WebP is a new version of images and are better than other versions of the images because they provide the same quality but with less volume. WebP version features: -Better than PNG format and smaller in size b 26%. -Better than JPEG format and smaller in size with 25-34%. Photo showing that there is no difference between the quality of the two images. But this formula is not available on all browsers now but we can use with picture element, although the picture element is available on all browsers but we can use because img element inside. WebP picture You can view the example you will find in the beginning picture WebP format is used then the img element has been using the same image but in other words, interest is supporting browsers if your browser supports WebP formula will bring the first image and discard others and if your browser does not support this formula will bring other image that works on all browsers. In the end you can find all manner and identify it more and get to know the pros and cons in order to determine which way is best suited ltstskhdmha in your site. --- > ---