Image Optimization in Advanced Web Development

SHARE:

File Types and When to Use Them

There are three image file types we use when building websites: .jpg .png and .svg.
JPGs are best used for photos such as landscapes, scenery or people. For imagery in content, such as a blog article image, we aim for 20-70kb. Larger background photos can get up to 500kb, but 200kb is a good average.
JPGs are lossy (they recompress and degrade the image quality each time you export), and they don’t manage gradients very well. If you have a gradient in an image, sometimes you can separate the image into two cuts so that you can render the gradient in a separate background using CSS gradients instead.
PNGs are best for assets such as logos and icons because they support transparency and because logo and icons often use a more limited color palette – since PNGs achieve compression through a reduction in the number of colors.
A PNG can be lossy, but we typically use lossless, meaning every pixel is saved exactly without degrading the color palette, resulting in a higher-quality image.
SVGs have the best quality of all and are used for vector art due to their scalability. We often use them with logos, however, SVGs do create more work for the browser to render and can create sluggishness as the page loads, so the quality of your image should always be balanced against its complexity.
As an example of when we use PNGs and SVGs, compare the logos for Silver Screen Insider and Bozeman Websites. For the former, we used an SVG. For Bozeman Websites, because of the complexity introduced with CSS animation when a user scrolls down, we chose to use PNGs instead so as not to compromise browser performance.
Sometimes the best solution is a combination of both: for the logo on JTech’s website, the “JT” component is a PNG, but the “Celebrating 20 Years” is an SVG in order for it to retain its quality in all viewport sizes.

Optimization Techniques

In order to get the best possible results, it is important to optimize your images. To do so, we utilize three programs: ImageOptim (for JPGs and PNGs), ImageAlpha (for PNGs) and Scour (for SVGs).

Optimizing JPGs

ImageOptim reduces the file size of JPGs and PNGs. For large images, such as the ones we use for background panels, we cap dimensions at 1600x1200px. For content photos such as an image inserted in a blog article, we cap dimensions between 200-800px wide.
After resizing to its final resolution, the image is output in Photoshop using the best quality available. Each time we compress the image it loses some fidelity, so we prefer to rely solely on ImageOptim for compression rather than having Photoshop do a pass. Photoshop is noticeably less efficient: its “save for web” at quality 65 produces an image of equal file size but poorer fidelity than ImageOptim’s quality 85.

Retina JPGs

When targeting retina or other high-density displays, we’ve found it works best to save a single JPG at twice the resolution, but use higher compression, around 50-60 in ImageOptim, which can produce a high-quality image that looks good on both retina and standard, lower-density displays. This technique allows us to use a single asset for retina and standard displays rather than cutting and loading multiple versions and without quadrupling the size of our images.

Optimizing PNGs

For PNGs, we output from Photoshop using PNG 24 in their “save for web” option, then run it through ImageOptim. If it detects that the image is using fewer than 256 colors, ImageOptim will losslessly convert the image to a PNG 8, a simpler file format that can produce very light-weight files.
With ImageOptim, our final output of an image without too many complexities (minimal color, simple shapes, and resolution less than 200x200px) can range in size from 15kb down to under 1kb.

Optimizing Larger PNGs

For more complex images, if we can’t produce a file between 15kb and 50kb with ImageOptim, we use ImageAlpha. ImageAlpha is used to process PNGs from a PNG 24 (millions of colors) to a PNG 8 (256 colors maximum), changing the image from lossless to lossy, ultimately aiming for the one with the smallest number of colors.
Lossiness in this format primarily means strategic refinement of the color palette, eliminating the least-noticeable colors to produce an image that still looks great while reducing its complexity.
After exporting from ImageAlpha, we run it through ImageOptim so it can be optimized further.

Optimizing SVGs

When it comes to SVGs, we reduce as much complexity as possible before we export the image from Illustrator. An often tedious process due to their size, we first try to reduce the number of layers to a minimum while still accurately displaying the artwork. It is then saved as an SVG in Illustrator and optimized with a program called Scour.
We use this automator script to make it a bit easier to use in macOS, allowing you to right-click an SVG file in the Finder and optimize the SVG through the Services menu. We often use font files for vector graphics that are single-color with a program called Glyphs.

Conclusion

Properly optimizing imagery is just another way we can improve the performance of our websites, prevent browser bloat, reduce server and bandwidth resource usage, hasten page load time, keep the development infrastructure clean and provide a much more desirable experience for the end-user.
We hope this exploration of our experience with JPG, PNG and SVG file types, image compression and quality tools are a resource for you as we continually refine our own process to produce websites of high caliber.

COMMENTS

Name

