Why is image compression important?
Let's cover some basics before we jump into how we upload images into Drupal. When you are adding images onto a website it's a really great idea to compress them. Compressing images increases load speed, which is a good thing! Your visitors won't have to wait a long time for your website to load.
Wait, that's all? Yes! Really, that's the most important reason we should be compressing our images. Maybe now you're now wondering what this does to the image quality. There are a lot of factors that go into this answer, from choosing vector vs raster and lossy vs lossless. Let's get into it.
Vector vs Raster
It's important to understand what kind of image you need for what you're doing. Vector images are made up of lines and curves, where Raster images are made up of pixels. Vector SVGs are ideal for logos and icons that can be scaled to any size infinitely. Rasterized images are your typical JPEG, JPG, GIF, PNG, BMP, WebP, and TIFF images. The main difference across the board with these comes down to our next topic - Lossy vs Lossless compression.
Lossy vs Lossless
Images that use a "lossy" compression preserve representation of the uncompressed image, all good here. This doesn't mean they're perfect copies;what it means is that you can take a pristine quality image and reduce the file size. This is your typical JPEG.
Lossless compression is used when you don't want to compromise image quality for file size. Typically these are your PNGs, GIFs, and BMPs. When you use lossless image compression you don't reduce the file as much, but you will have a perfect copy of your original.
Now what? Best Practices
Here's where we get into some more tricky information - you should figure out what image format is best for your website, taking into consideration the maximum size each image will display (for example, your hero graphic on a site with a max width of 1140px will dictate that your hero graphics largest width will be 1400px) and if quality can be reasonably compromised, or not.
Logos and icons should use SVG files. Large displaying images with detail could/should be PNGs, but will do fine as JPEGs.
How do I compress my images
Luckily, there are tons of compression tools online!
I'll share my favorite tool, besides the obvious for us designers - Photoshop. Optimizilla is great and happens to be my favorite online tool. You can add up to twenty graphics at a time that will show you the before and after effects of the optimization on your graphic - if it's not so great, change the optimization level.
Uploading Images Into Drupal
Your images are all compressed at the right width and height for the maximum (right? double check!); now what? Let's go through the proper steps to uploading your images into Drupal.
First things first, image styles. Image styles are very cool; essentially what you're doing is telling Drupal what to do with your image, especially if you were not so very diligent in already having your compressed images be the exact sizes you need them.
Going back to the hero graphic example, we would want to set up an image style to reflect our maximum size - 1400px by (let's keep a 16:9 ratio) 788px. I can tell Drupal that this is my image size, and how to handle images uploaded at a different size. Let's say you turn the reins over to your content administrator and they upload a graphic that is 2000px x 900px! That isn't right! Our image style will "scale and crop" or "resize" depending on the settings you've selected.
That is pretty nifty. When I first started using Drupal it took me a little while to grasp the concept (the developers laugh...shh)! I hope this introduction to image compression and image styles helps you on your next project.