PB101: L13 - The Fundamentals of Images in Web Design
HTML-код
- Опубликовано: 5 июн 2023
- Images might seem like a pretty straightforward topic, but there's a lot to learn and a lot to know. And it's one of the areas where I see tons of mistakes that dramatically impact essential things like SEO, accessibility, performance, and more.
In this lesson, you'll learn the fundamentals of working with images in web design. We'll cover:
✅ Basic image formats (jpg, png, SVG)
✅ Next-gen image formats (webp, avif)
✅ Real images (HTML) vs background images (CSS)
✅ Figure tags
✅ Alt tags
✅ SRCSET responsive images
✅ Pre-optimizing images
✅ Plugin-based image optimization
✅ Image organization in WordPress
✅ Generating multiple image sizes
✅ Making real images behave like background images
✅ Text overlays on real images
✅ Common mistakes with images
More details on how to configure Shortpixel settings are found in my Plugin Blueprint video here: • How to Create a Bricks...
** RECOMMENDED TOOLS IN THIS LESSON **
🔥 Shortpixel - geni.us/goJD
🔥 HappyFiles Pro - geni.us/ZGQiCjc
🔥 Inner Circle - geary.co/inner-circle/
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
People, 3 years ago I made a mistake of taking the easy route and using background images on a website. I should have known better then, but hey it was a cheap project and I wanted to get it over as soon as possible. Well, that client, whom I didn't expect to come back, came back. It happens. Now, 3 years later I had a choice before me: leave things the way they were (nothing was broken per se) or redo it the right way. I won't lie, I resolved to take the first route. But last night my conscience would not let me sleep. No matter how much I was fighting it, it won and here I am reviewing this most excellent video a second time, while fixing my old mistakes - at my own expense... This is NOT an easy thing to admit my chumpiness (after over a decade of experience) , I almost feel like that pilot in clip, but it's good, I know that I'll never ever forget this lesson again. Moral of the story: don't be a chump, do things the right way, the first time. Many thanks to Kevin, as always. If it wasn't for you who knows how many corners I would keep on cutting.
I have so much fun watching these! Not only is the content top-notch but the energy, vibe and humor is on point!
Another great tutorial. Thank you, Kevin! Welcome back!!
Another excellent lesson, Kevin. Many thanks.
Was patiently waiting for the next PB101 lesson...and it has not disappointed! Once again, useful and interesting information. Can't get enough of these! Thank you, Kevin! 😃👍
Those fundamentals are great to remember. Thank you Kevin !
Just amazing. Thank you Kevin!
Thank you Kevin for another amazing lecture 😊.
You are awesome Kevin, thanks! 🙏
Thank you so much. I love your videos
Thank you Kevin.
Another awesome lesson, No one provide this for free or even paid! Absolute gold, keep doing what you doing.
Brilliant stuff. Coming from an SEO background, I really appreciate being able to use REAL images for backgrounds, with all of the associated juicy data.
I also love your plugin recommendations. I was looking for a media organiser, so this is perfect timing, and I took your image sizes code and extended it further so I have a nice clear set of image sizes available.
Much appreciated!
I have to admit that when I started following this course, I expected different content. Going from being a little skeptical at first, I am now addicted to these videos and all the valuable knowledge you share. Bought the Bricks LTD, and cannot wait to begin REALLY putting things into practice!
🙌
Spectacular
"Calm down, Bev" 😂
Everyone has a Bev.....
Thank you for giving back to the world
Another amazing tutorial! So much useful content and very well explained. Was a chump but not anymore, thanks to you 👍. Can't wait for the next episode!
💪🏻
Thank you Kevin for the useful lesson! Hello from Russia! :)
For SVG, installed the safe SVG plugin. It can be a vessel for invasive code. And may be required for some online software. You may also have to add a set size via CSS.
For rostered image, you can optimize them pretty well in Photoshop(probably much smaller than what’s posted in this video). Use a plugin to remake them as webpage if needed. You may also further optimize images further with online service on larger images.
Love the plugin for image organization. I’ll have to start using that. Thanks for heads up.
Brilliant!
Great video Kevin. This lesson was very valuable. It taught me the correct approach to different types of images. I'm still trying to get out of "Chumpville" but slowly making progress. Will be rewatching this lesson and taking notes once again. The PB101 series of lessons are absolute PLATINUM....you surpassed gold a long time ago.
Thank you 🙏
Good lesson
Thanks Kevin! Will review and take note of the figure instead of bg image thing later! Great video again (hope I won't be beaten with a wet noodle)...
🤣 You kill me every single time.... keep it fun, love this style
Wet noodles, lashings and rehab sounds pretty good lol. I know quite a bit about images and image SEO and still learnt some new tricks here. Thanks a ton!
Awesome tutorials! I instantly subscribed. I only have one suggestion to make. Either increase your browsers page zoon or lower your screen resolution while making videos, it would be much easier to watch on mobile or smaller screens.
Yes but makes it harder to work
I'd watched your videos on proper styling of a nav element as a button - loved it. This one put me over the top with you. Browsed your channel, sampled a couple lessons, and I'm now signed up for the Page Building 101. I had watched some 'other content' about image handling - it's been a catastrophe. Your approach is well thought out, time-tested, and it totally makes sense.
I'm a in the Generate ecosystem right now - looking at Bricks after I finish the site I'm working on. I did use your PHP with some modifications and I now have Generate Blocks set up for the image sizing.
Happy Files is a joy - had a different vendor, it was okay, but Happy Files takes it over the top. Great recommendation.
I'm also in another forum and posed the question - Image Block or Container Background - What to Use When. The answer was way different than what you presented.
I am getting out of chump land, dumping bad habits and learning pro habits. Your stuff is a GAME CHANGER. Thanks a bunch.
Love it! 🙌
@@Gearyco just posted my first post on Inner Circle on this topic. If u get a chance, please take a look. TYVM
Thank you Kevin. Excellent video as always. Since images are such a fundamental component of web pages today, is there the possibility of a level 2 Images in Web Design tutorial?
probably as one-off videos on the channel as needed.
Hey Kevin, another awesome tutorial dude. Is there any chance you could share the snippet code for the extra image sizes please :D?
Thank you for this lesson Kevin. So useful and I will pray for many developers I've worked with to know this fundamentals...
At min 38:00, how do you do it when you have a background color in your section or in your whole body? In this case the image will go beyond the background and we won't be able to see it right?
Also, are you able to open the background image in another tab with the right way of adding images?
Isolation: isolate on the section.
Nice video, could you please share the snipped code used for image sizes.
Awesome vid! One question: When should you use the picture tag? Do you actually need it if you can achieve responsiveness with figure and srcset?
Not always necessary
First of al, thank you for another great video! I am learning more and more each day. I notice the file size of the image was the same, regardless of the output size you choose. Was I seeing that correctly? Or does ShortPixel deliver the file size that is adequate for what is needed?
I didn’t have shortpixel connected - was just a quick demo.
Question Kev, when you choose 480px for that image in the video, what if when it goes to another breakpoint and that grid become one row, will that image width now becomes bigger, right? So the browser will use the srcset. So do we need to choose the right image size for the grid anyway?
Choose the largest size it needs to be.
Pure gold Kevin, thanks for the details! Question: so you're "paying" about 14 credits PER IMAGE UPLOADED to short pixel? Combined with the 6 thumbnails that WP already creates, and plus these additional 7 sizes, that's about 14 images in total, including the original, that short pixel processes for each uploaded image (not including webp/avif). For sites with tons of images, that's a lot of dough going to short pixel for optimization, right? Is there a better/cheaper option, or do you just consider that a cost of doing business because short pixel is a must? Thanks!
No that seems really high. I’ll have to check my usage but it’s much more efficient than that.
@@Gearyco following up on this? Any new input from your side? Thanks!
Follow Up Question - In the video, you mention a series of mistakes to avoid, one being using a design tool to manipulate an image's saturation, opacity, crop, aspect ration, etc. Is this the reason why you downloaded images with 1920 pixel width and then use CSS/container properties to "style" the image height?
Yes you can crop images with CSS. There’s no reason to physically crop them and lose the data.
Hi @Gearyco, what happens to the other image sizes added by the custom code when you delete an image? And is the code connected to shortpixel optimizer? Would you recommend hosting images externally eg in amazon s3 or backblaze object storage?
They’re removed as well. And yes they’re all optimized. I recommend a CDN.
26:10 I see you use the alt text function in Bricks usually. Wouldn't it be easier to apply the alt-text always in the media editor so that it's applied globally when re-using the image? I imagine there might be a reason why you're not doing that! Thanks so much for all this extremely valuable content 🙏🏻
It places the alt text in a separate area from where work is taking place. Kind of annoying. Also doesn’t support dynamic data in media gallery.
Dude, your videos are wonderful. Please do more of them. Keep 'em coming. Are you still using Bricks? What do you think of Kadence?
Kadence not recommended
In this lesson, you selected source image sizes just above the rendered size. That makes sense, but what about retina displays where I was taught to double the rendered size to ensure it is crisp (probably an oversimplification)?
Great lessons! Much appreciated.
Higher res images can be used but they come at a performance cost.
5:54 How do you add alt text to svg files?
Great video Kevin! I was looking in elementor html tags and DOM result to see if it uses figure tag but I couldn find any, with some messing around I "figured" out that if you use custom caption and leave it empty you force the image to have a figcaption so it will be wrapped in a figure tag. So my question is: SEO-wise is it worth it to have figure tag for your images but have empty figcaption tags? (considering I dont usually want that text under my images)
It’s probably best to have a caption. I don’t think either way is gonna influence SEO much. This is pretty far down the priority list
Regarding the background image, your example is using a container. What if we need a full width background image in a section? Can we do like the real-image example?
Yes it works in any box.
In my experience with WebP image files, they are not always better. Sometimes their file sizes are bigger than JPGs and PNGs. In my observations, it’s due to light pixels versus dark pixels.
Yes this happens from time to time
Great video as always Kevin. Love your style of teaching. I am a newcomer to Wordpress. As a new freelancer, which pricing package do you recommend for shortpixel. There pricing packages are confusing for me. Can you also produce a video about shortpixel? I watched your blueprint video and your plugin stack video but would like to learn more about shortpixel.
I think I pay like $9.99/mo
@@Gearyco thank you Kevin.
Thanks, Kevin, lots of great information here. At 21:20 you say to NEVER use background images for images with contextual value. The Bricks slider seems to set the images as background images. Images in a slider definitely have contextual value. Are they doing it wrong?
Yes. Our Frames slider allows you to do it correctly.
Thanks for the reply.@@Gearyco
Hi Kevin, thanks for the great video. What's the other solution for the overlay instead of a div? Many thanks in advance!
Pseudo element
@@Gearyco thank you for everything and especially for your quick personal reply
I've been working on rebuilding my own website with Bricks and I found I need to change a color in my logo. Then I watched this and discovered I do have an SVG version of the file! My question is, how do I change the color to only part of the logo? Do you have a recommended source that shows how to edit this? I'm literally just having to change the text color of a few letters but the color I think matches another part of the logo that I may or may not want to change.
Thanks so much for putting this course together! I may end up using it for future employees to ensure we're on the same page!
All SVG files are a little different. You have to identify where the fills are being declared and then you can adjust the fills.
@@Gearyco I discovered Illustrator can make changes :) Thanks for the reply!
Great video! Sooo...would there be back-to-back sentences for felonious assault if one were to put a video in the background? Should video be handled the same way as the image element? And is that true if the video is pulled from YT or resident in Wordpress?
I really really dislike background videos.
@Gearyco I have enjoyed your tutorial, Kevin, as always. at about 41:00 you are mentioning briefly "additional mistakes", cautioning to use "design tools" - I am not sure why. Is that for possible copyright issues? or anything else? Or you are just generalizing? I am not talking about text included inside the image case, or a collage case. Specifically I am curious if you are not seeing a need to have some images be professionally prepared before upload. Color grading to match the site's color scheme perfectly f.e. Why would you not do it in Photoshop? Where you can manipulate just one color leaving the rest of the photo in tact. Or in Lightroom ... so easy to do for someone who uses Photoshop. Why would i want to learn how to do it with code? And is it even possible?
Some color grading can be done with CSS. I’d really need to see an example though. The caution is that brand colors change. If all your images have color edits embedded in the file, every image will be the wrong color should the brand color change in the future.
Which image format should I use for site logo and favicon between svg and png? Or maybe other format?
Svg for logo. PNG for favicon
Have you madee that Shortpixel NGINX setup video yet?
3:43 I can’t see the fuzzy png file. You forgot to zoom in.
If you have a tutorial about proper naming files would love to check it 🙏 Does the list bellow covers the main topics?
- 6 words max
- All letters in lowercase
- Remove special characters and spaces
- Use dash “-” instead of underline “_”
- Relevant Image related to content and CC licence
- Fill image alt text
- Image tagging (alt text + title)
Pretty good list.
Good advice Kevin. I still use image tools to crop images if they are not absolute, and shifting on mobile, as otherwise you're serving a series of landscape images in a square space - surely that's not efficient and why Bricks has the option to change based on device size?
This option was only introduced very recently. Depends on how much extra work you want to do.
@@Gearyco as little as possible 😂 but like you I want to make sure it’s done right. Always lost to whether I should use absolute images in containers or just put the image in - given limitations and layout changes for mobile.
I like to preserve the original image in case design needs change or I need to use the image elsewhere. I don't want a physically cropped image that can't be used in other contexts
@@DesignRobPearce
@@Gearyco agree entirely. I’m making a portfolio site for our agency and I was constantly back and fourth whether to use absolute in a wrapper or just place the image as is. Image as is certainly has some benefits for ensuring the crop is consistent.
Do you therefore suggest using wrapper and absolute in the majority / all cases?
@@Gearyco for instance, curious, is it not detrimental for SEO and speed scores to load a set of say 20 landscape images on a page all set to crop to a 3/3 ratio loading in images with edges that are not in view at all given device size?
Can you do a parallax effect when you use a real image as a background? Thanks!
At that point, your background would basically be decoration, which means you should just use background image.
I'm using a CDN (Yes, that’s what I meant - not DNS) that is serving 'Adaptive images'. Should I still generate all these additional image sizes?
If the CDN (is that what you meant?) is generating the image sizes for you, then probably not. But I can't say for sure. If you ever remove the CDN, then you won't have any image sizes to use for SRCSET. I'd say I'm a fan of physically generating them in WP.
This dog is running out the door, tail between its legs for some of the misdemeanours of the past.
For alt text, when I'm naming the file to upload, I type it out like a sentence. I then have a php function to automatically fill the alt, caption and title fileds in the media library, minus the hyphens. The page builder I have been using auto fills a default for the alt from this. It can be changed manually. I wonder does Bricks have this? ...I just checked and it seems to do so.
I'm squinting at 16:47 of the video to grab your function to handle various image sizes. Quick question the sizes you are using 480, 640, 720, etc. are they important? I usually work with 1920, 1024, 512, 256, just because somebody I worked with years ago suggested this? I have a slight suspicion that your sizes are more correct?
My sizes align closely with common breakpoints and content widths.
why are you optimizing the images twice? Once in PhotoBulk and then in ShortPixel. Are the images not too pixelated then?
And iIs it possible to adjust the custom sizes according to the layout used? E.g. 620px instead of 640px?
Because WP has a max upload size and there’s no point to uploading and storing gigantic files on the server that’ll never be used. I don’t always pre-optimize them, but I always resize them before I upload.
Hmm but wouldnt you have an bg image for a section and not the container you show ? 🙂
Would you add the text in the container and set the section to releative?
Not sure what part you're referring to? Do you have a timestamp?
@@Gearyco 31:49 wouldnt you have a image fill the hole section if it should behave like a background image, and not the container width- would you set the styling on the section then? :)
Is ShortPixel (or an equivalent) still useful if I want to serve only Webp ?
Can I only serve WebP in 2024, knowing almost every browser is fine with this format ?
Thx again for incredible content ! 😊
Yeah, I think you’re safe now
Thank you very much, such a brilliant lesson! 42:48 "... if it can be done with pure CSS, do it with pur CSS". My problem is I cannot visualize what things can be done with pure CSS yet = )
Won’t be long!
"Why's my website in Latin? Calm down, Bev." 🤣
Bev hates placeholder content!
Is it me or is the thing with the container / image as position relative / absolute (around 35th minute) no longer working with the current Bricks version? My image is not being contained and I can't figure out what is wrong...
If you post a link in the inner circle, we can help you
I placed the SRC SET snippet in wp codebox but it's not working. I do not see new image dimensions appearing into the builder image size dropdown. Any idea why? Cheers
Ask in the inner circle and give us some screenshots so we can help you. Can’t tell from just reading a quick comment.
You have to enable the code snippet for the SRC SET image sizes to take effect.
From the Snippets plugin homepage there will be a slider next to the snippet you have created.
Just flick that over to blue and you should be sweet
How do you ensure clients are adding alt tags post handoff? I think Wordpress should force users to write alt tags by default when uploading an image, and then have an option checkbox for purely decorative images so those images can still be uploaded as well.
Also, thank for this playlist! I'm a web design student currently at a community college, but the program is a complete joke. The instructors are pushing students toward DIY tools like Wix and Squarespace. I don't even know how most of the people in my classes will be employable, especially as AI assistance makes smallish, DIY websites even easier to build for someone with no technical skills.
Oh man, that’s tough to hear. What a waste!
Trying to insert the same SRCSET snippet inside of WPCodeBox, but when opening Bricks Builder, instead of 480x320 is showing 480x9999; instead of 640x427 is showing 640x9999, etc. Why is that?
What actually happens with the images? What are their dimensions when you add them to a page?
@@Gearyco I think it was some kind of a cache issue. Working correctly now. Thanks for sharing this!
How to properly deal with high density devices, so basically all modern phones? If I upload an image with a width of 1920 pixels and use srcset it renders the 1536x1536 version on an IPhone 12 Pro which has a 390 width display with 3x pixel density.
My first problem is that the 1536x1536 file is even larger then the original one because it's not optimized. And while I know that I should optimize all image sizes in this case it would be just easier to serve the original file since the difference wouldn't be that big.
Also wouldn't one want to force a smaller image like 400x400? I know the large one will look slightly better because that is the point of high pixel density devices, but is it really worth it considering the file size? If it is indeed better to use the smaller image, how do you tell the srcset function to do so on retina displays?
You have to optimize each size. ShortPixel does this automatically.
@@Gearyco Okay, so you do use the high resolution images even for mobile and let src do it's thing instead of trying to force an image that is about as large as the display?
Are there any extra steps to setup "Short Pixels" with OpenLiteSpeed server?
Haven’t ever used so idk
Can you please increase the size of your cursor and go fullscreen in your next video? 🙏🏻
This was recorded full screen
@@Gearyco Oh 🤔 When I go fullscreen, the red, yellow, and green dots disappear upward, but maybe the number of browser tabs makes a difference.
16:38 Is this something i can put into my functions.php file? I dont use WPCode
And if yes, will you paste it here, so i can steal it?
Bonus questions: You only pre-optimize to save server ressources? Will the double compression you make not potentially cause bad compression? Like images that have been JPG'ed too much
When i use the img like you said as bg. How can i make it fixed on scroll? there is no option
Right. You gotta use bg image for that.
I mean how is it in bricks possible to add a parallax effect or sticky on scroll Like in the background options. On the Image there is this Option not
You have to use a background image for that.@@lutschburger_stubn
Adding blur to an image with a design tool may be a good idea because CSS blur effect is demanding for browsers
Depends on how big the blur is. PNGs with blur are often huge too
Kevin, have you any course (paid or free) that walks one step by step through a wp web development workflow that puts all your principles in action? There are a lot of crucial principles you teach and use, but now when its time to build a website using all your principles, one would still need to develop a task checklist to make sure all the critical things you teach are done.. so just wondering if you have such a course?
I'll be doing full home custom home page builds and then I'll be doing a training on setting up site architecture and such. Combine those together and you should be able to tackle any project the same way.
@@Gearyco That's great. Any estimated time for these trainings to be published?
Coolest video - love it. Learnt not to be a chump :)
I use a bash script to optimize images in bulk inside the Terminal.
If someone's interested, lmk, I'll gladly share.
why don't you just use the built-in overlay widget of Bricks? I made 2 containers, one for the image and one for the text. At the image container I used the overlay widget and the text container I set to absolute, align main/cross axis center. I have the same result with a real image for the background.
If I try to do it as in the vid the Footer Hotel is overlapping the image ...
Not every builder has that feature. And that feature doesn’t work for every use case. I taught a method that has no limitations
Should we add keywords to images?
Yes but don’t spam them
Why "pre-optimize"? Isn't it just enough to optimize with via shortpixel homepage and set max height / width?
I explained in the video. Ton of unnecessary load on the server and it’ll use more of your shortpixel credits.
@@Gearyco I meant doing it manually via their homepage, not the WP Plugin and then uploading the optimized image. It only uses 1 credit (or 2 if you create WebP) and no extra server load
@@raziel8799 That's still pre-optimizing, isn't it?
@@Gearyco Idk, I don't do anything further after that process, only upload it without further compression / optimization.
Like what further optimization is needed? Compress all the image size variations?
@@raziel8799 if you start with a fully compressed version, you can never go backwards. I like to have a semi original to work from and as a backup.
I'll be honest I did the snorkeling example the chump way. Now, I know better.
"The more descriptive you can be, the better" is not helpful for screen reader users. Keep ALT text succinct, only to details that are obvious to a sighted user, but not details that are not needed. What benefit does the screen reader or sighting impaired user gain from knowing there is a stripe, let alone a yellow stripe, down the middle of the road?
It was just an example on the fly, Jennifer. And alt text isn’t *only* for screen reader users.
@@Gearyco you said "the more descriptive you can be, the better." This is not beneficial to screen reader users. You are promoting a product about that claims to value accessibility and even mention accessibility in your videos, but you do not show that when you say "alt text isn't only for screen reader users".
@@underscoredevie alt text has semantic (read SEO) value as well; so, yes, alt text is categorically (i.e. by definition) not only for screen readers. This next observation is beside the point, but if I was dependent upon a screen reader for my experience of the web, I absolutely would appreciate descriptive alt text. @Kevin Geary
@@JamesJosephFinn you absolutely right. Do you want to rank for "yellow line in the road"? Making your alt text LESS wordy and to the point benefits your SEO as well. Because you are not a screen reader user, you don't understand that "verbose" is too much to listen to. It's not a pleasant experience.
Have to admit something...
I did some beginner HTML and CSS Courses. (Some cost a lot and i mean A LOT).
And I learned more about best practices from Kevin than from those courses, while this is even meant to be for page builders.
Those "beginner" courses seem to always evade best practices to be more "easy". (One taught f***ing FLOAT for grid layouts with the reasoning it's easier to learn first). And no... the courses is not old, it got updated in 2023...
You would have to unlearn all those flaws later which is a weird approach.
I don't get it. Just teach the right way. As Kevin does.