 Since this is a lightning talk, we only have 15 minutes, so if we don't have time for questions, I'll be happy to answer them after the presentation. So again, we're talking about images. And you can find the link to the slides at this link, and there'll be a link at the end of the slides as well. So again, my name is Irene Lumenfeld. I'm a web consultant. I've been building things on the web for over 15 years. And I have my own agency right now where I build websites for clients, I provide monthly care, as well as training. So people don't like to wait. Think about how many seconds do you usually wait for a page to load before you give up? Web speed will affect your user experience. It's such a nice feeling when you go to a website and it loads fast and you find everything you need right away. So it will affect your SEO, your bounce rate, and your conversion. 53% of visits to mobile sites are being up to three seconds. So up to three seconds, half of the people will leave if the site has unloaded and they won't come back. Etsy, popular shopping site, they did an experiment on their mobile site. They added 160 kilobytes of empty images to their mobile site. 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 it from mobile devices. And we have so many devices out on the web right now and different network speed. So it's really important to include everybody and provide the best user experience. This chart shows a breakdown of an average page on the web right now and it's almost four megabytes in size. So it's gradually increased over the years, mainly because of image sizes and you could see in blue, half of the page is taking up by images and a little more than a quarter is video and then the rest is fonts, style sheets and scripts. So optimizing images is really important when it comes to your page load speed. So we're gonna talk about popular image formats used on the web right now, which is JPEG, PNG, GIF and SVG. And JPEG is the most popular one. It's used for photos with many colors, kind of like this. And it's a lossy format. GIF used to be more popular in the past, we used it for animations. It's really big in size, do not use it. If you have an image that requires transparency, just use a PNG instead. So PNG is great for logos, kind of like this. Images with few colors and it supports transparency. So if you have a logo and you need to put it on a different color background, save it as a PNG. And there's two types of PNG, PNG8 and PNG24. The difference between the two PNG24 supports more colors, but it's bigger in size. So if you have an image that has a lot of colors and does not require transparency, save it as a JPEG, not a PNG, because the file size will be smaller. SVG is Scalable Vector Graphic. It's very small in size. And it's great for logos and icons. It supports transparency. So here's the difference between raster and vector. You could see the black letter S is raster image, which is JPEG, PNG and GIF. Have you ever tried to enlarge an image and it gets like blurry or pixelated because it loses quality? SVG stays just as sharp, so if you enlarge it, it's great for retina displays and it can be used in line in HTML code or you can insert it as an image with the .svg file extension. So how do you know how large your image is? You open it on your computer where it's located, you right click and you could see the image size. So this image was taken with iPhone 6 camera and it's 1.7 megabytes in size and it's over 3,000 pixels wide. So it's way too big for the web. So the first thing you should do is change the physical dimensions of the image, change the image size. So you can do it in Photoshop. Like original image was 3,200 pixels and then you could scale it to 800, let's say. It depends on your WordPress theme. So if you're getting an image ready for a blog post and your theme will display the blog post image only up to 800 pixels, then do not send the larger image because the browser will have to resize it for your users and the file size will be bigger. So if you want to automate the process, if you have users that upload large images to your site, you can install Insanity WordPress plugin and then when you install the plugin you could set max width and then the height will be adjusted accordingly. So every time somebody uploads an image it will be sized to whatever max width that you set. Also I wanted to mention when you save images in Photoshop, JPEGs, you use save for web feature so because it gives you smaller size. So when you save a JPEG you get a choice of either save it as a baseline or progressive. Here's an example of a baseline JPEG image. You could see how it loads on the screen. You see a blank space until the rest of the image loads. Here's the progressive. I don't know if you could see on the left it's more blurry and then it gradually comes more into focus. So it's really nice because it gives you a user's perception that the site is loading faster because they see something on their screen. It's especially helpful if you have a large image on your homepage, like a hero image and the user sees something happening instead of just staring at a blank screen and you see it commonly used on Instagram when you go to load Instagram on a slow wifi network and you see blurry images show up. So after you scale the physical size of the image you need to compress and optimize it and there are two types of compression, lossy and lossless. So what compression does, it removes image metadata such as how large the image is when it was created, image resolution, all those details they take up space and you don't need to send it to the web. So the difference between two types of compression lossless as the name implies you lose less. So instead of removing pixels it just compresses them. It's good if you have a photography website and you need to preserve those finer details then you use lossless. Otherwise I recommend using lossy because it gives you the most file size savings. So to optimize, there are different tools out there use the one that works best for you. I like these ones, the top two are web interface and if you go to that website basically can drag and drop the images from your computer, they'll be optimized and it will tell you you save 40% of the image size or 50 how much you save. You can download them from there to your computer and then upload it to your site. If you want to automate the process you can install one of the bottom two plugins. So if you install one of the two plugins every time somebody uploads an image it will be optimized, it might take a few more seconds to upload to the website because it will be optimized at the same time. And if you have a lot of existing images on your site that haven't been optimized, if you install one of the plugins you can go to your media library and there'll be an option to optimize each image one by one or you can optimize them all at once. So here's an example of an image I downloaded from unsplash.com popular photo free photo site. The original one is on the left and the optimized one is on the right. It's hard to tell the difference in quality. So the original one was 5,000 pixels wide and it was about four megabytes in size. So it's a really big image probably taken with a nice digital camera. So what I did, I resized it in Photoshop to 1,600 pixels wide and I saved for web as a JPEG and it became 338 kilobytes and then I used Tiny PNG to further optimize it and it lost 40% more of its size and it became 207 kilobytes. So here's again the difference between the two, four megabytes and 200 kilobytes and you can test your website speed with any of these tools. They basically tell you what things you can do to improve your page loading time. They give you a letter grade and my favorite one is webpagetest.org. It gives you a letter grade for image compression. It also points out if you use progressive JPEGs, you get a really nice waterfall chart where you could see if there are any bottlenecks when you page loads and where the red arrow is, if you click on that film strip view, you could see the actual user experience, what the user sees at every interval of time when they load your site. So you could test it from different mobile devices, from different network speeds and you could see what the user sees when they load your page. Here again is the link to the slides and you can tweet me, email me, ask me questions. Thank you. Do we have time? Oh, we have a few minutes for questions, if anybody has any questions. Yeah, it just depends. I mean, it depends on, I always try to do it to the lowest size that I can. I mean, if it's 50K, I think it's average. If it's 300K, it's pretty big. So it also depends on how many images you have on the same page because remember average page is over four megabytes, it's almost four megabytes in size. So there's also videos and fonts and for here image, it just, it depends on what your target audience, what screens they use. If most of your target audience comes from mobile devices, then you don't wanna put a really big image because it's gonna affect them more. So if they come on high retina displays, you might wanna put a large, you have to kind of see what works better for your audience. Yeah, so. Yeah, I mean, you just wanna, it's a trade off between like presentation, if you wanna have a slide or you wanna give a really fast website to your users, it just depends, you know. Yeah, I don't use GIFs because they're really big in size. I would use PNGs or JPEGs mostly right now. So it depends if you're trying, if it's a photo with many colors, then I use JPEG. If it's an icon or a logo or something that requires transparency, I would either use a PNG or SVG. Yeah, SVG is great because it's vector, so it displays great on retina screens and it's very small in size. I think it's more popular now that it was a couple years ago. They even have SVG animation now, you can animate them. I mean, people use both, PNGs and SVGs. I think with WordPress, you need a special plugin to upload SVG through media library still, but if you insert SVG in your style sheet, you can just code it as an SVG. So, yeah, as far as I know, SVG supported in most browsers right now. There's a new type of image format, WebP, that I think Google developed, and it's not supported in some browsers, but it's supposed to provide transparency and as well as even be smaller than JPEG and GIFs and PNGs. So, okay, one minute, yes. To resize all the images. Yeah, I would back it up first, but there's a plugin I mentioned, Compress JPEG and PNG. If you install it, it resizes and compresses them as well. It's free up to a certain number of images and then it's premium up to that. There's also EWW image optimizer plugin that is free and you can use it to optimize all the images in bulk. Any more questions? No, thank you.