First Contentful Paint (FCP) is a metric that measures the time that takes to load, and be shown (rendered) to the user, the first element of the website: could be text or an image.

What is First Contentful Paint?

If you are reading this article it is because you are a Developer, Marketer or you manage an eCommerce or a website with a lot of images. Image optimization is the first step to achieving a successfully optimized website...

The Most Complete Guide for Image Optimization

The next step in image optimization is finally here. While it may not be ready to replace legacy formats, it certainly holds promise for the future of high-quality content delivery.

AVIF: The (best) Image Format for any website

Vue is a very popular JavaScript front-end framework (they help us create modern applications and are mostly used on the web) that’s experiencing a huge amount of growth. It’s simple, tiny (~24KB), and very performant. It feels different from all the other JavaScript front-end frameworks and view libraries.

How to use images in Vue.js: A complete guide

The main goal of this article will be to list the different commands in CSS to carry out the main actions like how to center an image with CSS, sizing images, covering backgrounds with images, etc.

Hacks to style your website images with CSS

Have you ever tried to make an *image background transparent* but were unable to and/or spent an eternity trying to get it right? Well, in this guide we are going to show you how to make a background transparent in your site images with CSS.

Set Image Transparency in your site images with CSS

If what you are looking for is to achieve a better user experience in your web application, we know that is a great and almost essential starting point. Meet lazy loading.

Lazy Loading: The key of faster pages

In June 2021, Google is expected to launch its Page Experience algorithm. This is going to be a key element that will have an impact on web site rankings. The aim is to measure through the different aspects of a website’s user experience.

Images & Core Web Vitals: What to expect

You may have heard people talking about real-user measurement, real-user metrics, or end-user experience monitoring; these are all different ways to call Real User Monitoring (RUM).

What is Real User Monitoring (RUM)?

Project Social T has the mission to design better fashion and make an impact on the world. The brand was founded in Los Angeles, California in 2011, and they design and produce in Los Angeles as well, with the purpose of giving attention to fabric quality and simplicity.

Project Social T: When user experience is the most important

For those who haven't heard the term before, CDN stands for Content Delivery Network. It works by speeding up the delivery of your content website, serving it from the closest location near where the user is accessing your web...

Why is it important to use a CDN?

When we see an image, we can infer, in most cases, if its image quality is enough or it is low. Our eyes tell us if there is some unexpected noise that makes us feel that any image isn't properly treated.

How we manage the Image Quality at Piio?

When Google makes changes to its algorithm and ranking factors, everyone notices (or you should notice). Google makes a new announcement of the **Core Web Vitals** or named just Web Vitals as well...

What are Core Web Vitals?

Are you looking for a guide to help you out on the exact measurements you can use on the images for your website? Are you confused by the amount of information out there on image optimization, image sizing, format guides, etc?

Complete Guide of Image Sizes for every website

One of the largest eCommerce home improvement retailers needs to drive users to their platform. They were looking to optimize and automate the image-delivery process. Everything with a main goal: improve the entire Digital Experience.

Improving the digital experience to millions of users with Piio

Thanksgiving is just around the corner and that means, Black Friday and the holiday season too. For more than 10 years, the major retailers such as Walmart, Target, Best Buy, Gap, have kicked off their stores. Due to COVID-19, they announced...

5 Tips to Optimize Your Online Store and prepare your website for Black Friday 2020.

Google’s algorithm is an ever-changing entity that determines the success or failure of your website. So naturally, all of us are constantly trying to crack the code for how to show up first on Google’s result page. However, Google doesn’t release much...

Why You Should Always Optimize Your Images for SEO

Speed is the cornerstone of digital experience. If a consumer has to wait one second, you can lose up to 20% of conversions on mobile. Amazon would lose $1.6 billion in revenue if their site took just one second longer to load. 

5 Steps to Improve your Digital Experience

Front end optimization, or FEO, is the process of making sure that your website is going to be easy for any browser to open and load the content from. This means making your website...

5 key elements of Front End  Optimization

We all know what waiting means, and we don't want it. It's awful to be waiting in line, wait for something you bought to be delivered, or to click on a link and wait for a website to load, especially if it is your website. You don't want to be that company that users slip away because the website didn't load properly...

