 Does anybody recognize this sound? That didn't work. Anyway, it was the dial-up sound. It was meant to be just eight seconds of that. No, no, it was just that little bit. It wasn't that long ago that we would wait 26 seconds to connect to the internet. Once connected, we would wait another two minutes for a page to finish loading. How long do you think people wait now? Three seconds, with so much to do and so little time, we want it all now, and we want it fast. Hello, everyone. My name is Chrissie DeRise, and I'm a customer support engineer at Acquia, having previously worked as a web developer at an agency in Brisbane. In this presentation, I'd like to cover three points. First, why image optimization is important, how it affects website performance. Secondly, the benefits developers and customers can gain, and finally, optimization tools and methods to get current sites performing better. Most people would probably agree that images are important for a website. Can you think about a time you last saw a website that didn't utilize images in some way? Whether it's banner images, visual cues such as icons, even the most minimal websites draw attraction because of their design. Coming from a background of front-end development, I personally trust a website with great design over one that does not. Thank you. Raise your hand if you've ever left a website that you didn't like the look of. And who here has ever left a website that took way too long to load? According to some studies, 40% of users will abandon a website that takes more than three seconds to load, and I'm definitely one of them too. If I'm on a site that takes too long to load, or if I'm bombarded with Temean, I'll just go to the descriptions. I'm not going to go anywhere else. But does it really matter if a site is too slow? According to the same studies, a one-second delay in page responses can result in a 7% reduction in conversions. For Google, if their pages slow down by half a second, their traffic drops by 20%. For Amazon, if their pages slow down by one second, they could lose 1.6 billion per year. 52% of online shoppers say page loading is important to their site loyalty. If you're online shopping and you're ready to pay, would you feel nervous if the process would take too long? Would it stop you from wanting to buy from that website again? 79% of users are less likely to buy again if they are dissatisfied with the performance. Perhaps that is because the average attention span of a human is now 8 seconds, declining from 12 seconds in the year 2000. This means that Goldfish beat us by one second. So why is image optimization important and how does that affect performance? According to a 2016 report from the HTTP Archive, images account for 65% of a web page weight. A lot of benefits can be made by focusing on image optimization. So we've established why it's important, but you may be thinking, what's in it for me? What benefits can you and your customers gain with image optimization? For developers, when I was working at an agency, a lot of my job was to actually take some images and then resize them from the beginning. So doing that meant that later on in the process, I didn't actually have to lose time by having to do that again, which also meant that I could also tell clients from the beginning on how to do that. When you know you can optimize images that will help with a fast website, it also means that images do not get in the way of your workflow and you can focus on making a great website which has a great user experience. If your client's website has a great user experience in his performance, it means you'll have happy clients who may be more inclined to recommend you to their friends. What are the benefits for clients? In my role at Acquia, we deal with around 5,000 tickets per month and a fair few of these are about image performance, sorry, and website performance. As I mentioned earlier, oh, sorry. The faster a website is, the more your users will be engaged. We also send notices out to customers when they reach their file size capacity and whenever I'm looking at where the most of those files are, I tend to see quite a lot of images that are large because of PNGs or like 35 megabytes, which is not really great on a website. So rather than upsizing, if they resized their images and made them smaller, they wouldn't have to upside saving your customer's money. And Google uses page load time as a factor in their ranking algorithm, thus having a fast loading website means you'll have a better ranking. What are some ways that image optimization can be achieved? There's three sections I'd like to talk about, image formats, methods for optimizing images, and file management. Firstly, let's talk about image formats. This all depends on the image itself, but I tend to go for anything under 250 kilobytes, the lower that you can get it, the better. And the most common file formats are JPEGs, PNGs, and GIFs, or GIFs. I don't know how to say it properly. There's a bit of a war. In the future, it may be possible that none of these are actually in use anymore because with the growth of SVGs in WebP file formats, but I'm going to mainly talk about these file formats and what we can do now to optimize existing websites. So which file format should you use? This does depend on the function, but in most cases, I'd be recommending using JPEGs as it uses a complex compression algorithm and is the most common and recognizable format. Considering how often we see PNGs are used in that graph from HTTP Archive, there appears to be a misconception about what PNGs should be useful. As mentioned earlier at Acquia, I see a lot of images that are PNG files that are 35 megabytes, whereas PNGs should really only be used for logos or icons or things that need to be transparent because it doesn't have the best compression and always will end up being larger. And GIFs, I've not really ever seen them on any website apart from Buzzfeed, so I'm not really sure if there's any other use for that apart from in emails when you need to send something cool. Now I'd like to talk about some tools and methods so that we can use to achieve image optimization. Since most websites will have banner images on the site, usually these are quite large, but that doesn't mean that every image on the site needs to be that same size. And you also want to make sure that you're serving relevant content per device. Why should someone on a mobile be seeing something that's 1200 pixels wide that just weights their bandwidth and makes it slow? So, and since mobile users exceed desktop users at 52%, it makes more sense to deliver images appropriate to each device. One way of doing this is via the adaptive image module. Adaptive images and thus the module detects the device and then Drupal using that module that then rescales an image on a particular breakpoint so that you get served a smaller image if you're on a mobile and a larger image if you're on a retina display. It does use jQuery and JavaScript, which means it only works if JavaScript is enabled on a user's browser. Lazy loading is also another option, which just it only... It won't load images that don't show up on the viewport. You can use this as a Drupal module, but I'd recommend using jQuery so as not to have too much module bloating. There's also resizing software. When I worked at the digital agency, we had a lot of old clients that were asking us about website performance, so what I would normally do is I would take all their files and then upload it locally to my computer and then I would use Adobe Photoshop to do a batch resize function. So instead of just having to do that manually, you can set a little record option and then you can make it so that it goes through all these images and then closes them so you can either resize it at 72 dpi or I would do a particular width so that I didn't have to waste too much time doing that, and then after that I would then use image optimization software to make that even smaller, such as Image Optim for Mac, which also has a command-lined interface. There's also KCM and Kraken and Tiny PNG, and there's also some Drupal modules where you can optimize images as well. Oh, sorry. He keeps asking for a Wi-Fi. Another thing that can degrade website performance is when there are too many files in one directory without any directory structure. Having a good file structure means the server will spend less time looking for a file. At Aquia, we have found that over 2,500 files in any single directory can affect a server's performance. The best method would be to either use FileFeedsPath, FileEntityPath, or TokensModule. So you can set up that field to save to a particular directory, and using the TokensModule, you can set that directory such as the year and the month. So whose role is it to optimize images? Well, I've mentioned that there are modules for Drupal that can optimize images. The one fallback for this is that it uses a lot of memory and can cause server problems. It is lighter on the server to do as much of this as possible before uploading it to Drupal. I believe that image optimization and management is a shared responsibility that exists for the whole life of a website. Do content editors know which image formats to use and how big the images should be? The content editors of a site should know the benefits of optimizing images and having the tools necessary to achieve this. To conclude, we live in a world where there is plenty available to us and there's plenty of competition. We don't have the patience to wait anymore. If you're eating at a restaurant, do you want your dinner as soon as possible? Would you go back if you had to wait too long? We want our websites to load as soon as possible so we can access great content faster. One way of improving the performance of your site is through image optimization. Image optimization is best achieved if it's done through all stages of a web development cycle. From developers to clients to content editors, anyone who uploads images should have the knowledge and skills to resize and optimize those images. In a few years' time, we'll have faster internet with bigger data plans. Our image formats will be new. Our computers and mobile phones will have a higher pixel density. Maybe our attention spans will increase again. There is plenty of information available about image optimization and my aim with this talk was to explain the benefits and its impact on web performance. What I've mentioned here is just some of the options. And I have compiled a document that I've found useful with some articles and tips which I'll upload to the Drupal.org website. And that's it. Thank you. Questions? Thank you for that. I've got two questions. One you mentioned the other optimization tools. Yes, they're better than the Photoshop, so that's what we're going for. Image Optum, do you mean? Yes. Generally, I end up using both because if you have a file that's 35 megabytes large, then if you use an image optimization for an image optum doesn't actually do resizing, it just reduces some of the data in that actual JPEG file, so metadata that you don't need. Yes. Generally, I'm just trying to think back to my time when I was still at that agency and I tended to, depending on where the image was used from, so if it was used on an article about food, for example, then I would probably try to name it with dashes in it. So like picture of Lasagna or so. But I haven't really seen a lot of that at Acquia. We quite often, I just see files that have random numbers in them. So, yep. I've always just uploaded a video image of God, you know, for the reason. So that image page can handle the way it's displayed at the top, you know. And then I think it's called image quick or something, which compresses the JPEG in the Google. I don't know if that's a Google module, it's called. I think there's a module, I think it's called Image Magic, an image GD, that do that. You choose, you know, do I compress the JPEG's 180% to 40%? That's a bit brutal, that module. So that's the way I always go on. So you would suggest always optimizing it as much as you can in displaying the original image on the website as opposed to using the image here? Yes, yeah. I would definitely suggest that. Because again, if you use those modules, it puts impact on the service, which can result in other kinds of problems as well. And not every site will have that module installed. So I think if we can get to a point where we're doing that before all the images get to the actual site, then that's probably better. I would say you would be able to use both, because I think if you use Photoshop to resize an image and then save it for web, say if it's one image in your case, you can kind of then control how it saves. Whereas I'm not sure if you've really got that option with the module. It'll probably just save it at 70%. And some images look great at 70%. Some images look great if you save them at 30%. So sometimes there's a bit of a give-take there where you can get an image smaller. Whereas it might not be possible to do that on every single image that you upload to a site. But I definitely do think that if we can do some of it before we upload it, and then in addition to that module, then we can get even smaller file sizes. Okay. I've not come across that, but I've also not really used that image-gd module. I just know that it's... No worries. Hi. You mentioned that if you can keep two files in one directory, do you recommend sort of storing files in images in a big directory structure where the page content is? Do you really often actually get to that location? Sometimes when you're in another location or site, so the kind of URLs end up really crazy. Do you recommend just kind of dumping all the other images in each folder and then go to a site or do you normally manage that? If you've got a lot of images across the site. It's a good question. Because I guess I don't... Yeah, because say if you've got a same image that's used in a few different locations, it doesn't really make sense to upload that image four times so that it's within a particular directory. So I would say if you have images that you know are going to be global across other ones, then you could maybe create a directory that's for those images that you would use more often. Yeah, but yeah. If you can kind of load your content on one page in lots of different directories, would that make the page look much better? I don't think as much as if there were lots of files in one directory. Sorry, obviously what we're going to do is we've got the medium one. So in an ideal world you would upload your image, you would name it correctly, and you would maybe tag it depending on what the ABC appeal for you. So if you've got both of those images, a plate of design, you could tag a plate of food, a design app, and then in future, you could tell your content editors before you upload an image, go and have a look at the library, go search for or see if it's there already. And so just to pass on that to your question as well, we actually just had this same problem literally a few weeks ago where the client came to us and was like, the images are too big, making them smaller, so we made them smaller. The original image. Yeah, the original image, and then we were like, ah, it looks shit, and then we were like, ah, what do you want us to do? So we had to find a half a million between inlooking crap, and it working okay on Google, because there was this whole new HP thing to consult with, and we had to go through this process of any image that we could control by those backgrounds, and anything non-contemplated. We had to run through our image optimization, and then sometimes they would say, ah, in actual fact, can we compromise on the size of this one to give it better quality? And then in actual fact, the home made of the website, they did their own image optimization, rather than rely on, if you look at the slider. Yeah, exactly. In my home page here, it's just the first image you see, and it looks awful. And I'm told that it looks awful, but it's like, ah, we need the speed for the home page. Because they've got the gradient, and the gradient you can literally see aligned. It reminds me of an image you want to portray, that I've done my due diligence by the way. There's a responsibility, sorry, from the web designers point of view, to have to understand the differences between whether or not an image is suitable for JPEG, or whether or not the PNG needs to be 24 bit, great bit, and understand the compression algorithms, and understand what defines native PNG. And you can actually get that quality imagery at a lower file size, where it's a really simple thing, like maybe, for instance, you're uploading a simple black and white load file for live frames. That would actually be a lower file size or higher quality as a PNG to take there. Can I add to that? There's a photographer in the world who's going back to the source again, the original, so you're going to have one for the JPEG, because every time you go to JPEG, there's quality. So, you're going back to the original raw file you came, or the closest file you had to the original source, to give you a better quality, and you can handle it yourself. That's the one for image crop, doing an article, and you get a nice picture that doesn't shrink down, for the summary, if you just pop it, say one person's face or the front door of the building, put the little image in the summary, and then we can have something squashed down in the room. Yeah, I've used that module before, at my last job as well. I think you can also, with that module, set it that if someone uploads an image that's too large, like a maximum of one megabyte, if they try to upload a 20 megabyte image, it's not even going to go through, it's going to fail. So then there's also that option that you could kind of guide them saying, no, don't upload a 20 megabyte image, but then I guess it's quite, in some cases, depending on the website, you may want to have an option to, people might want to see a really large image. But I think, yeah, so, sorry. Are there any options in SVGs, can you upload them and optimize them any further, or just what they are? I think you can and I don't really know enough about SVGs at this stage to be able to fully answer that, because a lot of my, like I'm a sport engineer now, and a lot of what we do is just seeing what we see, and I haven't really seen a lot of that SVG stuff in the last year of working there. So I would have to research that a little bit before being able to fully answer that. Can you just upload a normal SVG with a normal image upload? No. So there was a session before, so I looked at it and I was there and I was like, can you do that as a final? No. And there's a bit of security issues that are really okay, but it's, it's, but really okay, but it's okay. So you needed to open the trust of people that are following SVGs? Yes. Yes, I see what you mean. I want to zero the problem, but I don't want to mention the session. Oh, sorry, yes? I have a personal experience. Did that be recommended for the revolution of the invention that we would say? See, because we have to have that for all our throws, and the lighting is more flat out somewhere, you know, later. I think I've always, my guidelines always been for banner images, I use 1280 pixels wide. And then for any inline content, I either do 960 pixels or 800 pixels. And then it depends on the website itself, but I think the guidelines that I followed, because it's, you know, we do have really small screens and then really large screens, so it's really with that adaptive images is a good solution for that, because then you can upload large images for people who are on retina, and then small images for people who are on mobile. Yes, so again, actually we've had the exact same thing a few weeks ago, where the client was like, that they tested on a 4K device, and the website was like, I'm not even serious. The way we argued is, we went into the big analytics and it was like, we will happily fix it, right? We can fix it, as a way to fix it, we can still have a chance to fix it, but you really want to spend money fixing it for not more than 70 years, at which point, I'll sit there, and I will be like, we come at it from a research perspective, it's the users are 1920, they need to account in 1920. The website will do 70% of their users on mobile, so we focus on optimization there, and then obviously the website in our desktop is really good, but when they're like, oh, why isn't it, why are my Mars 77 users on mobile? Which could change in the future too, like that's what it is like now, but the internet changes quite quickly, so it might be possible that we'll have to change that approach when the time comes, that's the retinas are more common. Yeah? I'm not sure, I think there is one module, because I was just reading an article the other day on Drupal.org about responsive images, and it did say Drupal 7 and 8, but I would need to look that up, so I'm quite sore, sorry. I'm trying it, but I think there's 70% of it. It uses image cache, so you basically add a new image in the slate, say when this image is on mobile, the slate is lodge or for me, and then you display it on desktop, lodge, and when you, you know, I don't know why I'm not sure it's extra lodge, so let's use the image cache, that's not quite the way you would be going, it's just an original slate image. It really only does that work once, and then 8 years, on location, yeah. One thing I would like to know is, our revenue images, normally the web images 72 DPR, but our retina images are higher DPR resolution, yes, does that look the same, you know, but I look at the screen, it doesn't really look the same, but what is the reason? Because if I look at the 72 DPR, on that, it looks like half is mine, it's other type. Yeah, if you printed a 72 DPR image that looks good on a Mac, it's not going to look good if you blow it up on a canvas, which is why I always want to, when you're printing images, do you want to have the highest DPR possible? Ah, no, I always use 70. It was also, that method that I was using was also just something, like a quick way to resize lots of images, because there would be like hundreds of files, instead of going, oh, they're all different sizes, like 300 pixels, but then some of them might still be larger than other ones, because of their DPI, so then I would just make a judgement call and say, okay, these images need to be smaller, because they're only used for inline images, not for banners, so I'm just going to set them all as 72 DPI, which means some of them might be 400 pixels, some of them might be 900 pixels, so that was kind of a quick way to get all those images at a relatively smaller size, but still okay for web, which helped on when you've got to resize lots of images. Cool? Yeah? Would you recommend Adobe Fireworks? I've never used Fireworks. I didn't know that there was an option for that. I've always just used Photoshop, and I'm aware that everyone does have Photoshop, which is, I think, why GIMP doesn't. There's a lot of online editors that can do the same, which I'll add to that document that I'll add to the Drupal.org website. Which one? Sorry? Okay. Cool. Yeah? To do what, sorry? I'll repeat the question. Repeat the question. So are there other methods for being able to do progressive images? Is there modules available? I'm just trying to think. Sorry. Because at this stage I'm not really sure if there's a module for that, for Drupal, but I can look that up and also put it in the document for you. Cool. Thank you.