ImageOptim works for both JPEGs and PNGs, though for JPEGs I generally find better results with JPEGMini. For JPEGs that meant JPEGMini – a paid for, but fantastic, app. Then we ran all our images through optimisation tools. Some images required multiple variations dependant on viewport size. Optimise all the image assets.īefore we began optimising the images with tooling we started back in Photoshop, tweaking compression rates and image dimensions to find the best combination (or combinations). The techniques that worked for us may not work for your site but the broader concept of taking a step back and searching for possible optimisations is something which certainly will. Then we had to work out what we could load on demand for the user and how we could anticipate their actions. These took us quite a long way there and will work for every single site. Below is a comparison of the site before and after we optimised it: Almost all of the performance problems we faced stemmed from the amount, and the size, of the images we had to serve and there was no simple answer for how to offload them. When I got the design for the recent iteration of the Lonely Planet homepage I was initially skeptical of how we could make it performant given the abundance of high resolution images. These solutions alone won’t automatically solve the original problem of image-rich sites though. mDot sites are always believed to be more focused and lightweight and, whilst that is often the case, part of the reason for this perception is that many desktop sites are overly bloated to begin with.Īs an industry we’re pretty good at tackling these challenges and the discussions around responsive image and High DPI image solutions rage on towards a hopeful conclusion. Responsive Web Design gets a hammering within the performance field for producing heavy sites – with images usually taking the brunt of the blame.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |