![]() Here are a few options that I have had success with in the past: Once you know the image sizes, there are a few ways to resize images. You’ll need to decide based on your design and strike a balance between maintainability and performance. This could mean images for mobile, tablet, desktop or mobile and desktop or several in between. You’ll need to take inventory of the images and the various breakpoints of the site to determine the optimum number of images for your use case. The best result is have those as close as possible. ![]() One approach to this is to use the developer tools to inspect the site.Ĭhrome developer tools screenshot showing image expected vs actual sizeĭeveloper tools tell us two interesting things, the size the browser is using and the size being sent. With the images in the right format, the next step is selecting the best (smallest) possible image size. Other vendor’s are said to be experimenting with the format so it’s worth keeping on eye on caniuse to track WEBP support. WEBP was primarily a Chrome format but recent browsers releases have improved support with Edge 18 and Firefox 65 adding support for WEBP. It is a good option though, it supports transparency and offers great quality with low image sizes. I typically leave WEBP until there’s automation - which we cover later. You may notice the lock of WEBP in the workflow. You’ll start to know which image format works when you look at images but if you aren’t certain, there’s no harm trying each format and comparing the results. This is a basic workflow to put you on the right track. If the image isn’t complex, then PNG is likely the best choice.If the image is complex, meaning there’s lots of blending colours (gradients), like a photograph, then JPG will be the best choice. If the image isn’t able to be a vector but needs transparency, for example a transparent background, then PNG is the best option. If that’s the case, SVG is the best option. Times when the image isn’t photorealistic and you want resolution independence. Often this applies to logos, icons and illustrations. ![]() I’ll explain the workflow in a little more detail. To help in choosing the right format I came up with this workflow: There are four image formats to consider:Ĭhoosing the right format is important because each format has strengths and weaknesses. Vector and Raster image comparison of a donut Raster images consist of individual pixels, they are not resolution independent but are perfect when photorealism is required. Vector images are made up of points, lines and polygons to create an image that, through the power of maths, is resolution independent. That starts with deciding whether the image is vector or raster. The first important choice in image optimisation is the format of your image. There were four areas covered during the talk: ![]() It’s difficult to remember everything during a presentation, so to help out, I’m publishing the main points from my talk in this article as a quick reference guide, not just for attendees but everyone curious about image optimisation. Check Junior Dev out if you are in the area. Recently I gave a Getting Started with Image Optimisation talk at Perth’s Junior Developer meetup. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |