PB101: L13 – The Fundamentals of Images in Web Design

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?

@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?

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.

Which image format should I use for site logo and favicon between svg and png? Or maybe other format?

Spectacular

Do you have a recommended non chump way to replace multiple images at once in WordPress? For example a company retakes their team member photos every other year and their photos need to be updated on the team members section, individual team members page and on some cta sections on dozens of blog posts on the website. I've often encountered buggy jankiness and caching issues when replacing images. There's gotta be a better way. Especially for bigger companies that have 100s of team members.

This is the best course on WordPress site management/setup I've seen. Thanks for making it!

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?

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)

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?

Are there any extra steps to setup "Short Pixels" with OpenLiteSpeed server?

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.

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?

Great Lesson!! Can I add the snippet code to Bricks CSS or do I need WPCodeBox?

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!

Can you do a parallax effect when you use a real image as a background? Thanks!

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 have so much fun watching these! Not only is the content top-notch but the energy, vibe and humor is on point!

"Why's my website in Latin? Calm down, Bev." 🤣

Just amazing. Thank you Kevin!

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 1536×1536 version on an IPhone 12 Pro which has a 390 width display with 3x pixel density.
My first problem is that the 1536×1536 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 400×400? 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?

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!

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?

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?

Nice video, could you please share the snipped code used for image sizes.

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.