 Yeah, so this morning we're going to talk about images and your website Very very very important and probably one of my biggest pet peeves. That's why I chose to talk on this topic So titled it hot your images are making your website sad So how many times have you gone to a website and just waited and waited and waited for the site to load? You know why you're waiting on the content, you know to load as well. You got images just choppy, you know waiting, you know That's no fun. Nobody wants to sit there and wait on a website to load like that, especially in 2019 Maybe that would have worked when we still had 56k But not nowadays so There's a lot of different, you know aspects when it comes to images and your website so, you know a few things we're going to talk about our The impact of images, you know user experience why we even put them on the website to begin with, you know, you hear a lot of people say Don't use hero images, you know Get straight to the content this and that I agree with a lot of that, but I also think websites should be beautiful I am an artist and that regard not a good artist. I don't think but uh Yeah, so anyways, so we're going to go over types of images um That you might use on your website so You may have heard of the typical jpeg the png file the gif file Those are the standard files you're going to use primarily on your website, which you know a lot of this may be common knowledge to a lot of you guys But we're going to go over, you know the different types and where to use them how to use them And then we're going to go over file sizes The three different file types have their varying Characteristics in terms of file sizes So there's a you know, uh, there's a difference between dpi dimensions Lots of things that you need to keep in mind when you're uploading these files these images to your website So again, yeah, where to use the different types of images. We're going to go over how to save the images That's important. Many people get hung up on You know, I had it took a photo of my iPhone. How would I get it on the website? Or I uploaded it to my website and now it's just huge That sort of stuff. So we'll go over that And then we'll go over how to style your style your photos how to take them for the website The creative side of it the fun part really in my opinion Not all of us are photographers. I'm not but you know With today's technology most of your iPhones your smartphones can take a photo quality enough with the natural lighting To make your website pop to do the job So where it all began for me 21 years ago. I started with geo cities angel fire that may ring a bell to some of you guys Some of you may be way too young to even know what that means So yeah back in the day. It was all just pure html That sort of stuff and my first website was for the taco bell dog and spice girls The whole site was you know, just raw html and what I learned and you know Why even bring this up is what I learned back then, you know 21 years ago A lot of the techniques I learned then, you know, still apply today You still don't want the websites to take forever to load. You still want them to you know be captivating You still want, you know, great imagery You still save the images a lot, you know in the same way. At least I do I'm I'm going to show you my method and Yeah, so I think it works. So what we're going to go over also is the difference between aesthetics and functionality Again a second ago. I brought up dpi That's kind of the only thing you hear about when people talk about images. You never really hear About kilobytes. You never really hear about pixel dimensions. Unfortunately and those are very uh pertinent Uh details when it comes to web development and design on what we do Um, unfortunately though again dpi is like the heavy heavy hitter in the image realm Um, what is dpi? You probably know that's per inch. Um You know, you'll probably see a lot of people will say 300 dpi for print 72 dpi for web those rules more or less apply Um, but they are less important than the overall file size and the dimensions of your image So, yeah, so what's ideal for web, uh, and what's ideal for different parts of your website, you know It really depends on your intended usage Um You know if you have a website say if you have a small website Uh, just a simple, you know four page about us website kind of thing Uh, you can sometimes get away with a little bit more file size However, if you're talking like a huge blue commerce website with hundreds of products You really don't want you want to maximize, you know your server. You don't minimize your server load You don't want your file sizes to be excessive. You want to keep them down to a minimum So again, it really depends on your intended usage If you have two two images on your homepage, you can get away with a little bit more Um, all things that you want to pay mind to while you're developing the site And sometimes we're not always in control of the images that we get So sometimes you have to give creative direction to whomever is providing those images Um, or in some cases we even have to do some manipulation Um, photoshopping or just, you know compression that sort of thing um So just to put it in kind of, you know every day terms Maybe it's every day terms. It might be archaic now again, but downloading mp3's nobody really does that anymore, but Um, if you ever did download an mp3 or you download something off of itunes, you know the file size that you're getting Uh, if you were to get an mp3 you're getting about a five megabyte file give or take For roughly a three three and a half minute song Um, itunes is going to be a lossless file so it's going to be much larger 2019 it's a it's a different time, but anyways mp3's Um, so let's just backtrack say you have 10 slider images on your home page Each of those images are 500 kilobytes in size You're looking at roughly give or take a five megabyte just initial load right there on your home page Nobody wants that you don't want that your server doesn't want that your host doesn't want that um And it's just it's you know, it's bad practice Um, so to put that again into everyday terms You know if you have 10 slider images That's about the size of an mp3 file of a song and audio files are much larger than compressed images for your website It's a different world. You really don't want to be getting into that territory. Um in terms of file sizes on your website Uh, we talked about jpegs pngs and gifs Um you guys Raise of hands if you know the difference more or less between You know is a png or a gif which one is animated is a png raise your hand or is it gif? Right on Cool, so we don't really use gifs a whole lot more in websites. They kind of look bad Um, you see them a lot now on like social media That sort of thing as jokes, you know memes that sort of thing not taken seriously, but websites we do take seriously um So gifs we use them very sparingly and I think the only time I really ever tread into gif territory Is if my png file that i'm trying to use happens to just be way way too large So jpegs you have the ability to compress you have more freedom of you know, saying I wanted to to be Optimized for web, you know, you can control the actual percentage of you know The lossless quality of the image Png files you do not have that freedom. Uh, they just save in perfect great quality And the beauty of png files is that you can use them sparingly and you can use them in design aspects where there's like nice fades or nice overlays And if when designed, right They work. They work great And again gifs not use the whole lot anymore So About aesthetics, you know, again, I'm all about functionality and You know getting to the meat of the content. Of course, that's that's why we even have the website the website is there for a reason Nine times out of ten. It's not for unless you're a photographer. It's not for the photos However, you know, the photos are incredibly important billboards Everything is is you know photo These days, especially you'll notice a lot of websites now are just going to flat out full screens when you load them It's just a photo or even Not even on topic here, but videos now That's that's a whole another beast and we won't even touch on that But you're seeing a lot of videos as backgrounds even on my own portfolio site, you know But that again, you know Kind of the same applies the same techniques and concept, you know, keep the file sizes to a minimum compress for web, etc But yeah, so slider images For example, they need to be well thought out. You guys are familiar with the hero slider image. I'm assuming So you have, you know different different variations You're like I said, you have websites that load with no text just beautiful imagery That kind of just, you know that the down arrow that just says, you know scroll down for more information But it's really that image that's, you know, keeping the user, you know, there for a few seconds saying, wow I want to be here. I want to scroll down and see more So yeah, and then you have the option to add text on them You'll see some websites put a lot of text on their homepage right there on the first scroll You know, the idea is to not overwhelm your user You want them to get to your site Know what you're what they're seeing know what the site is about what they're there for You know within the first few seconds and never feel overwhelmed, you know If they're overwhelmed, they're going to click away. You're going to lose their their lead. You're going to lose You know the website business Yeah, and another thing is image focus The subject of the image is very important a lot of You know like a lot of slider images like for example, this is horizontal A lot of slider images they will just kind of Slap a photo in there and not pay attention to where the subject is and in the image And how that actually looks on the website. For example, if we're talking about a coffee website or a coffee shop We have a coffee mug and we have some text to the right We don't necessarily want the text to sit on top of the mug So we want to you know, take that photo For the website in mind, you know that keeping in mind that we're going to put text on top of it That sort of thing You also want to think about space for your nav bar You'll see some websites with big thick solid color nav bars I think we've moved into kind of a time where People do need to see the navigation they wanted they want the you know You want to know how to get to where they're going to on the site But they don't want that to take up 200 pixels of their homepage They're wanting you know what people want to see nowadays are beautiful images They want the nav bar to be there you need it there But you don't need that to obstruct your overall design unless it plays a role in the design, of course, but So again images that you take for your website you want to keep in mind that you're going to have a nav bar at the top Maybe a logo up there as well So for example, if you have like a photo of a tree in the background You know and your logo happens to be a little bit on the busy side It's not going to work with that tree back there and your logo on top. It just doesn't make for a a pretty website So, yeah, so hero and slider images so My recommendation and what you'll see a lot of recommendations of are about 1900 pixels wide Is your max and so this is your actual file dimension size Our image dimension size So about 1900 pixels wide Is going to be your Suggested width here. So for example, if someone has a you know A big old screen that if the website if you if you develop it properly Do responsive css 1900 pixels Scaled up a little bit larger is not going to really look you're not going to notice a difference in quality However, you know if you have a 700 pixel slider image scaled up to even just a you know a 23 inch monitor or You know go even bigger. You're going to really see the quality, you know, you're going to see the pixels You're going to see the the compression in the image So again 1900 pixels is my suggested width here for slider images Again 72 dpi is Is preferred, but that is less important Then the overall dimensions of file size Now we talked about the actual Kilobyte size So there's kind of three different sizes. We're talking about we're talking size, you know, we're talking Size in terms of the file and then we're talking Another size, sorry anyways Yeah, so basically 500 kilobytes is going to be the max that you want to to save this app And that's even like for your biggest and your most detailed photo Um, I would even suggest keeping it at 100 kilobytes or less if you can, you know Some photos you can get away with that Some photos that have more detail Are going to want to, you know, just have they're going to want to save more detail in the photos So the file size is going to naturally be a little bit larger But yeah, that is very important and so For example, if you take a photo on your phone and you want to use it on your website Uh, most phones are saving images at like anywhere between two and like 12 megabytes now Way too large for your website Um So we'll go over how to get that from one place to another here in a second Um, something else to keep in mind is, you know monitors websites We mostly see them from a wide perspective unless we're looking at websites on our phone Um In which case, you know, that that is where Development comes in play Responses CSS comes in play And you just scale your, you know, your viewport down appropriately But uh, we're going to we're primarily focused right now on the desktop version or the laptop version Absolutely Just to maintain your aspect ratio of the image, you know, of course you don't want to go crazy with like 2,500, 3,000 pixel tall image But if it were that tall then it would naturally be wider than 1,900 pixels Uh, you know 1,900 pixels I mean not uh, I'd say that back, you know, that's not true, but In most cases 1,900 pixels you're not going to have an image much taller than 1,200 pixels ish give or take Uh, if it's taken with a phone or if it's, you know, taken with a camera You know someone photoshopped an image, of course you can photoshop anything you want And I've seen websites utilize background images before You know 2,000 pixels wide and they they had a rather than using like a repeated pattern Or you know, I'm a transparent or using like a css or anything They just they straight up just use a photoshop image from top all the way down to the footer And we're talking, you know, 7,500, 10,000 pixels tall And a 25 megabyte image, you know It's it's You know it it it's done But yeah, so in terms of height, you know, you just want to maintain an aspect ratio of your image, of course Um, and in some cases, you know flatter images you can get away with You know cutting the top or the bottom or cropping your images accordingly that sort of thing Um Yeah, is that cleared up? Yeah, so that kind of covers slider images hero images So we also have content images, um, you know Of course you scroll down past the height of the hero image and then there's more to the website You've got the content. So that's what we're we're everyone's here for They're not really here to sit there and just stare at your your home page Let's backtrack actually too because I didn't cover something When when I say people aren't here to stare at your home page Uh brings up a great point on your hero and slider images Um some people will cram 10 images And no offense to anyone in here if you have a lot of slider images, um You know, but it's it's preferred or it's suggested to really keep that, you know It's down to a minimum, you know just enough to get your point across Um, I like to see three to five on sites I develop at the very very very most Um, it kills me when I when I have to do seven ten something like that because then you're starting to Have to compromise image quality for load time that sort of thing um Yeah, so, you know the number of slider images, uh Does play a key role as well And are you guys familiar with like revolution slider? um Any of the the big slider plugins or anything They typically will take care of like uh the scaling of the image for you So in most cases and and in most cases in wordpress in general, you know You just you upload the photo and it does the responsive or it does the scaling for you um But yeah, so again three to five in your slider. Yes, ma'am Right, so some sites will load at where the image is full width And you don't see any of the content below your initial load Um, they're taking they're they're telling the slider no matter what size your screen is Always take up the full width of of the viewport upon first load always show full screen image Um I love it I personally love it. Um, so long as you indicate You know depending on your your target audience and the website You know if your target audience is younger most of them understand to keep scrolling down Uh If you have an older target audience you sometimes need to indicate, you know scroll down for more You know that this is if you're utilizing the full screen load, you know Or the arrow down to indicate that there's more down below um But you also see some sites, you know that are almost full screen But there's still just like a little peek of the content down below They they are not utilizing any sort of uh Coding to say, you know, hey image take up the full screen They just have like a set, you know, probably You know take up the full width of the browser window But only make it say 900 pixels tall and in terms of a suggestion I have there Uh, most of my slider images I will do, you know, if it's a full screen website 1900 by anywhere between depending on the crop of the image What we're trying to focus the image on Uh, 1080 or like 1200 at the most, um And again, I do a lot of compression on my images to You know to make sure that the file sizes are small Um, basically again, we'll go over that in a moment um But yeah, basically, uh Yeah, the big full screen, you know full screen load what you what you brought up is popping up a lot now though um Yeah, and and in terms of the height for those images It doesn't really matter what height the image is because the coding is telling the image to take up the full width So, you know, so long as it's a good quality and it's the right height It's going to look good in there. Does that make sense? More or less Okay So, uh content images so again as you scroll past the hero image Or the first scroll of your website you've got content um This can get a little tricky because there's so many different ways to lay images out within your content I mean again, there is with with sliders as well, but we're just kind of touching Uh going over the basics there, but With content images, you're seeing a lot nowadays Of like overlapping images a lot of like Like odd spacings and I like it But yeah, it kind of makes things a little bit trickier in terms of How you approach, you know adding the image any of you guys use Like visual composer or divi or x or any of the theme builders Raise of hands Yeah So most of those kind of have like just, you know, you can kind of set the columns You know, of course, and it does the work for you What you want to pay attention to there and I may be speaking The stuff you already know, but you know, obviously the file size and the quality of the image Um Again, so you basically have left right or center, but again, some websites have Uh full the content and the imagery goes all the way out. So in that case you want to, you know, do you want your image to be Um 50 percent you want it to be 25 percent. Do you want it to be, you know, two thirds? Um all things to pay attention to while you're developing and designing your website Um also want to keep in mind the surrounding text around the image. Um It seems to be kind of like The last thing thought about is the text It's like, oh, we have this this image. We have dummy content in place dummy text in place And then you try to actually fill it with real content and then you find yourself short So you have an image over here on the left taking up 50 percent of your your viewport But then you only have two sentences on the right. So you have just this really clunky looking content area Um in my opinion and I think in most people's opinion that doesn't look good So you want to think that out while you're designing and picking out images for your site, you know, either Don't have the image there at all write more content That's a slippery slope. Um But there are ways to design around that for sure. Um And you'll see even, you know, we're talking Right now, you know, we've only discussed, you know, kind of images that Taken with kind of a camera, but there's all sorts of different types of images, you know, there's illustrations there are You know, just solid color bars, you know, which you wouldn't actually use an image file for I hope you would use, you know, css or something along those lines But yeah So there's a bunch of different ways that you can actually lay out your content and utilize the images Um Another thing you also see a lot of nowadays is, you know, an image as the background with text on top of it Again, it's smart to think about, you know, what image you're going to put in that background smooth Uh smooth details in the background, you know, again trees never really work as background images Uh rarely, I don't know a whole lot about trees But most of the ones that I'm given are just a whole bunch of leaves and branches all over the place. Um But yeah, so uh It sounds like a tree, right? But yeah, um smooth images work great in the background And again, um when you're slapping text on top of images you see it a lot now um People are also putting like a semi-transparent color on top of the image um A number of different ways you can go about that you can actually photoshop that into your image Or my preferred method is if you're using divi or x or a theme builder um Utilize the the uh element, you know, the row or your column Actually put your image in that background column and then you have, you know Another layer on top of it where you actually set a transparent color on top of that So that way when you pass the website off to the client, they can go in and put any image they want of trees Uh or whatever In that background image and not have to go into photoshop and Color it or put the overlay on does that make sense? um So yeah, there's a lot of things that you can do with css that kind of give the visual um aesthetic of an image um But they aren't actually image files. So that kind of brings up something else and we'll go over that here in a moment I think um It's later on So how to save images? Most of us are using photoshop to manipulate our photos um illustrator is going to be More of your creative print stuff not a lot of web Um, not in my world at least um of 15 years 20 years of this um And then in design is going to be more of like official print Uh people are doing, you know, some website stuff in there as well, but primarily You're going to do most of your quick dirty work in photoshop um So photoshop has a beautiful feature called save for web So any image that you have in photoshop you can save for web And I believe it's now actually a legacy feature. Uh, they have other methods other ways to do this But so long as it's a still a feature in photoshop I'm going to jump to it because it is the quickest and the most streamlined way to just get the job done um So yeah save us for web and um So when you're actually doing this you'll see in the top right You have a drop down where it says jpeg In that section you can select if you're saving a jpeg a gif file or a png file Whatever you want And then you actually have down just to the bottom right past You have the quality drop down So you can get as you can get away with qualities as low as 20 percent Sometimes and not even really see a difference, you know if you're using Let's jump back to putting images in the background of your site with a transparent color on top of it and then text on top of that um Those background images in there you can get away with like really really not seeing the quality down on those because people Aren't going to really be paying attention to those. They're really focused on the text on top of it It's got a color on top of it too So you can get away with making that a super small image size Which your website will love and so will the user who's viewing your website They just won't know it so Yeah So again You've got the save appropriate file type for usage. So we talked about the three different types Jpegs are going to be primarily used for your hero and slider images anything that doesn't have a transparency um, and again jpegs you can really you have a lot of control over the file size and uh We talked about the different file sizes and then down here. It'll always give you a preview. So it says 174 k down there That's a really great indicator. I mean that that tells you how big your file size is going to save at So again, I said 500 k At the top at the most And I'm saying at the most like you kind of just never even want to go there That's if the client's saying I have to have this picture on the website Yeah, so 500 k top And then you also have down over here So There are a number of different ways you can resize your photos You can just open them up real quick then hit file save as for web And then you can actually control your you can change the dimension size So if you have like a photo from your phone and it's 5000 pixels wide way too wide for your website Open that image up in photoshop Then just don't do anything to it and then just save us for web And then down here you can just change your file size. So, you know width set to say it's a slider image 1900 wide Um, and that's where you'll make those changes quick on the fly. So you don't have to actually know how to work photoshop Um, you just have to know how to open an image and save it And photoshop used to be at one point, you know super expensive But I feel like it's a kind of a necessary tool for what we do Um, and I think they it's like nine bucks a month now 20 a month now for Um a package with like light room Um There's almost no reason to not use photoshop now. I mean there are other options. They're free options Um, but they don't give you the robust functionality. So if you do want to expand and you do want to do more Um, then just simply opening and saving you have that with photoshop You have it with others, but photoshop is there's a reason it's It's where it's at and has been for my entire life So the photography is going to come with I think light room It depends on how in depth you're going to get with your photos, you know If you're just snapping them with your phone and you want to just upload them I wouldn't you don't need light room Anything you can do in light room you can do in photoshop in that regard But if you want to get really fancy with your photos and you're a professional photographer, you probably already have light room But no, I mean you don't need light room at all Just photoshop Yeah Any recommendations? Gosh, I think it's uh gimp is something uh, it's been like a photoshop contender for a long time Gimp, um, I'll be honest. I stopped messing with those so long ago. Um, I wouldn't know what What what they're what what's out there in terms of the photo stuff? Photoshop has just been my go-to tool for you know forever now, so You know there there are even you know mobile apps now I think you can download like a mobile photo you can download a mobile photoshop. I think it's free. It may be 10 dollars or 20, um Is that what it is? Yeah, so I mean you have apps on your phone too if you just never even want to touch a computer And you know you can log into your dashboards wordpress on your phones And we can do a lot of what we do from our phones. That's not the preferred way But it can be done if we're super busy and that's the kind of lifestyle we live Um, but yeah, um Many options. There are even like websites now, you know, if I think you could just google, you know Online photoshop or online free photoshop, and there's like literal just websites now that you know have an online Uh application that you can use without even downloading anything But again photoshop is Is the way to go Um, so styling and taking your photos Um So again, it's very important in my opinion to leave room, uh for your your images to be able to breathe mouse Yeah, so a lot of a lot of websites, you know, you'll see images cropped really close up Um And sometimes you'll just be browsing and navigating a website and it just doesn't feel good It just feels clunky. You just don't feel good visiting it. You don't know really where to find your content A lot of that has to do with just the focus and the the way the images were approached. Um You want to again let them breathe So for example, if you're using a slider image for the full width and you have a focus You know, of course, you can get creative if you have like a macro lens or you're doing something like that You know, there's there's the creative side of you know zooming in on your your focus elements But by and large you want to to have your focus elements and still have room to breathe on the outsides and the sides of your image Um And that goes for everything, you know, if you have like staff photos, for example You know It really it's no fun to just go to the about us page or the staff page and just see the people's faces like this You know, let the let the image breathe If you get the image from the photographer and you can you're able to crop it Um, you know, obviously you don't want their heads look like peanuts in the photos either But you want, you know, you want a nice crop. Um breathable images Make and carry a website Um You don't want to overshot or over use photoshop. I mean, I I say uh use photoshop And it's the best, but I really use it minimally. I use it really just as a tool to Uh more or less take, uh, you know, when I'm not designing a site I will take the design file from the designer And usually provided in illustrator or in design or photoshop Um, and I'll take, you know, and usually they'll give me a It's it's a much higher resolution file than I need. Um So I'll take the elements and the images that I need just copy new file save copy new file save So there's not a whole lot of actual photo manipulation if ever really When it comes to just simply developing and designing the sites So in terms of uh, yeah, so I was saying don't photoshop or don't over use the effects So for example, if you have like drop shadows in your image and you want a nice drop shadow to be, you know On the content of your you know the content section of your about us page You don't have to photoshop that drop shadow You can but say for example, you have like a pattern background in your drop shadow Your options are to save that image with the drop shadow as either a png file or a gift because you don't want the drop shadow to overlay your Pattern background and look weird. Does that make sense? So if you save that image as a jpeg, it's going to want to fill the Gradient of the drop shadow in with white or a solid color because jpegs don't show transparencies so If you have a website with a pattern background A drop shadow image on top of it my suggested method will be to to use photoshop as less as as least as possible So that drop shadow comes into play with css. You don't photoshop that you don't save a png. You don't save a gift You save a super low Low file size jpeg file and then you photo or you with css add that drop shadow in So in the design, you know a lot of times we'll get um From designers files, you know a lot of things back to you know the color transparency It's suggested to not photoshop that transparency on there because then six months down the road when you want to change the photo You have to know exactly the color of that transparency. You have to know exactly the opacity of it To recreate that image So if you you know use a lot if you utilize css for some of your effects or some of the you know Aesthetic styling then you'll you know, you'll still give the visual Aesthetic of an image of the design that the designer provided to you But it will again increase load times or decrease load times That sort of thing rollovers for example Rollers rollovers for example are a great usage or a great Chance to use css over two images Even as as you know reason is like five six years ago, you'll see people doing rollovers Um says, you know the about us is white text you roll over it Uh has you know, it turns green. Um, just a simple really basic example They're using two photos for that for that particular Effect there, you know, obviously you want to utilize css in every case scenario That you can for those particular effects and that type of stuff as well um A lot of things a lot of websites you'll see now like The three blocks on the home page, you know, it's got the slider image the three blocks You know the call to actions you hover over one of those blocks and the image will kind of It'll go turn black and white or you know, it is black and white Then when you hover over it it brings it comes to life the color comes back You don't want to use two images there. You don't want to save a black and white image and a color image You want to just tell with css Hey on mouse enter here on hover Just De-saturate the photo turn it black and white that sort of thing. Does that make sense? so Don't overuse photoshop. Don't use too many images when you can get away with it css over images. Um, That sort of stuff for effects, etc Um open space for text. We already went over that um Overlays, yeah, and we went over the overlays with semi-transparent colors Um, yeah So i'll be honest, uh, that kind of brings us towards the end here. Um I'll talk fast. I apologize, um, but we'll go over here in a few minutes for some questions Um, but yeah, so I just wanted to bring up a website Here and just have you guys let me know on this site here You know point out Is uh where the png file is Does anything stand out here as being a particular png file? What's the png? What's the jpeg? I'm sorry The slider images are jpegs But the logo however is a png file. You'll see that it has kind of You know a semi-transparent, uh It's got kind of an arch in the middle and that sort of thing So we use instead of you know saving a gif here A gif would have been a little bit lesser quality of an image This logo is a png file and so that brings up brings me to another topic here How big should you make your logo for your website? Uh, do you want it to be a thousand pixels wide? Do you want it to be two thousand pixels wide? You know um To answer that most of your themes will resize them But again you start at the source, you know, you want your source to be Uh The appropriate size before it gets to your website Um so Most websites now, um, again most themes now are doing the you know the retina conversion as well for you um But anywhere between Five to eight hundred pixels wide is going to be a safe bet for your to get a good sharp quality of your logo um Your logo may have a transparency. So if it does you want to save a png file So again, if it's a png file, you might need to lessen the dimension size Because you might be getting you know, your actual kilobytes and Your actual other size might be you know getting closer to 500 that sort of thing um, but so if you you know some themes and some websites um If your logo is too wide It will you know, it will with css Responsively resize that logo for you, but you may notice it looks a little bit fuzzy and that's just due to the rendering of most of the time Usually that came from the image being too small and being scaled up But a lot of times now it's also coming from the image being too large way too large and being scaled to scaled down and it's just the The theme developers and the browser just it's not doing a perfect job of resizing that image So it's not perfectly sharp So again, if you just start at the source and do things You know the quote-unquote. I guess right way There is no right way, but the way that uh that wordpress currently likes it to be done You're gonna have better luck And so let's see I'll go back to my slide That's about it. Um You may have you know one more thing i want to bring up our cd ins um You may have you know Utilized a cloud a cloud flare or anything of that nature um Your host is also, you know, you want it's an important factor in terms of Your image load times and you know how much your site can can take that sort of thing By and large most hosts the general packages that you can get are gonna Cover you. I mean they're and when I say that I mean going with some of the bigger guys like go daddy host gator in motion They In today's time most of they're just standard hosting packages are going to do the job. We're going to get you by Again, it's always smart to pay attention to What the intended use of the website is, you know Loading a lot of images on a wu commerce site for example And if that wu commerce site is running a sale a thousand people are hitting the site trying to load those images You need to make sure that your host is able to support that um And that's not necessarily always Being able to support a number of visitors. It's also being able to support processes Um a number of other things so you know sometimes best to kind of consult with your host Uh and let them know, you know, here's what we're going to do We we intend to have a lot of images on our website Or not many at all and they Will hopefully direct you in the right path and now a lot of times they will Try to direct your upsell you to Uh, they're preferred, you know package of the month, you know, whatever they're they're selling. Um That's a whole another talk and hold another whole another discussion. Um But in my opinion you can always get by with just your c-panel linux hosting. It's worked for 15 20 years Um And it's you know for most clients, uh when you're passing off a website to a client they want to pay for their own hosting Uh And just works most best for most of them Um, this is just another example I have up as a tab. Um Just you know another usage of how you can use your your images here. Uh, this was a nice example I found Um where they it looks like they weren't able to they didn't want to hard cut it with a you know a hard line Uh, but they also weren't able to make it full width. So it looks like they have just a nice little gentle fade Gentle and subtle gradients are coming back Uh, well, I say subtle you're seeing a lot more not so subtle gradients as of like the last year or two as well. Um, so don't be afraid to To you know play around that sort of stuff as well Yes, ma'am Uh, I don't know how this site did it. Um How I would approach this So I would if this were a uh A site through divi or x I would have my element Or my row built out Column one column two And then I would have column one set. Um Background layer one as the pattern background layer two Okay, scratch that background layer one is the pattern over here on the right column background layer one as the image background layer two as the p and g as a faded p and g file to To achieve this right here because it looks This is not a solid color if this was a solid color then we wouldn't have to use a p and g file for this fade We could use css for the gradient fade But given that it's a slight pattern and there's a gradient or um, some you know more detail here I would take this pattern here Just fade it out a little bit make a little p and g strip And then just set that second layer background to Uh float left or not float left, but you know just be on the left side of that column. Does that make sense? Oh, so that would be done in photoshop Photoshop has you know an eraser tool They have like a hard eraser. They have a soft eraser you can control You know how big the gradient is that sort of thing um So that's something you can just youtube, you know how to How to Use a eraser tool in photoshop Yes, ma'am So I think that's about everything I can rant about images with websites. Um, you know big no-nose or you know You know using just giant images for your background. Um I'm not going to pull any examples up because I don't want to it's a fascinating creative work, but um You know if you take a photo with your iphone and just use it as a background image It's probably not going to look good, you know um So yeah, again, think out your photos Approach everything from the start, you know, don't don't develop and design the site and then think about the photos later um Now I always I always like to think about them like I said from the start so Um any questions? Yes, sir Is it better to save it with a log description in the name like uh pink dash dress dash bow dash So now you're getting into seo Yeah, good point though good point. So yeah Yeah, uh, so, you know If you take it on your phone, it's going to be like ing and a bunch of numbers. Yeah rename it to some keywords, uh You know that that stuff is important then when you upload it into wordpress, you know You have your media library and then you have the options and name, you know, you have the caption You have the description fill that stuff out is appropriate. Um That's all great stuff to fill out and it does Does play a big role. Um, especially when you're talking like a website a week a WooCommerce site with Hundreds of product photos if all those photos are tagged appropriately Uh Google loves that. Um example pacocollars.com as a site I did almost 10 years ago. Um They started off very small. They started they started building building custom leather dog collars in Berkeley, california Uh got a WooCommerce site up started, you know, we designed and developed their site From the get go, you know, I think it was done nicely But what really made an impact was they took the site and They did everything right. You know, they uploaded photos the right size. They tagged their photos with the right keywords, um And as a result when you search custom leather dog collars, they were sat at the number one spot on google for almost a decade Uh, they're like two or three now, I think because there's etsy listings that are popping up and some sponsored listings now that pop up Um But yeah keywords, uh naming your files is important. Um Thank you for asking that Yes, ma'am Say that again. No Absolutely Just putting some keywords in there. Uh utilizing the fields that you have in your media library Yes, sir Are you drawing these on paper and then putting them in the computer or are you trying to draw them in the computer? Do you have like a a tablet that you draw on that goes to the computer like a Okay, so you have a way you have a way to get it on the computer Photoshop would be would be my suggestion there. I mean unless you're trying to do You know clean line work and really you know illustrator is a great Great option for that as well Yeah, yeah if you're doing, you know Very, you know vector images, uh, you know, which we didn't really touch on because we don't use a lot of vector imagery We use svg's occasionally, but that's a totally different file type and we're not going to talk about those either Um, they just load differently than your your standard images. Um But yeah, so if you're talking illustrations or whatnot, uh Illustrator, absolutely yes, ma'am Uh dynamite website dot c0.co dynamite website dot c0 and uh Yeah, i'm a freelance here in ashville. I didn't really talk a lot about myself, but i've been doing this since high school I was on the web team in high school and Soon as I got out of you know out of high school moved out west Took a couple years in college, uh web development, but College dropout as soon as I realized I could make some money doing it I went head first Into making money and now I have solely used wordpress and Photoshop as a tool uh to make a career over the last 10 years So for that i'm forever grateful, you know for wordpress and what it's done for us Anyone else? sweet I thank you guys for uh for listening to me random about images Have a good rest of your weekend