Bad news first! It’s easy to make rookie mistakes when uploading images to WordPress. The good news: With an understanding of how images on the web work and the right tools at your disposal, you’ll be able to include images that are crystal clear yet small in size. Sounds good? Then read on!
Pixels, DPI and Retina: Say what?
Let’s get this out of the way first – DPI (dots per inch) is not relevant for building a website. The setting has no effect on how images are displayed. On the web, we’re using pixels, and that’s what we’ll be referring to from now on.
There’s a simple rule for exporting: If the image has 500px, that’s exactly the size at which to export. Why? To not make the file bigger than necessary. But! With the dawn of retina displays, this rule is replaced by another simple rule:
Export width of an image = 2 * the width in the design file
Why you ask? Because with retina displays, devices squeeze more information into the same space. The information retains the same physical size on the screen, but it appears sharper. The result: pixels in HTML no longer have a one-to-one relationship on all screens.
For normal displays (1x): 1 pixel wide in HTML/CSS = 1 pixel wide on the screen
For retina displays (2x): 1 pixel wide in HTML/CSS = 2 pixels wide on the screens 500px in HTML or CSS still use the same physical space on both normal and retina displays. The transition from the iPhone 3 to the iPhone 4 demonstrates this nicely.
iPhone 3 and 4 have the same dimensions – but the iPhone 4 display doubles the amount of pixels horizontally and vertically. Yet an element with a static pixel definition in HTML would occupy the same space on either phone’s display.
Exporting images from Figma for WordPress
Now that we know how pixels and retina displays work, let’s figure out how to get the right version of an image from a Figma design. Figma gives us a few options to choose from when exporting assets. We can choose the resolution and file type.
Select your element and export the assets from a frame with the maximum width you want to support. Based on what we learned earlier and the type of asset you want to export, choose the following settings:
- Images/photos with transparent background: png @2x
- Images/photos without transparent background: jpg @2x
- Graphics/Illustrations: SVG (because SVGs are vector based no selection for the resolution is possible)
Tip: Check the preview in Figma before exporting to make sure you have selected the right group or element. If an image exceeds the frame/canvas it’ll be cropped at the edge. Click the frame and deselect “clip content” to prevent this.
How WordPress works with images
Okay, we have all the files we need now. What’s next? Easy – we add them to our WordPress system. Let’s have a look at how WordPress works with images.
WordPress 4.4 introduced responsive images. For every uploaded image WP generates multiple versions and creates a “srcset” and a “sizes” attribute. Depending on the user’s viewport width, WP loads the corresponding image size. The code generated by WordPress looks like this:
This automation often helps with loading smaller images, but it’s not perfect. That’s because WP does not recognize the layout and the rendered width of an image in relation to the screen.
When uploading images to the WP Media Library, make sure to remember these important SEO-factors:
- Name the image descriptively! Use lower cases and divide words with a hyphen, e.g. man-with-a-hammer.jpg. It’s best if they’re already named accordingly in the Figma file.
- Add an alt-attribute. Again, describe the content of the image in a human-readable form. For example: “Big blue banana at the beach“.
Automated compression and WebP generation
Exporting images from Figma generates svg, png. and jpg files. You can save big on image size by exporting in the right dimensions, but there’s room for more.
Google’s image format WebP allows lossless and lossy compression and saves up to 34% of jpg file size without quality loss. It’s compatible with background transparency, too, and cuts png file sizes by up to 70 %. That’s crazy good!
For a nerdy, in-depth explanation of how the compression works, check out the google dev docs
So, do we have to transform all our assets to WebP manually? Luckily, we don’t! These plugins help us out:
- Smush – Lazy Load Images, Optimize & Compress Images (for WebP compression you need the pro plugin)
- WebP Express (free, works really well for me)
- Converter for Media – Convert WebP and AVIF & Optimize Images | Ease image optimization
These plugins automatically turn regular images into WebP images and display the optimized version to users. If you want to use them, make sure your server supports the required image compression modules and the .htaccess file is writable. If this sounds complicated, don’t worry, there are plenty of installation and troubleshooting guides easily found with google.
Lazy Loading = smarter loading
Lazy Loading loads images right before they scroll into view – and not all at once when the page is initially opened. This increases the page speed and creates a smooth user experience. WordPress 5.5 added the HTML5 loading attribute to all images, allowing browsers to use their native lazy loading technology. Many browsers already support this feature (effecting approx. 75% of all users).
Use plugins like Smush or WP Rocket to add compatibility for more browsers. The plug-ins also add lazy loading for other media types like video. When using a non-native variant, we suggest thoroughly checking the whole page as sometimes incompatibilities can occur. Certain images might need to be excluded from lazy loading.
Testing your setup
Google Dev Tools are great for testing your image implementation. Open it by pressing CMD/Ctrl+Shift+C. The network tab shows you all the loaded files and formats.
If you click on an image element in the Elements tab and hover with your mouse you’ll see the intrinsic size as well as the rendered size:
The intrinsic width and height should be double the rendered size. On lower viewport widths this might not be exactly met due to the issue explained earlier (WordPress not aware of the layout & limited number of created versions per image).
Use this script for finding badly sized images
We coded a small script that highlights badly sizes images. Simply add it before the </body> tag of your page during development! That’s it for today, folks! If all of this seems mighty complicated, remember we also offer consultations and IT support. Just hit us up at info@jut-so.de