Web performance for Humans

Mobile browsing might look the same as web browsing but on a smaller screen, but people behave differently depending on which device they’re using. If you thought that internet surfers’ attention span was...

Enhance images by optimizing your mobile website

As the world adjusts to its "new normal," it's become increasingly apparent that the COVID-19 outbreak will affect every area of life. Marketing isn't exempt, so it's essential to know how to measure marketing metrics in a pandemic.

How to Measure Marketing Metrics in a Pandemic

You just created the website of your dreams, and it looks amazing. Mission accomplished — until an Image Speed Test tells you the pictures have slowed down your load time and now Google hates you...

How to Handle an Image-Heavy Website

Google changes all the time, and there are many things on our website that we must pay attention to rank higher on Google. In other words, to push the SEO from our site. The Company is no longer just optimizing websites...

Google Algorithm Update: Understand How Piio can help you

We know the beginning of 2020 was not the start that most of us expected. It started "kind of different" challenging and isolated. Maybe your plans to grow, to invest, to evolve are different now. But with how's the world today, we want to be helpful. It's an excellent opportunity to enhance the online experience...

Image Speed Test: The new Analysis Tool for websites

Images are a very important tool that allows us to tell stories. When it comes to a website or even more e-commerce, images have the important role of creating a mood, and basically...

Optimize images to boost page speed and appearance

People access your website from multiple types of devices like phones, tablets, laptops, desktop computers, Smart TVs and probably someone browsers the internet using a Smart Refrigerator...

CSS Breakpoints: How to use them to create responsive websites

WebP is an image format developed by Google in 2010. Although it's not very common or famous, WebP is truly an innovative and efficient image format. Why? Because when you compress an image...

What is WebP and how to change your images to WebP format?

Page Load is the time that your website takes to load all the contents included on your page. Focusing only on page load can be a mistake. Reducing it can be beneficial, but there are other elements that we can work with to improve user experience...

Why First Contentful Paint is more important than Page Load?

We know that the Slider is the first impact with the brand and it is a good "tool" to call the attention of your audience. But if you invest time choosing the correct images for the slider, and the images don't load correctly, the users will never see them....

How to integrate Piio and bx Slider together.

TurnKey Vacation Rentals is a platform that has the mission to offer a reloaded rental Luxury Vacation Experience. Founded in 2013, TurnKey pioneered a new model for scaling vacation rental hospitality in top destinations across the U.S.

How Turnkey reduced to half their load time with Piio.

It comes a time on the design process were using the same image for desktop and mobile devices doesn't work. Using a wide hero image on the desktop may look nice, but when you go to a mobile device, the details on the image get lost, and the products are barely visible...

Art Direction: Showing different images per device

Dealing with large Redis databases isn't a walk in the park, mainly when you have to step aside from the commonly used SET and GET. Recently we had to perform a migration of our database and here comes the story...

How to Migrate Redis database with +100M keys

We are proud to announce the launch of the new company logo as part of the ongoing evolution of our company’s brand. We have evolved, we haven't changed. Piio has a new identity brand and website but with the same philosophy...

Piio has evolved into a new brand

We all know how the online world works nowadays. Remarkable user experience (UX) as a must-have, the need for mobile-responsive websites, and of course, speed site as one of the very first things to take into account....

Learn how to optimize images for web

While we were working with one of our clients, we realized that their image traffic in mobile was 3x compared to similar websites. In this article we are going to see how to set set the property `display``none to an image.

How To Use CSS Display None Without Affecting Page Load Times

Lazy loading is the best-kept SEO secret in the industry. Many businesses either don’t understand how powerful lazy loading can be or they have bought into many of the myths surrounding lazy loading. Businesses want three things from their websites...

Is Lazy Loading the Best Kept SEO Success Secret?

If you're a designer or a developer, it's clear to you that you need to manage the assets and optimize images for different devices and screen sizes. There are also two types of images that you need to work with...

How to use responsive images with CSS Background srcset

I've been working on web technologies for the last 15 years and I've been a witness of the evolution of every part of the web stack. Back in the day, we needed to create different JS code for every browser, don't get me starting with the `<table>` or CSS styles...

Piio Blog