Transcript

00:00 you need a beer first I have enough beer Friday boom
00:16 we are back this is going to be episode two part two of our image series and if
00:22 you didn't listen to part one make sure you go check out episode 6 where we talked about image formats stock images
00:29 and vector icons and a whole bunch of other cool stuff so I make sure you go check out episode 6 on that on weaver
00:36 radio.com head up to the archive button and make sure you can listen to that episode first or you can listen after
00:42 this one it's not requirement yeah those are great episode yeah yeah good job
00:50 high five digital high five yeah digital I thought sweet so in this episode we are gonna be
00:57 talking about how to get images into your websites okay you know a lot of us
01:03 are rap Weaver users so there's obviously you drag and drop as an option we have warehouse we can warehouse our
01:09 image and then also after that we're gonna be talking about some a little bit on optimization and SEO of images so you
01:17 wanna start off Greg you wanted me to start off what we're gonna do well I think we should introduce both the
01:23 different ways you can get an image into your app weaver site yes explain a little bit those we have three we've
01:29 identified three ways that people can add images to their sites mm-hmm one is
01:34 obviously the warehouse method I think you know that for users you don't know
01:40 where everything means it means you upload images to your website or a
01:46 different service and you embed those images into your record weaver site or
01:51 project note by referencing the image URL directly so you manage all of your
01:56 images outside of rapidweaver um you know for a lot of users this can be
02:02 great because to wrap it on to export a publisher site again you could manipulate your imagery
02:08 uploaded change the size make it I can y8 and
02:14 those changes are instantly reflected on your website I need to touch my uber you
02:20 can do it your client could do it your you know if
02:26 we broke or somebody a co-working can do it mhm and you don't to be at your computer to make those changes you could be anywhere yep but on the flip side
02:33 right for the kind of a beginner user obviously there they are gonna be doing drag-and-drop right so obviously you can
02:39 drag and drop images in the last episode we did talk about there's certain types like SVG files that you can't really
02:46 drag and drop into it just because of the the nature of what that format is so
02:51 I'm not gonna review that now go back and listen to that SVG paragrafix are cool but they are different now there
02:57 are different ways that you can add images into rapidweaver via drag-and-drop right obviously in rap
03:05 Weaver itself without the Stax plug-in there is like the style text page that you can drag and drop images on right
03:12 and then same thing if you use the text step default text stack which is a style
03:17 text container right you can add images directly into there okay but with that
03:22 said most of us are not doing it that way right most of us are using these stack plugins um if you're doing drag
03:28 and drop right your drag and dropping either into two places either directly into the stacks edit page where all your
03:35 content is or there is a setting for an image that you can drag and drop into
03:41 the stacks settings itself right so those are two primary ways in which you
03:46 can drag and drop images right you're referring to the stack settings for
03:52 third-party stacks yes yes in or you mean like like in the background like
03:57 you can add a background image to a default stack so you know that has an image well inside the settings as well
04:03 but yes yeah um so yes third-party stacks or in some default stacks have some image drop zone areas um in the
04:10 settings and then there is in the content inside stacks edit mode where
04:16 all your text and everything is there are depending on the type of stack it is you can also add a image directly drag
04:22 and drop it into there okay now there are pretty different you know pretty big
04:28 differences in terms of how they're handled both ways right so
04:35 let's just say let's start off with this tax that you add to the actual settings okay those you pretty much get what you
04:44 add into there okay so if you have to be careful you have to make sure that you optimize those images first because Stax
04:51 has the plug-in has no protection it doesn't protect you from adding a five megabyte file into there okay that file
04:58 will get published as it is added into the settings okay it is untouched okay
05:05 so that's a great thing as long as you know that you need to pre optimize that
05:11 image beforehand okay now a lot of stacks allow you to add it direct an
05:17 image directly into the content side and that does Stax does do some optimization
05:23 of images that you add into the the drag and drop into the content area so outside the settings not in the page
05:29 inspector but in the main content area and but you have you have control over
05:34 that and a lot of people understand this is if you drag and drop an image into there into the main content area you can
05:40 double click it and when you double click it you enter into stacks it has
05:46 its own little image editor actually built into the stacks plug-in and when
05:52 you double-click on an image you enter in that image editor and you'll see the settings in the settings pane change and
05:58 you can do things such as by default I think it constrains all images to be
06:03 1200 pixels by 1200 pixels so that so this is protecting you from yourself of
06:10 adding in that five megabyte image right that's you know five thousand pixels by ten thousand pixels
06:16 okay so stacks is going to potentially transform that image slightly to protect
06:23 you from yourself should have it's under the hood it's to
06:28 retain them yes I make about it correct under the hood Stax is retaining the original image so that if you ever
06:34 change your mind later on and you want to change that of course all these settings are customizable for yourself right so you can tweak those okay so now
06:42 that you know that those those settings are there it's very useful and Stax can do some other minor image manipulation
06:47 like you can add borders and it can add a thing drop shadows and things of that so it can do some very basic image
06:54 styling and editing okay now important thing to mention though is when it does do that it actually adds
07:00 those to the image itself so it's not adding like a CSS border or a CSS shadow to the image it's actually adding an a
07:07 border or shadow to the actual image okay so I'm just its destructive correct
07:14 is it's a destructive correct obviously the original image isn't is still intact but the exported image is is modified
07:22 okay so if you ever dragged in let's say you know that you want this particular
07:28 particular image to be 1500 pixels wide or 2,000 pixels wide okay you know that
07:34 you want that and you're wondering why the exported image is only 1200 pixels
07:39 that is exactly what's going on so double-click on that image and you'll see the settings that Stax has modified
07:47 for you okay now another thing that Stax does for us out of the box is that actually generates retina images for us
07:55 as well if it can based on the image that you've added into it so that's pretty interesting
08:01 Isaiah did a great talk at the Weaver space conference last year I released
08:06 the video for free on my youtube channel so go ahead and check that out and he talks about how all of that happens
08:13 actually so how all the @ retina graphics and all that stuff is done inside the default image stack so that's pretty good very
08:20 useful information I recommend that you go check that out that video that Isaiah did at the Weaver space conference 200
08:26 it was actually 2016 still 100% relevant today it was a great talk gave you a lot
08:32 of really valuable insights in how stacks behind the scenes helps you
08:39 optimize your images in your websites yes definitely
08:44 I have must have to add you have no idea how many times usually will come to me and say why I website slow because yeah
08:52 I'm hosting the website and I'll bring up the bring up to the web inspector and I'll see that their their home pages 1
08:58 20 30 megabytes in file size it's like well you know I have broadband internet
09:05 I get you know 50 megabits per second which is four five megabytes a second
09:12 and that still takes me you know some time to download you can imagine a user on a 3G 4G cellular phone trying to try
09:22 to load your website yep you know they'll run out of memory it'll take them minutes you know to look good so it
09:29 happens it's very common spoke yes please be very cognitive and if you want
09:35 a protip something that I like to do is I like to quit rapidweaver and that's important to quit rapidly were first Joe
09:41 doesn't know where I'm going with this he's gonna is gonna look at he's looking at me like very well cautious but if you drag your apt leaver project into Daisy
09:48 disk I'm quicker after Weaver again quit rapidweaver you can kind of navigate
09:55 through the internal structure of your project and find out what pages on your website are using the most are flawed
10:01 just use the most size so you can kind of optimize those pages find out where
10:07 those big images are so you can really trim your project from your website and you know maximize your performance but
10:14 those little off-topic oh yeah I didn't know where you're going with that I was like oh oh what's he gonna tell user to
10:19 do now quick graph we were first Wow
10:24 liebe yeah sorry why scalia a bit
10:31 so actually funny enough i had a a customer just this week i think was a
10:37 couple days ago on weaver space was wondering what was eating up his disk space on his web server right and he
10:45 actually found some quick little PHP snippet that basically scanned his web directory and basically outputted
10:52 folder structure with all of the kind of you know next to it the size that that
10:58 folder or file was taking up and with that he was able to find where what was eating up some disk base and I thought
11:04 that was pretty cool it was actually something I was actually gonna have a free stack called server info server
11:09 info and I was going to throw that into that thought that could be useful for some people yeah it's pretty useful but
11:16 to be honest right at least chili dog there's a thing
11:22 called disk usage that what she'd do that looks yeah we asked him if his
11:27 cPanel allowed you to do that in his host didn't have anything like that say
11:32 there you go quality hosting company guys chili dog you know omits it makes life so much
11:38 easier yep did you see that kinda site but yeah interesting
11:44 anything else you got formed drag-and-drop again drop
11:50 I mean the biggest caveats for me is how it affects my reliever project mm-hmm no
11:59 getting it you know it grows very quickly and I like to keep it I had to
12:05 keep my projects as portable as possible mm-hmm so I like to be able to keep them
12:11 as thin light as possible um so I tend to not use the drag and drop features it
12:17 had just leaning towards warehousing for the extra control and I know it's a more advanced topic for a lot of people so
12:24 don't jump right into it just because you know that's what Greg set to do um
12:30 but you know get get comfortable with the drag-and-drop I wouldn't know where the controls that Joe is referring to
12:37 know how they work know how the retina images work and you know as you become a better web designer web builder move on
12:44 to these more advanced topics and I think I think you just was not really to really appreciate the multiple options
12:51 and you can add manage images better Weaver yep cool so let's jump back onto
12:58 the warehouse bandwagon a little bit um what are some ways so we described what
13:03 warehouse images are is basically you have a folder on your server okay and let's say it's um you know chillydog
13:12 hosting.com slash images okay and basically whatever
13:17 images I upload into that folder let's say I have banner dot jpg just as an
13:23 example right so if I upload an image called banner dot jpg into chillydog
13:29 hosting slash you know.com slash images okay obviously the URL to that image is
13:35 going to be chillydog hosting comm slash images slash banner jpg right so that is
13:42 kind of the 30-second rundown of what warehouse images is right you have a folder on your server that you can just
13:48 upload now there we'll talk about various ways to upload things to your server okay in a minute but that's just kind of you know what is a warehouse
13:55 that is what it is right it is you have a folder on your server you upload
14:01 images to that folder and then a lot of you know FTP clients make it easy you can just right-click and say copy URL you know
14:08 but basically that's how you determine the URL you have a folder inside your web domain and it's just basically your
14:14 domain / the folder name / the name of the image right
14:19 pretty simple yeah so sometimes more complicated than it is yes yes it sounds
14:25 more complicated yes so I can honest I
14:31 recommend people use subdomains instead of subfolders like that so this is in a
14:37 subdomain it would be images dot chillydog hosting.com instead of
14:43 chillydog hosting.com slash images but you know that's that's another topic
14:49 another day maybe on why that's important or why not get into a now Greg
14:54 go for it you want me to go for it go for it go for it man all right if you
15:00 use a sub domain it's what would be called a cookie list subdomain so what
15:06 happens when you make a request to a web server it passes through keys in that request which is just extra data and for
15:12 images that extra data is not relevant so if you want to if you want to reduce
15:17 their request size and and maximize the speed you use a cookie list subdomain so
15:25 basically just create a subdomain images or warehouse or domain.com and that
15:32 present were not passed that up your information over to those to that subdomain so it'll speed things up a
15:38 little bit not something most users will be able to measure but you know if we're
15:43 gonna be nitpicky yes I mean if every little bite counts
15:51 right I mean if you know yes so build it there's another thing I mean there's
15:57 there's one other thing and this is becoming less relevant in newer browsers with newer web servers and it's that the
16:06 Browse browsers will maintain so many connections to a server for URL so if
16:12 you loaded chillydog hosting typically you know your internet explorer's and
16:18 everything that would open up a maximum number of six connections to the website all right and that could be to download
16:24 the main page to downloading any of the CSS files or JavaScript files etc so when you put your images on a subdomain
16:31 like images dot chillydog hosting comm the browser will see that as a fern URL
16:37 and open up another connection so that would actually paralyze the loading of
16:43 your website to speed things up now I say older browsers what's moving over
16:51 now is HTTP to which doesn't require you to do this technique and this technique
16:58 is actually referred to as domain sharding and you know it's very prevalent in your IE six seven eight etc etc but if your
17:07 browser supports HT to http - and for those listening chillydog hosting does support HTTP - so I've already crossed
17:15 that deep so the browser will basically automatically do this and see the load
17:21 these resources and everything in parallel without having to do the extra work so it's that's yes I am really
17:29 excited for HTTP - you know as more and more websites get it because it does allow parallel connections to the server
17:35 it's very cool stuff now if your host isn't as awesome as Greg you can kind of
17:41 bandaid that solution if you were to use Cloud Player and CloudFlare will basically give you HTTP - requests at
17:49 least for things that it caches right so images and CSS files JavaScript files right so all of that stuff can be you
17:57 know put through CloudFlare and then you can kind of get the http/2 benefits through using the
18:04 CloudFlare service so it was very cool stuff yeah offers nice finally they only
18:10 what is that if you thought using a cookie list subdomain was
18:16 advanced I would not venture into CloudFlare and doesn't make things a little complicated for because now
18:22 you're managing your DNS and your audio settings in a third party so you know a
18:27 lot of people will see this in their control panel and not know that that control panel isn't relevant anymore and
18:33 make changes and understand why those settings are taking effect so just fair enough but I mean I said
18:40 what are you doing yeah but setting up a cookie lee's domain i think is is actually probably more difficult for the
18:47 average person than swapping dns over CloudFlare I'm just saying we thought that was into advanced yes yeah yeah
18:54 true Vera nothing so kind of going into how can we warehouse our image what tools can we use to actually warehouse
19:00 those images I have two tools that I recommend you could potentially use I
19:05 guess we'll go over three um one is kind of a very specialized app I discovered it on a couple months ago I thought it
19:12 was kind of a cool thing it's called drop share and you know all those cool
19:17 like little mini bar apps like you have like drop ler which I use actually then there's cloud net or yeah something my
19:25 cloud or whatever and then there's a bunch of other ones right and basically you drag a file up to your menu bar and
19:30 then it uploads it and gives you a little URL right well drop share is a cool app because it allows you to have
19:36 that but you can configure your own SFTP server right so you can configure drop
19:42 share to when you drag a file onto it it'll automatically upload upload that file to your server to a specific folder
19:48 and then copy the URL to the image to your clipboard like that's pretty cool for a web developer that if you want to
19:55 warehouse a lot of images that could be a really great work workflow for you so check that out it's pretty cool app hey
20:03 it's UI is a little funky and a little old but it works really well and they do continually update it I agree I actually
20:12 picked pick that up when I was on sale um I really got I used to use cloud lis
20:18 Claude Lee that was the one I was thinking of yeah I couldn't get cloud Lee here ya go time
20:25 I mean their UI was awesome and they keep adding some really nice features and everything like that but I just kept
20:30 hitting there they're in limits and getting some nags from-from it and I was
20:36 just kind of like you know like I don't want the subscription service yeah I you know I have plenty of I can I run I run
20:43 my ship so I have plenty of plenty of ways to do it myself and up in her drop
20:49 chair it was ideal for me yeah it's actually cool I haven't I haven't played around with it too much but I know you
20:54 can configure like it can have like its own little download page you know kind of like a drop ler does so that you know
21:00 or any of the other ones do so you can actually have like a download page that will then you know users can click to
21:05 actually download the file it's pretty cool I'm impressed with it it's a very cool app so if you haven't seen that one that's a nice one to check out the next
21:12 classification of apps is kind of your FTP apps I'm not gonna dive into this lot episode 4 we talk about FTP a lot
21:18 but you know my FTP app of choice is transmitted you get what you pay for and with transmit when you upload you know
21:26 when you configure an SFTP connection to your server you can actually whenever your upload a file as long as you
21:32 configure your connection properly you can right-click on that file and say copy URL and it will give you a URL that
21:38 you can then paste into rapidweaver or whatever you know and get access to that image and that's not a feature just to
21:45 transmit I know a lot of ftp apps have that feature that's kind of cool in it actually I use
21:51 transmit all the time I never use that feature but it's cool to know it's there go residents agree off by cab yeah I
21:59 can't recommend you know I'm not James can recommend people get anything else
22:04 you know people ask me what what to use I always just yeah use the old tried-and-true yeah now probably what we
22:13 should have led with is probably you know the beginner way of warehousing like how do you get started is rapid Eva
22:19 has something called resources built into your project right it's in the sidebar you can add folders or you can
22:25 create structures of you know stuff or you just add files into that resources
22:31 area and then rapidweaver will automatically upload those for you to your server okay and then if you click
22:37 on that file inside the sidebar you can actually copy the link of where that
22:42 file will be after rapidweaver publishes it so that is a easy way I find person
22:50 like if you have a lot of files right um that could be a little difficult to manage that way since you have to manage
22:56 them kind of one by one but if you just have a few a handful of files that could be a great way to do
23:01 that now also well I think it right before serving it actually you have the ability
23:06 to copy those files into your project it's been a while since I use those that feature Greg are you familiar with that
23:12 if no I mean I mean this booties booties you okay I'm vaguely remember in seven
23:22 dot something I think they added the ability to have they've to have those resources copy into the project yeah
23:29 because originally they were linked on the file system so that if you actually deleted them like the link to the file
23:35 was gone and I know where they wanted to make project files portable so yeah if
23:42 if we are wrong on that sorry everybody will just have to have a little bit of this I'm sorry if I'm wrong you can give
23:51 me the sad trombone but I'm pretty sure that rep Eber will has the ability to copy those resources into the project
23:58 file if I not you can wit me later so yeah
24:03 um one thing in it that'll be our first email to feedback we've radio yeah so
24:13 SVG's I talked about them a lot in the last episode SVG's right now are a type of image that has to be warehoused there
24:20 is no other way to get an SVG file into your well I say that okay there are a couple stacks out there that let you
24:26 copy the actual raw SVG markup and paste it into the stack yes that does work you
24:33 can actually do that straight in any HTML stack as well so if you have an SVG file you can copy that paste it into an
24:40 HTML stack and it will display right it does work but with that said a lot of
24:46 times if you want to use that SVG and a particular stack hopefully your stack does support warehousing then you would
24:53 have to warehouse that SVG file I guess that kind of goes another topic you probably talked about is how do you
25:00 warehouse an image inside rapidweaver right perimeter we're talking about stacks here and I know a lot of image
25:06 stacks do support warehousing a lot of them don't right there's a lot of free warehouse image stacks out there and a
25:14 lot of my image stacks most of my image stacks support warehousing as well so you can kind of there's like a check box
25:19 where you can toggle whether or not you want drag and drop or warehoused image right so yeah
25:26 I know there there are some developers that don't like supporting warehouse images because they they know that's primarily for more advanced users and it
25:33 it kind of hurts their support cost right because a lot of times you know people when you're first starting to
25:39 warehouse images you don't understand really how to do that and there's a lot of questions that there is kind of a learning curve but hopefully you know we
25:45 iron some of those questions out today in this podcast yeah thinking a good brief introduction
25:52 and kind of simplify that it's not really a complicated subject it's just you know working independently outside
25:59 of rap we were in parallel and some records to rapidweaver and understanding that you're making changes to your site
26:08 not on you know in R a believer in doing this work and but you know understand
26:14 the consequences and how how the pieces fit together and that's what's important
26:20 yep now there's actually another interesting solution for warehousing images that I had a customer this week
26:28 tell me that they were using it when they were building their emails right because when you're building an email
26:34 using rap Weaver um while you can use drag-and-drop it you kinda have to publish a web server and it's a little
26:39 funky right but on warehousing images is the best way and what he was using was I'd never thought about this he was
26:45 using a service called cloud and airy right so cloud Nerys an interesting service um
26:50 they have a very liberal free tier which I don't understand how they could
26:56 potentially have this free tier but it's there and essentially you can upload an
27:01 image and then you can get a URL to that image and then you can do all kinds of manipulations with that URL like you
27:08 know you can make sure you can you know get the correct size you need and all kinds of stuff so it's a pretty
27:13 interesting you know service especially their free stuff you can do a lot with it so that's the interesting way if you
27:20 want to if you don't want to worry about warehousing of images locally you know on your web server then you can give
27:27 something like cloud and area shot where you upload the image to their service and then they just basically give you a
27:33 URL that you give them pasted directly into rapidweaver and you're good to go climbing areas
27:40 possible yeah that's a very good tip very good tip I'm sorry I only wish that I thought to mention it myself
27:47 haha I beat you I know you beat me on this one we're gonna start like a tally board you know and we're not gonna we're
27:54 not gonna have a preamble and tell each other our secrets and let's see what is
28:03 this sound ah there we go it wasn't really winner ask huh how about this one
28:10 that's more uh Greg is here oh yes I've
28:17 actually known about cotton Airy for a long time they make a really solid product and I think you know you could
28:24 do you know Joe mentioned doing you could do stuff like so sepia tone sepia
28:30 tone yep you could you also have rotations and many conditions of the image you could
28:35 do an amazing amount of stuff you could turn the image from squared around you know yeah so it sounding it for emailing
28:43 that isn't really good too yeah so kind of a shameless plug another great way to
28:48 manage images okay is my total CMS and it's cool way just shameless plug sorry
28:56 Greg just thinking about it inversion to only what made me think
29:01 about it is actually cloud and airy you know I added some of those features of cloud and airy into total see us version
29:06 two so great way to edit images and warehouse them for your sites yeah I
29:17 mean I love images and you know I make you know I make Weber pixton I'm dying
29:22 to get that to a point where I get started start beat up testing that and
29:28 some to see that out to users on hope I get that out there being as soon as I know how I have to for pizzas I know
29:37 dust settles on so many other projects like it's my gonna be like I focus I understand you know I was looking at it
29:43 uh I found I opened up day one which is a you know kind of a journaling app and I haven't used it for a while and I saw
29:50 one of my last entries was my goals for 2017 and I maybe got like half of that
29:57 stuff done and I'm working on the other half hopefully to finish by the end of this year so yeah you know it yeah and
30:06 one exactly exactly it always underestimated how long it takes to do something it's developer
30:14 play right you know to take what your estimate is and times it by three basically you know East especially if
30:22 you're independent chef if the independent you know the squirrels are strong yeah oh man the squirrels they
30:29 attack me too man oof you know you got anything good plan for this week coming
30:34 up this week well I want to want to continue to knocking out some set the
30:41 forms plus up baby I have a few a few bug fixes to get together and clean up
30:48 and then focus my attention on Weaver pics it's writing some of the top of my minds right now so okay cool yeah yeah
30:56 so we talked about these images and it gets me all riled up doesn't wanna be hungry I want to get back into the into
31:02 it yep so I'm like anxious I'm excited
31:07 about these projects and images and getting that back back to
31:16 don't make progress I still have a killer week yeah you know I plan on by
31:23 the end of this week or beginning of next week hope to have maybe some beta
31:28 testers testing out the new site so I'll have it published to a secret domain where people can check it out and try to
31:34 break it for me that's the goal so yeah it's it's kind of one of those things
31:40 where it's like so I'm working with John Hawkins you know and he's he's working on his part and I'm working on my part and we're almost at the place where we
31:47 can meet up and it seems like it's once we once we meet up and join our two parts together it'll be like you know
31:53 it'll go really quick so or a big con job don't say that no only think
32:01 positive thoughts Greg positive thoughts only we'll see well that about wraps it
32:12 up for this um you know this episode we had a couple more things maybe will leak out one more image episode we'll see you
32:19 for next week but Greg where can people reach you people can reach me at the
32:25 same place chili dog software chili not coasting and on Twitter at bar shirt or kill a dog host sweet
32:33 I am yep I am at Jill workman everywhere if you want to send us any feedback or
32:38 if you want questions you want us to answer on the show live go ahead and send us an email to feedback at Weaver
32:45 radio calm and as always check out all of our past episodes you haven't already listened to them I don't know why you
32:50 haven't go to Weaver radio calm and go to the archives and you can listen to
32:56 all of our past episodes because me and Greg are just that awesome to listen to you know if you in it this far thank you
33:03 yes congratulations against some sort of metal right yeah gold star fictional
33:10 gold star Oh Greg she'd only get a gold star listening to me right I mean I I'm I'm a
33:16 pain to listen to I'm sure just ask my wife digital hi-fi's for everybody yeah i Phi's for amen if you are enjoying the
33:23 show please give us a quick 5-star rating over on iTunes we'd appreciate it to get the word out so everybody
33:30 that this website is great you know we have a lot I've been getting some feedback personally just like over dm's
33:36 and stuff and a lot of non rap Weaver users are actually listening to the show and getting a lot out of it so very
33:42 interesting I love it so if you are not a reprieve easier thank you for listening check out rap Weaver we love it and yeah
33:50 we don't even talk about Adobe Muse kind of going the way of the dodo this past
33:56 couple weeks and that's big news maybe we talked about that in the show great
34:02 idea go over to next time yeah next time guys we will see you later you have a great week bye Greg see no exit music or
34:12 is it here we go "}]