 I'm going to introduce myself. My name is Heather Neff. I own and operate a company named Neff Creative here in Asheville. I'm a graphic designer and a Squarespace web developer. I've been in business for 19 years working on e-commerce. So my background is especially in user experience design and user interface design. So we're going to start off with the basics of graphics. A lot of you guys are going to roll your eyes at this, but this is kind of a graphic of how to show vector versus pixels. Vector graphics are usually designed in Adobe Illustrator, which is a mathematical-based program that will create lines and shapes based on calculations that can be scaled indefinitely and have no resolution. Whereas pixels, you guys are probably all familiar with, are resolution-based and are called raster graphics. So jumping into the image file types, all of you are going to be very familiar with what a JPEG is. They are universally accepted across every platform. GIFs or GIFs are great for animation and very small colored images that you're creating. PNGs are great for transparencies. They're actually pretty much the only thing you can use when you have a transparent background. Note that transparent images and PNGs can actually be very large because they're lossless images, so when you export them, they stay very good in quality. PDF stands for Portable Document Format, which, as you guys know, you can upload to the internet and download and print. As a graphic designer, one of the things a lot of people don't know about PDFs is that they can be an actual editable illustrator file from Adobe Illustrator. So if you're working with a graphic designer, it's good to know that if you get a PDF from them, it's probably containing editable vector graphics. TIFFs are usually in the CMYK format for print. They are the best quality for when you're sending images to print that you want to use. I don't get into too much about the differences between RGB and CMYK, but real quick, RGB stands for Red, Green, Blue, which is the screen resolution color schemes. CMYK stands for Cyan, Yellow, Magenta, and Black, which are the cartridges that you'd get on a printer at your home printer. And that's how images are converted for print is to put into that image mode. Now, there's something that you guys probably don't know about, which is called WebP images, which is new from Google. They're working on their own image format right now. The way that WebP images are programmed is they actually take your JPEGs and your PNGs, and they convert them into WebP images by compressing them by about 30% for speed. So Google is actually working on their own system right now. And there is a WordPress plugin that you can put into your sites that will then convert all of your JPEGs and PNGs into WebP images. But you have to know that WebP images are not supported by every browser, of course Chrome, but not everyone. So then you have to program and fall back images. So keep your eye on that particular type of format that's coming as they want to speed up the web. And of course, scalable vector graphics. So I talk a lot about SVGs as I'm kind of a fan of them as vector graphics can be much, much smaller in file size than anything pixels. Pixels are always photographs. So you can't actually make an SVG out of a photograph or pixel-based image. You have to have vector artwork to create a true SVG. These can be perfect for logos or icons within a website. So as you're working with web developers and want to worry about site speed, you definitely want to consider changing anything that's a logo or an icon into an SVG file. So let me go back real quick. So SVG code can be exported from Illustrator. And I want to show you this animation that's happening is something that when you export SVGs from Illustrator, you can actually go ahead and animate it because it's actually XML code as well. And so this is actually a gif of some SVG code being animated, but it kind of gives you the idea that there's a program called svgader.com that will allow you to animate all your SVG files. So I want to explain retina graphics as well because it's kind of tricky. And this has been something as a graphic designer that's driven me a little nuts over the last few years. Basically what it means is that the web does not care what resolution images are. It cares how big they are. So when you're exporting an image from Photoshop and you have a standard size and it's 72 res and it's programmed at a certain size, it's going to be what's considered low res. If you double that image and then program it to be 50%, you're restraining the height and the width of it to be smaller, then it becomes higher resolution. If you have an image that is then basically in a 100% table that can flow back and forth that can depend on what screen it's being looked at. It's either going to be high resolution or it's going to be low resolution depending on what screen and that's called a fluid resolution. So working a lot with Facebook ads and Instagram ads and Instagram and so forth, people should know that when you're uploading the images into these social media platforms, the images are then highly compressed and optimized by those programs. Also when you're dealing with images, you really don't want to put text on top of images. When you put text on top of image, they're first not search engine friendly and they're not screen reader friendly. So anybody who's blind or deaf when they're using a screen reader, if you have text embedded into an image that will not be ADA compliant for that. When you're also dealing with images on a mobile device, you want to make sure that you're using really clear and simple fonts that are easy to read because a lot of times people will take a graphic and they'll put a bunch of text on it and then they don't realize that when they shrink it down into the mobile device, the text becomes almost apparel impossible to read. So I highly advise checking where you're putting text on images and if you can avoid it, avoid it if you can't because you're doing something like an Instagram ad and they get really, really plain and simple and definitely check it on the mobile device before you make sure it goes out into the world. So because this talk is about SEO as well, so we're gonna talk a little bit about user experience design. Tomorrow I'm giving a talk on user experience design as well and one of the things that's really important is load time because the number one thing that Google is actually doing right now is indexing your mobile site and how fast that mobile site loads is partly the most important factor in how you're being categorized and ranked in Google these days. So load time affects everything about that and Google will also notice if your load time is too high, it will start penalizing you and you'll start coming up so high in the rankings. You also wanna make sure that when you're doing basic SEO work that you're doing keyword research. You guys should be familiar with doing some of that. If you don't, basically use a Google keyword research tool there's plenty of other tools out there to find what your keywords are. What you wanna do is take that list and create a document that would have all of the top keywords for your website. So if you're a WordPress designer and you were trying to rank for WordPress designer, I use this example as what you would wanna name your JPEGs, but you also wanna realize that when you're designing a website page that has a bunch of different graphics in it and you just basically keyword stuff with WordPress designer.jpg for every single image, Google actually understands that what you're trying to do is kinda SEO for that one particular word and you're not probably serving up the exact same image. So what you wanna do is carefully select your keywords and rename every single JPEG or PNG differently but with SEO in mind so that Google understands that you are taking the time to SEO your JPEGs and your PNGs with the intention of making sure that they are different images. So the next step is to take that same SEO keywords. When you want to be ADA compliant, you have to give alt text to all of your images. This is a crucial point here that Google is actually starting to really worry about how ADA compliant your site is and they'll give you a negative score, a positive score on if you're ADA compliant with your images. So every single image in your website has to have an alt tag. An alt tag is in the backend which you can hide and not display on your website or it's something that you can actually have as a caption underneath the image and it has to be coded correctly as the alt tag. And in the alt tag you have an opportunity to then use those keywords again to basically help your SEO but at the same time you also want to make sure that you're being ADA compliant which means you're describing what actually is inside that image. So if it's a picture of a dog but you want to SEO about whatever your company is you have to gently massage your SEO and the ADA compliance together. So you want to make sure that that's a really important factor that you do for every single image in your website. There's actually software out there for ADA compliance that you can run and it will tell you if you're missing your alt tags because a lot of us get busy, we start designing stuff and all of a sudden we forgot the alt tag. So this little thing or you go back and oh yeah I put that image five years ago when it's called untitled.jpg and you're like oh I should probably go back and change all these things. So put it on your to-do list to go check the image names of every single graphic in your website. Check and see if you have alt tags and see if they're SEOed because that can really help your site improve a lot for both ADA and compliance for SEO. So once you've exported images through Photoshop you can also run through compressor.io or tinypng.com. There's also WordPress plugin for compressing images that you can add to your website and some content managers systems when you upload your image will then create various sizes for images as well. So I work on Squarespace, what they do is I upload one image and they create seven and they have programs that will then deliver which one is appropriate for which device at that time. So the average time it takes to load a mobile site is 22 seconds yet the 53% of visits are abandoned if a mobile site takes longer than three seconds to load and that's a big problem. So we're gonna talk about how to test your speed. This is a list of URLs where you can basically just go there and punch in your URL. What will happen is these sites will basically analyze your website. It will come back with how faster site is. It will give you a whole list of things that are wrong with it and how to fix it. So it'll give you a cascading thing about your JavaScript and your images and how you can press them and there's all kinds of tips and helps to do this. My favorite is thejtmetrics.com that seems to be the most accurate. I want you guys to know that every single speed test is different and you can also change the location. So you can say I wanna know how fast my site speed is from where I am from New York City or Canada or France because that load time is going to be different. You can also test the top link for Think with Google is actually a mobile site test. Just to let you know too mobile sites with Google always tell you that you're crazy slow. They always, it's a matter of what site it is. They seem to always make you sound like you're the worst developer ever and that it's horrible. So just take that with a grain of salt. Google tends to make you feel bad about your site speed. And then also one really important thing too is because you're trying to speed up your site because it's the most crucial thing you can do for your website right now is that you wanna benchmark your tests by taking screenshots of any of these speed tests that you happen to be doing so that when you change something on the web you can go back and see how you did. So you can also lazy load images. You've probably seen this before and especially in e-commerce sites where there's a ton of images that are being loaded when you go to a web page and you see these gray boxes that basically say like image coming soon. And as soon as you start scrolling down the images flip over into images and that's basically a way for you to code images that are not needed yet. So as a person scrolls down they are then loaded as needed but if they don't scroll down this page loads a lot faster. So this is just gonna be really quick exporting ads from Photoshop CC. If anyone wants really good detailed information you can come see me and talk to me about graphics because I love talking about Photoshop and I've been doing it since basically 1999. But the Save As has a function at the on the top left you can see a little teeny tiny plus button and you can add two X, three X images as you're exporting right straight from Photoshop. One of the key things you wanna do to make a smaller file size is actually crop it and make it pretty much the size that it wants to be but eliminate extra information off an image if you can because that can actually if you could literally cut off all the pixels you're not exporting it helps you save kilobytes. At the top right side you can see where the quality is for an image. Note that the preview is actually showing the image of how it looks, you have a really good idea of how the quality is actually gonna look so you can determine if it needs to be at 100% because you just really need to look at its best or if you can drop the quality down for speed. I highly recommend working on trying different image sizes for what you need and then playing with the quality to get what you want but you actually don't need too much of quality. 30 to 40% actually works quite well for a lot of different things. You can also just scale an image in Photoshop and that will do the same thing or you can actually type in the width and height and it will be automatically connected. Now note this original image that I'm working with was a high res image. If you just do save as in Photoshop and you're in the screen, the original image is not actually changed in size or manipulated in any way. You're doing all of this in the exportation of a new graphic. Also there's a choice here on the bottom right to include the copyright and contact information which I highly suggest you just check that off. And also I highly suggest converting it to SRGB which is now the universal screen format for color to make it most accurate. This is exporting an SVG code from Illustrator and as you're walking through the last screen and it pops up to save the graphic, you can see here at the bottom there's an actual little button that says SVG code. If you click on that, it pops up in a text box which has some XML code. This XML code also has CSS in it and as you take this code and you can put a code block into your website, it will actually display the graphic. So this is actually a logo being displayed on the right here. Now kind of just note that when you do the SVGs, it's not good for something as complicated as an infographic. So if you have designed, when you work with a graphic designer and they're in Illustrator and they design something that has a bunch of different elements like an infographic, you try to export and you're like, I'm gonna do SVG codes, they're so super cool. And you take this SVG code and you put it in the website, it could actually be 10 times higher in file size than a PNG because of the fact that this XML code is actually trying to render the SVG and tell the browser what it looks like. So you really wanna keep your SVG codes to really basic simple logos or icons. And that's the only thing I would kind of tell you to do if you did wanna try this code stuff out. It is pretty cool when you see that you're not actually using an image file, you're using code to display a logo. First I was like, that's some miracle. It's magic, I don't know how that happens. But as a graphics person, it was kind of cool. But I also noticed that when I put two or three of these little XML codes into the website, all of a sudden the CSS started clashing and they started looking bad. And I was like, what is going on here? So you have to go back in and start giving them individual ID tags. And then they're just finicky. So be careful in this here. I don't actually recommend if you're gonna do something quick to throw these on the internet. Play with them, see what you think. I'm really looking forward to the SVG talk here later today in this room to find out more about what he has to say. But one of the things you can do is simple logos and icons in SVG code, which is kind of really cool. And that's my time. So, it's at 1.45. I'm gonna have a lightning talk at is. So I know I was gonna say, can I take five minutes of questions or not? I don't know, because lightning talks are really lightning. So, got a question? Yeah, I'm actually a huge fan of the export for web legacy because I'm a huge fan of the export for web legacy. I used to use it all the time. But when I discovered that you can not actually have to go to image, image size first and then do export for web because you can't change the image size in the export for legacy. Check this, the export as out because you can actually not even resize your, you have to skip that step of resizing your images completely. And it doesn't actually affect the original image. So they advanced it quite some. So you just go in and... Yes, yes. And then, actually, one of the screens you can, yeah, so there's also, I don't know if I can get back to that screen, but on the top left here, you can see where I've got it down to under 50 kilobytes here that shows you where the kilobytes are. And that's a really important thing to say it again. You upload the image and you just go export as. Yeah, so this is in Photoshop CC. This is the export as screen. And again, you want to keep working on your kilobytes. The number one thing that will kill your site speed is image sizes. So make sure that you get them as close as you can to 50 kilobytes and under. And SVG files, by the way, can be as low as five kilobytes. They're actually tiny, tiny. That's a very good question. And a lot of people come to me and ask that kind of question. Like, I use Canva. How do I do that? And I go, I don't know. I use Photoshop CC because I'm a professional designer. I don't know how to do that. So there is, I know that there's a lot of screen resolutions where I'm sure if you upload it, if you're not worried about it, you can upload stuff into Facebook and that will optimize some stuff. But it used to be that you had a low res screen that you could just screenshot something and it would be kind of a low res version of it. Then I got this retina screen and I started screenshot things and I was like, I had screenshots, three megabytes. Like, how did that happen? So you have to be really careful about that. I know a lot of people are moving from the cloud subscription of Photoshop to Affinity. Do you know anything about Affinity? Does it have, because I was thinking about buying it. It's only 40 bucks and it's supposed to be comparable to Photoshop, do you know if it has a lot of these features? I don't. I haven't actually used it. It does. If you think about Affinity Designer, there's Affinity Photo that kind of replaces Photoshop. Affinity Designer, which is kind of like fireworks used to be, which does some raster and some vector together. And yeah, if you want to dump the Adobe remachine, you can, yeah, it does everything and it opens all Photoshop files and you can save as Photoshop. Well, I knew that, but I know if someone who actually used it was comparable. Yeah, I've never tried it before because I've just been with Photoshop for 20 years, but I do know that you can get Photoshop now just as a single program for $9.99 a month. So that's a nice alternative. They don't have to, they used to make it the package that you had to get it for, I believe, $20, $29 or something. Now it's only $9.99 a month. So they're really making it friendly enough that people can at least export your images to the foreweb and really control that kilobytes. I can't emphasize that enough. That's probably the number one thing that people don't do is export their images in a proper way to get the kilobytes down. Yes? What is the scale right there? Yeah, so the scale function, actually, if you just leave like the normal image, so when you open up high-res images, like 6,000 pixels wide, if you hit the scale, you can basically use that as a way to drop it to 10% of what it was and it will automatically bring it down. So it will change all the settings if you take the scale and guess. Is there a reason you wouldn't want your canvas size and image size to be the same? The canvas size and image size are the same. It's kind of like, they're kind of linked. It's kind of hard to explain. The canvas size is actually, well, Photoshop treats them in a different way, but they're the same thing, technically.