11th,2,12th,20,12th Chemistry,5,12th Computer Science,7,12th Physics,1,5th Sem CSE,1,AAI ATC,2,Android,18,Banking,1,Blogger,41,Books,5,BTech,17,CBSE,22,CSE,4,ECE,3,Electronics,1,English,2,ESE,1,Ethical Hacking,61,Exams,5,Games,9,GATE,1,GATE ECE,1,Government Jobs,1,GS,1,How To,27,IBPS PO,1,Information,52,Internet,24,IPU,8,JEE,8,JEE Mains,8,Jobs,1,Linux,65,News,18,Notes,23,Physics,3,Placement,10,PO,1,Poetry,3,RRB,1,SEO,11,Softwares,38,SSC,2,SSC CGL,1,SSC GS,2,Tips and Tricks,46,UPSC,1,Windows,46,
ltr
item
SolutionRider- One Stop Solution for Notes, Exams Prep, Jobs & Technical Blogs.: Image Optimization in Advanced Web Development
Image Optimization in Advanced Web Development
File Types and When to Use Them There are three image file types we use when building websites: .jpg .png and .svg. JPGs are best used for photos such as landscapes, scenery or people. For imagery in content, such as a blog article image, we aim for 20-70kb. Larger background photos can get up to 500kb, but 200kb is a good average. JPGs are lossy (they recompress and degrade the image quality each time you export), and they don’t manage gradients very well. If you have a gradient in an image, sometimes you can separate the image into two cuts so that you can render the gradient in a separate background using CSS gradients instead. PNGs are best for assets such as logos and icons because they support transparency and because logo and icons often use a more limited color palette – since PNGs achieve compression through a reduction in the number of colors. A PNG can be lossy, but we typically use lossless, meaning every pixel is saved exactly without degrading the color palette, resulting in a higher-quality image. SVGs have the best quality of all and are used for vector art due to their scalability. We often use them with logos, however, SVGs do create more work for the browser to render and can create sluggishness as the page loads, so the quality of your image should always be balanced against its complexity. As an example of when we use PNGs and SVGs, compare the logos for Silver Screen Insider and Bozeman Websites. For the former, we used an SVG. For Bozeman Websites, because of the complexity introduced with CSS animation when a user scrolls down, we chose to use PNGs instead so as not to compromise browser performance. Sometimes the best solution is a combination of both: for the logo on JTech’s website, the “JT” component is a PNG, but the “Celebrating 20 Years” is an SVG in order for it to retain its quality in all viewport sizes. Optimization Techniques In order to get the best possible results, it is important to optimize your images. To do so, we utilize three programs: ImageOptim (for JPGs and PNGs), ImageAlpha (for PNGs) and Scour (for SVGs). Optimizing JPGs ImageOptim reduces the file size of JPGs and PNGs. For large images, such as the ones we use for background panels, we cap dimensions at 1600x1200px. For content photos such as an image inserted in a blog article, we cap dimensions between 200-800px wide. After resizing to its final resolution, the image is output in Photoshop using the best quality available. Each time we compress the image it loses some fidelity, so we prefer to rely solely on ImageOptim for compression rather than having Photoshop do a pass. Photoshop is noticeably less efficient: its “save for web” at quality 65 produces an image of equal file size but poorer fidelity than ImageOptim’s quality 85. Retina JPGs When targeting retina or other high-density displays, we’ve found it works best to save a single JPG at twice the resolution, but use higher compression, around 50-60 in ImageOptim, which can produce a high-quality image that looks good on both retina and standard, lower-density displays. This technique allows us to use a single asset for retina and standard displays rather than cutting and loading multiple versions and without quadrupling the size of our images. Optimizing PNGs For PNGs, we output from Photoshop using PNG 24 in their “save for web” option, then run it through ImageOptim. If it detects that the image is using fewer than 256 colors, ImageOptim will losslessly convert the image to a PNG 8, a simpler file format that can produce very light-weight files. With ImageOptim, our final output of an image without too many complexities (minimal color, simple shapes, and resolution less than 200x200px) can range in size from 15kb down to under 1kb. Optimizing Larger PNGs For more complex images, if we can’t produce a file between 15kb and 50kb with ImageOptim, we use ImageAlpha. ImageAlpha is used to process PNGs from a PNG 24 (millions of colors) to a PNG 8 (256 colors maximum), changing the image from lossless to lossy, ultimately aiming for the one with the smallest number of colors. Lossiness in this format primarily means strategic refinement of the color palette, eliminating the least-noticeable colors to produce an image that still looks great while reducing its complexity. After exporting from ImageAlpha, we run it through ImageOptim so it can be optimized further. Optimizing SVGs When it comes to SVGs, we reduce as much complexity as possible before we export the image from Illustrator. An often tedious process due to their size, we first try to reduce the number of layers to a minimum while still accurately displaying the artwork. It is then saved as an SVG in Illustrator and optimized with a program called Scour. We use this automator script to make it a bit easier to use in macOS, allowing you to right-click an SVG file in the Finder and optimize the SVG through the Services menu. We often use font files for vector graphics that are single-color with a program called Glyphs. Conclusion Properly optimizing imagery is just another way we can improve the performance of our websites, prevent browser bloat, reduce server and bandwidth resource usage, hasten page load time, keep the development infrastructure clean and provide a much more desirable experience for the end-user. We hope this exploration of our experience with JPG, PNG and SVG file types, image compression and quality tools are a resource for you as we continually refine our own process to produce websites of high caliber.
https://1stwebdesigner.com/wp-content/uploads/2017/08/insider-logo.jpg
SolutionRider- One Stop Solution for Notes, Exams Prep, Jobs & Technical Blogs.
https://thesolutionrider.blogspot.com/2017/11/image-optimization-in-advanced-web.html
https://thesolutionrider.blogspot.com/
https://thesolutionrider.blogspot.com/
https://thesolutionrider.blogspot.com/2017/11/image-optimization-in-advanced-web.html
true
6820083649286484786
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy