Most WordPress themes show user Gravatars in the comment threads. It’s a way of showing an image with the user, as associated by the email address used. It’s a nice touch, and almost an expected design pattern these days.
Every …
Let’s say you want to find an <img /> on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do …
Working on your website locally means having the files that make your website tick right there on your computer. It’s common those files live in a version control repository. You work on them, and push them up to the repo …
We’ve all been there before: You’re browsing a website that has a ton of huge images of delicious food, or maybe that new gadget you’ve been eyeballing. These images tug at your senses, and for content authors, they’re essential in …
The following is a guest post by Damon Bauer, who tackles a pretty common web developer job: offering user image uploads. I’d hesitate to call it easy, but with the help of some powerful tools that do a …
There’s lots of neat tricks for reducing the size of JPGs in this article by Colt McAnlis:
…With the Average webpage size now larger than the original DOOM game, you have to start asking where all the bytes are coming
The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful …
object-fit and object-position are my two favourite CSS properties lately. They give developers control over the content inside an img or a video similar to the way that we can manipulate the content of a background with background-position and background-size…
When you upload an image through the WordPress media uploader and then insert it into the editor, it comes with width and height attributes. These are normally desirable, as it assists the browser in making the appropriate room for the …
Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead, you may want to replace that with a “missing image” graphic that you are sure exists so there …
Make a div that is the exact size of the image. This div will have a background image applied to it of the second image. Then put an inline image inside it.
<div id="kitten" style="background-image: url(dog.jpg);">
<img src="/images/kitten.jpg" alt="Kitten" />
