Image Optimization

                                           

•                    
•                               Image Optimization

covers all these conceImages often represent the majority of bytes downloaded to the site, and usually occupy a considerable amount of visual space. As a result, image optimization can often bring some of the biggest savings byte and performance savings for your site: in fewer bytes you need to download the browser, less competition is for bandwidth client, and faster the browser can download and display the content on the screen.
Optimization of images is also art and science: art because there is no definitive answer that is the best way to compress one image, and science because there are many well-developed techniques and algorithms that can significantly reduce the size of the image Finding the optimal configuration for your image requires precise Multi-dimensional analysis: format capabilities, encrypted data content, quality, pixel dimensions, and more.
Delete and replace images
TL; DR
• Eliminate unnecessary image sources
• Take advantage of CSS3 effects whenever possible
• Use web feeds instead of encoding text in images
The first question to be asked is whether the picture is actually needed to achieve the desired effect. Good design is simple and will always bring the best results. If you can remove an image source that often requires a large number of bytes that refer to HTML, CSS, JavaScript and other resources on the page, this is always the best optimization strategy. Nevertheless, a well-thought-out picture can also provide more information than a thousand words, so it depends on how to find that balance.
Then you need to consider whether there is an alternative technology that can offer the desired results, but in a more effective way:
• CSS effects (dressings, shadows, etc.) and CSS animations can be used to create separate resources for a resolution that is always looking fresh in each resolution level and magnification, which is often a part of the bytes loaded by the image file.
• Web fonts make it possible to use beautiful fonts and retain the ability to choose, search and resize text, which means a significant improvement in usability.
If ever you find text encoding in the image element, stop and think again. Great typography is essential for good design, brand development and readability, but the text in the images offers a poor user experience: text can not be selected, search, zoomable is not accessible and is not a friendly device high definition Use of web resources requires its own set of optimizations, but it rns and is always a better option for displaying text.
Vector with raster images
TL; DR
• Vector images are ideal for images that consist of geometric shapes
• Vector images are enlarged and independent of resolution
• Raster images should be used for complex scenes with many irregular shapes and details
Once you find that the picture is actually the best format to achieve the desired effect, the next critical option is to select the appropriate format:
• Vector graphics use lines, points, and polygons that represent the image.
• Raster graphics represent an image when encoding individual values ​​of each pixel within a rectangular network.
Each form has its own set of advantages and disadvantages. Vector formats are ideal for images that consist of simple geometric shapes (e.g., logos, texts, icons, etc.) and offer sharper in each resolution setting and zoom, making it an ideal format for displays High resolution and means that must be displayed in different sizes.
However, vector formats are lagging behind when the scene is complicated (for example, an image): the amount of the SVG tagged to describe all the shapes can be too high and the output might not seem "photorealistic". In this case, a raster image format such as GIF, PNG, JPEG or one of the newer formats, such as JPEG-XR and WebP, should be used.
Raster images do not have the same nice features that they are independent of resolution or magnification: when you measure a raster image, you'll see sharp and soft graphics. Therefore, you may need to save multiple versions of the raster image in multiple resolutions to ensure optimum experience for your users.
L; DR
• The raster image is a pixel network
• Each pixel encodes information about color and transparency
• Image compressors use various techniques to reduce the number of bits needed per pixel in order to reduce the size of the image file.