 So we're going to get started. Thank you for coming. So we're going to talk about images, and the steps you should do with images before you uphold them to your site and how you can test your website speed. My name is Irina Menutl. I've been building things on the web for over 15 years. And currently, I do consulting for clients out of Orlando. And I provide monthly care and training as well. So here's the link to the slides for this presentation. And there's also a link at the end. So I wanted you to think about how many seconds do you normally wait for a page to load on your mobile before you give up? Like, I counted five to six seconds for myself if I'm really patient. 53% of visits to mobile sites are abandoned up to three seconds. So half of the people will leave after three seconds if the site hasn't loaded, and they won't come back. So website speed will affect your user experience, your SEO, and conversion rates. So this chart shows the breakdown of an average page on the web right now. It is over almost four megabytes in size. And you can see half of the page in blue is taking up by images. And a little more than a quarter is video. And then the rest is style sheets, scripts, and fonts. So optimizing images is really important when it comes to website speed and your user experience. Etsy, they did an experiment on their mobile site. They added 160 kilobytes of empty images. So that means that people saw nothing different, but the page was 160 kilobytes heavier. And they saw there was a 12% increase in bounce rate. So even if your site loads fast on your wired cable connection, you have to think about people accessing from other mobile devices and from different network speeds. It's really nice to provide the best user experience to everyone. So I'm going to talk about popular image formats used on the web right now. JPEG, PNG, JFN SVG. So JPEG is the most popular one. It's used for photos like this with many colors. It is a lossy format. JF used to be more popular for animations. It's really big in size. If you need to provide transparency for a photo or an image, use a PNG instead. PNG is great for logos like this. And it supports transparency. So if you have a logo and you need to put it on a different color background, you save it as a transparent PNG image. And then you can insert it in a different color background. It will take the background color. And there's two formats of PNG8 versus PNG24. The difference between the two, PNG24 supports more colors, but it's heavier in size. So if you have an image that does not require transparency and it has a lot of colors, save it as a JPEG format, not a PNG, because the file size will be smaller. SVG is a scalable vector graphic. It is small in size, and it supports transparency. So you can see the difference between raster and vector. So raster image was JPEG, PNG. Have you ever tried to enlarge an image and it gets really blurry and pixelated? Raster image loses quality when you enlarge it. But vector, if you enlarge it, it stays just as sharp. So it's great for redness screens. And you can use it in line. You can insert it in line as HTML code. Or you can insert it as a regular image with .svg file extension. So it's great for logos and icons. If you want to know how large your image is, if you open it on your computer where it's located, you right-click on it and you select either properties or info. And then it tells you the image size. And this image was taken with iPhone 6 camera. So you can see it's 1.7 megabytes in size and it's over 3,000 pixels wide. And new phones have even better cameras so the image will be even bigger. So you should optimize it first. Well, first you have to scale and resize it before you send it to the web. So you can do it in Photoshop. The original is, for example, 3,200 pixels wide. You have to set the physical width to whatever you need on your website. So it depends if you have a WordPress theme for a blog section, images only display, for example, up to 800 pixels wide. So make the width 800 pixels, don't send a wider image because the browser will have to resize it for your users and then the file size will be bigger. So if you want to automate the process, there's a WordPress plugin called Insanity. If you have users uploading large images to your website, when you install that plugin, you could set max width and then the height will be adjusted accordingly. So every time somebody uploads an image, it will be cut to whatever width you set. So I also wanted to mention about JPEGs. When you save JPEGs in Photoshop, for example, you use save for web feature because it gives you the smallest file size. And when you save a JPEG image, it gives you two choices, baseline or progressive. This is an example of a baseline JPEG. You could see how it would load on the screen. It comes up like you see white space until the rest of the image loads. Progressive JPEG, can you see how it gradually comes into focus, it's blurry at the beginning and then it gets sharp. So this shows user the page loading faster perception that the page is loading faster because they see something happening on the screen instead of staring at a blank screen. It's really helpful if you have large images on your homepage, like Tor Hero image and the user sees something happening on the screen instead of staring at a blank screen. I see a lot of Instagram, if you go to, like on the slow Wi-Fi network, you see blurry images showing up instead of just staring at a blank screen. So the next thing you should do with your images is compress and optimize them. And there are two types of compression, glossy and lossless. So what compression does, it removes image metadata such as how large the image is, when it was created, image resolution, like all those details, they take up space in your image and you don't need to send it to the web, it just makes the file size bigger. So the difference between two types of compression is lossless, as the name implies, you lose less. So instead of removing pixels, it just compresses them. So if you have a photography site and you need to preserve those finer details, you might wanna use lossless compression, but for everything else I recommend using glossy because you get the most file saving, you save the most on your size. And there are a lot of tools to compress images out there. So use the one that works best for you, these are the ones that I like. The top two are web interface, tinypng.com with Kraken. And the bottom two are WordPress plugins that will automate the process. So the web interface is, you basically go to that website and there's a window where you drag and drop your images to and it's good for JPEG and PNGs and they'll be compressed and then it will show you, you save 50% of the image size or 40 and then you can download them from there to your computer and upload it to your site. If you have a WordPress plugin, it will automate the process so the images will be compressed automatically when somebody uploads them to the site. So here's a screenshot of a tiny PNG, you see there's a little window, it says drop your PNG or JPEG files here, it makes it really easy to just grab the images and they'll be compressed and you can download the optimized images from there. And this is EWW image optimizer plugin. So if you install the plugin, every time somebody uploads an image, it might take a few extra seconds because it will be optimized at the same time. And also, if you already have a lot of existing images on your site that haven't been optimized and you install the plugin, you can go to your media library and there'll be an option to optimize each image one by one or you can just bulk optimize them at once. Here's an example of a photo I got from unsplash.com. It gives you free photos, high resolution. So here's original one is on the left and the optimized one is on the right. See, it's hard to tell the difference in quality. The original one was 5,000 pixels wide and it was four megabytes in size. So it was a high resolution image, probably taken with a nice digital camera. So first I opened it in Photoshop and I resized it to 1,600 pixels and I used Stateful Web as a JPEG and it became 330 kilobytes. And then I used tinypng.com to compress it. So it saved 40% more of the image size and it became 200 kilobytes. So here's again, the original one is four megabytes and optimized one compressed is 200 kilobytes. Remember when you did Stateful Web, what quality rank you set it at, was it 60? Yeah, I usually use 16 for JPEGs and then progressive. Yeah, and you said Photoshop cannot do this last step? Yeah, it doesn't remove metadata when you save the web. So it still saved 40% more of the image size when I compressed it. So it's really helpful to do that. And there are different tools to test how fast your page loads. So they all tell you, they give you a letter grade. They tell you things you can do to improve your page loading time. Here's a screenshot of gtmetrics.com. It gives you suggestions on the bottom what you can do to improve. It gives you total page load time, total page size. And webpagetest.org is my favorite tool. It gives you a lot of details. It gives you a letter grade for image compression. It also points out if you're using progressive JPEGs on your page. And it gives you a really nice waterfall chart. It's kind of like an x-ray of how to page loads. You can see all the bottlenecks, what loads and what order. And where the red arrow is, if you click on that film strip view, you can see how your page loads for your user at every interval of time. So you can see the actual user experience here. And you can test it from different mobile devices, from different network speeds. So you can see what shows up on the screen at every interval of time. Here's the link to the slides again. You can tweet me, email me, ask me questions. Thank you.