#

All Posts

CSS Practices to Create Responsive Image

Published:

Dec 16, 2020

Share this post:

Have any of you ever ask yourself about a mobile-friendly website? If you took the responsive design route, then you must establish a strategy to make a responsive image. The basic rules are simple after your master by starting scaling the images. 

You might also face performance and art direction to solve some issues. There are many practices to create a responsive image and each of them with its weaknesses and strengths. This article will help you to fight two enormous enemies: responsive image and deadlines.

responsive image issues

PICTUREFILL

The internet is worldwide, but we forget that not everyone has the same quality access to fiberoptic connections and 4G networks. Scott Jehl has realized this digital divide about the idea of mobile-first and responsive sites. Jehl has a picturefill script that proposed <picture> element. It is a JavaScript code that imitates the picture API. 

Picturefill doesn’t need jQuery, but it requires the picturefill.js script. Another requirement for Picturefill is some special markup with divs to represent the image variation, differentiated by data-media attributes that act as media queries in CSS. 

Since Picturefill requires a lot of custom markup, it isn’t the best choice if you cannot alter your website’s source code. 

NETFLIX WAY

It is a little trick that works everywhere, where you need to wrap your image with a relatively padded parent. Here, you will keep the responsive image ratio with a percentage on the padding property. 

The code looks like this:

Netflix code

ADAPTIVE IMAGE

Adaptive images, created by Matt Wilcox, is a server-side solution that requires a little bit of JavaScript. However, the hard work is managed through the Apache 2 Web server, PHP 5.x, and the GD library. 

To add it to your Web server, you should use the .htaccess file, next upload some PHP files to your website’s root directory. You have to add some JavaScript to your pages and modify some breakpoint variables in the PHP files. In this way, it will match your website’s media queries. 

An advantage of using Adaptive Image is that it doesn’t require a custom markup on your images. When everything is completed, the PHP script will intercept any request for a picture and resize it as your specific breakpoint sizes and deliver it on your pages automatically. 

responsive image practices

CAPTURING/MOBIFY.JS 2.0

It is a new feature from the in-development Mobify.js 2.0, which gives you access to the HTML. At this stage, you will be able to swap an image’s src attribute before the browser downloads it. Capturing is a technique that directly circumvents native browser preloading, which can cause a performance issue if it is misused.

The ways from above might not be the only ones, but not consider enough in your business site. Indeed, it can help you with CSS practices to create responsive images to improve your business site. Above all, developers at Glajumedia can give you that peace of mind by expanding your website.

responsive image on different divices

Enjoy this post?

Join Our newsletter

    Keep reading

    Office 365 for business: Choose the ideal plan

    Office 365 for business: Choose the ideal plan

    Elegir el plan adecuado de Office 365 para empresas puede ser complejo. Considera factores como el número de usuarios, funciones requeridas y presupuesto. Microsoft ofrece tres opciones principales: Básico, Estándar y Premium, cada una con diferentes características para satisfacer diversas necesidades empresariales.

    Software Project Management: Trello, Asana and Jira

    Software Project Management: Trello, Asana and Jira

    Discover the main project management tools: Trello, Asana and Jira. Explore its features, use cases, and how to select the best one for your team. Optimize the efficiency and effectiveness of your projects with the right tool for your specific needs.

    Blockchain: Beyond Cryptocurrencies

    Blockchain: Beyond Cryptocurrencies

    Blockchain, beyond cryptocurrencies. Secure, transparent and decentralized database. Revolutionizes industries: supply chain, digital identity, property, electronic voting, smart contracts, copyright, decentralized finance, IoT.

    SD-WAN: Seven reasons to choose managed services

    SD-WAN: Seven reasons to choose managed services

    SD-WAN managed services let you take advantage of the benefits of SD-WAN technology without the burden of management. You will get a more flexible, secure and scalable network, while you reduce costs and focus on your business. Contact us for more information.

    RTO and RPO as Pillars: Business Resilience

    RTO and RPO as Pillars: Business Resilience

    Maximize business resilience with a balance between RTO and RPO. This approach ensures business continuity in the face of failures and disasters, minimizing data loss and ensuring rapid recovery.