As a developer you can do everything in your power to make your site really slim & fast but when you hand it to the client they could still mess it up in many ways. There are a plethora of things you need to do to keep this from happening, like handling uploaded images better.
I'm able to accomplish this for our clients with a couple very simple modules that you should be using on most (if not on all) of your sites, they are:
Picture & Breakpoints
These two modules work together to handle responsive images. The picture module uses Picturefill to do it's magic. If you don't know about Picturefill it is a polyfill that allows you to use the Picture element today even though only Firefox, Chrome (+ Android Browser) & Opera support it as of writing this.
Setting up these modules is pretty straightforward:
- Enable Breakpoints & Picture
- Set up your breakpoints by going to
/admin/config/media/breakpoints.- These are setup just like CSS breakpoints and look like
@media(min-width: 640px)
- These are setup just like CSS breakpoints and look like
- Configure your new Image Styles breakpoints just made for you.
- If you breakpoint is a max width of 600px you should scale your image to at max that width.
- Edit your display on the content you want to use responsive images to use the
Image with sizesformat instead of just standardImage.
- Then you'll have to choose your sizes which will look like this:
(min-width: 0px) (min-width: 640px) (min-width: 1025px) (min-width: 1441px). - Under that you choose which Image Styles you'd like to use. You'll want to choose the ones that breakpoints created for us based on the breakpoints you made.
- Choose a fallback image size. I have been using my mid size pictures that are at max ~900px wide. I personally feel like that's large enough it should work for people as a fallback even if it's a little pixelated, that's gotta be better than a 1MB image.
- When all said and done it should look like this:
- When all said and done it should look like this:
- Now when you go to your content it should be switching images based on screen size.
Image API Optimize
Image API Optimize lets you modify the default Drupal image optimization settings. You can choose your compression method and compression amount for your images. This is all helpful things, but there is a patch out there that lets you use this module with TinyPNG. If you've never used Tiny PNG, let me just say it's magic and will make your PNGs crazy small.
Once you have patched and enabled Image API Optimize you will have the options to choose which service you want to use. You can now choose TinyPNG
Once you have that setup you will need to clear your image-cache using drush drush image-flush --all. Then the next time you hit a page with an image it will take a minute because it needs to go out can compress these images, but you should notice they're significantly smaller like 60% smaller at times. Now you don't need to worry about your clients uploading so many PNGs because they need transparencies.
With that very small amount of work we have significantly future proofed the performance of your client's site by making sure all user uploaded pictures are handled properly.
:wq