Source Bogaerts Padres agree to $280M deal
Author: Michael G
Evolving Web: Picture Perfect: Selecting and Preparing Images for the Web
Images are a crucial consideration when you’re updating or expanding your website. Done right, they’re a powerful tool for communicating your message and enriching the user experience. Done wrong, they can leave a bad impression and weaken your digital presence.
This guide explains how to pick meaningful images that create a connection with your audience. You’ll also learn how to optimize, resize, and compress images so they’re ready for the web.
Selecting the Right Images
Take time to explore the images available to you. You can search and download free images via Unsplash and Pexels.
Image
Here are some key points to consider:
- Quality. Choose images with a high resolution and correct exposure to show users you care about quality. Avoid images that are low-res, blurry, tilted, or incorrectly exposed.
- Tone. Images should match how your organization wants to come across. If there are people in the image, think about the impression their poses and clothing give – for example, do they seem professional, friendly, or casual?
- Inclusivity. Pictures are a great way to connect with your audience. Portraying different people can help make them feel welcome. Be inclusive of all races, genders, ethnicities, abilities, sexual orientations, and other characteristics. Pay particular attention to traditionally underrepresented groups.
- Variety. Show a variety of environments to keep things interesting for users. Have some images that feature people and some that don’t. Switch things up with different crops and angles.
- Composition. Images with simple compositions and no clutter tend to be less distracting and overwhelming. This allows users to focus on what’s really important.
- Distinctiveness. Look for images that make your platform stand out from the crowd. Avoid generic stock photos as they’re boring and leave a poor impression on users.
- Design specifications. For example, banner images can be tricky to pick due to their unusual dimensions. Avoid close-ups of people as their heads may get chopped off on mobile. Ensure any text over the banner is legible.
Examples of Well-Chosen Images
The Princeton International website encourages students to explore international learning opportunities. Its visual design is inspired by travel websites to create a sense of adventure. It includes a variety of eye-catching photos that showcase the exciting destinations and diverse cultures students can experience.
Image
The Canada Foundation for Innovation website features banner images that reflect the key themes of each page. A variety of colours, environments, and angles creates visual interest, while simple compositions ensure they don’t get distracted. The white text is positioned over darker and cleaner parts of the image so that it’s easy to read.
Image
The OCAD U Admissions website features student-created art in a variety of striking styles. It’s a bold visual direction that supports the university’s reputation for excellence in art, design, and digital media.
Image
Making Touch-Ups
Once you’ve chosen your images, use a photo editing app to fine-tune them. There are a variety of correction tools in Photoshop under Adjustments. Or you could try a free app such as Pixlr or GIMP.
Image
Image
Adjust the following settings if necessary to enhance your photo and match it to the style of other images on your site:
- Exposure to change the overall brightness of the image.
- Brightness to change mainly the brightness of midtones.
- Contrast to control the difference between shadows and highlights.
- Saturation to control how colourful your image is.
Image
Use the crop and rotation tools to fix bad angles and reduce visual clutter. You’ll also need to crop images to the aspect ratio specified by your platform’s design. Aspect ratio is the ratio of width to height. For example, an aspect ratio of 1:1 is a perfect square. If you had a 2500px by 3500px image, you’d need to crop the top or bottom of the image by 1000px for a 1:1 aspect ratio.
Saving Images at Retina Dimensions
Retina dimensions are a nice way to create a higher-resolution image. It means saving an image at double the required dimensions.
Here’s an example. Let’s say that we are designing a picture for a banner whose actual dimensions are 2400 x 1600px. We would save it as 4800 x 3200px to create a retina image.
The image won’t appear bigger than usual if you’re using web components. Drupal will automatically fit the image into the given physical space. By squeezing twice the number of pixels into the same space, it creates a higher pixel density and therefore a better quality image.
A retina image may appear bigger if you’re creating a WYSIWYG page. You can either force the image dimensions in the front-end or upload the image at its normal (non-retina) dimensions.
Compressing Images for Faster Load Times
It’s important to balance image quality with image compression. Compressing your images reduces their file size so that loading them is faster and takes less data. This makes your platform more accessible, especially to users with slow-speed internet connections and those who are using mobile data while they’re on the move.
Images should typically be no larger than 300-500KB. Smaller is usually better, especially for smaller-scale images. If many of your images exceed this, users will experience a slow and laggy web performance.
You can run an action in Photoshop to automatically batch and save multiple images in one clean sweep. Export your images at a quality between 80-85%. Finally, compress the images with a free tool like TinyPNG or Compressor before uploading them to your platform.
Image
Image
Defining Focal Points in Drupal
Drupal automatically scales your images for desktop, mobile, and tablet. This means you don’t have to upload different versions of the same image.
Some images will scale at the same aspect ratio meaning the image will look the same except smaller or bigger. Other images (e.g. mobile banners) may be cropped to fit various devices meaning parts of the image may not always be visible.
You can control how images scale on different devices by selecting a focal point on the image in Drupal. Preview the image on desktop, mobile, and tablet to ensure it looks good before publishing.
Need more guidance?
This article is a great starting point for adding visual interest to your site and ensuring your images look as good as possible.
Want to take your knowledge to the next level? Sign up for training in UX design or content strategy.
//–>
//–>
//–>
//–>
//–>
Linux Foundation Annual Report 2022: Leadership in Security and Innovation
In 2022, the Linux Foundation, in collaboration with our community, engaged in new initiatives to secure the software supply chain, enabled innovations with social, economic, regional, and environmental impact, supported open industry standards, and continued to embrace diversity and inclusivity. Read the report today.
The post Linux Foundation Annual Report 2022: Leadership in Security and Innovation appeared first on Linux.com.
Over a decade of anti-tracking work at Mozilla
I joined the Firefox privacy and security team in 2016. For years, the privacy engineers here at Mozilla have known that online trackers use every identifier they can get to track and re-identify people all over the internet. Over the last six years, I’ve been able to contribute to Private Browsing, Tracking Protection, Containers, Monitor, […]
The post Over a decade of anti-tracking work at Mozilla appeared first on The Mozilla Blog.
Introducing passkeys in Chrome
We announced in October that passkey support was available in Chrome Canary. Today, we are pleased to announce that passkey support is now available in Chrome Stable M108.
What are passkeys?
Passwords are typically the first line of defense in our digital lives. However, they are at risk of being phished, leaked in data breaches, and even suffering poor password hygiene. Google has long recognized these issues, which is why we have created defenses like 2-Step Verification and Google Password Manager.
To address these security threats in a simpler and more convenient way, we need to move towards passwordless authentication. This is where passkeys come in. Passkeys are a significantly safer replacement for passwords and other phishable authentication factors. They cannot be reused, don’t leak in server breaches, and protect users from phishing attacks. Passkeys are built on industry standards, can work across different operating systems and browser ecosystems, and can be used with both websites and apps.
Using passkeys
You can use passkeys to sign into sites and apps that support them. Signing in with a passkey will require you to authenticate yourself in the same way that you unlock a device.
With the latest version of Chrome, we’re enabling passkeys on Windows 11, macOS, and Android. On Android your passkeys will be securely synced through Google Password Manager or any other password manager that supports passkeys.
Once you have a passkey saved on your device it can show up in autofill when you’re signing in to help you be more secure.
On a desktop device you can also choose to use a passkey from your nearby mobile device and, since passkeys are built on industry standards, you can use either an Android or iOS device.
A passkey doesn’t leave your mobile device when signing in like this. Only a securely generated code is exchanged with the site so, unlike a password, there’s nothing that could be leaked.
To give you control over your passkeys, from Chrome M108 you will be able to manage your passkeys from within Chrome on Windows and macOS.
Enabling passkeys
For passkeys to work, developers need to build passkey support on their sites using the WebAuthn API. We’ve been working with others in the industry, especially Apple and Microsoft, members within the FIDO Alliance and the W3C to drive secure authentication standards for years.
Our goal is to keep you as safe as possible on the web and we’re excited for what the passkeys future holds. Enabling passkeys to be used in Chrome is a major milestone, but our work is not done. It will take time for this technology to be widely adopted across sites and we are working on enabling passkeys on iOS and Chrome OS. Passwords will continue to be part of our lives as we make this transition, so we’ll remain dedicated to making conventional sign-ins safer and easier through Google Password Manager.
Posted by Ali Sarraf, Product Manager, Chrome