{"id":6580,"date":"2020-12-16T19:08:15","date_gmt":"2020-12-17T00:08:15","guid":{"rendered":"http:\/\/www.glajumedia.com\/en\/?p=6580"},"modified":"2022-03-22T21:49:21","modified_gmt":"2022-03-22T21:49:21","slug":"css-practices-create-responsive-image","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/css-practices-create-responsive-image\/","title":{"rendered":"CSS Practices to Create Responsive Image"},"content":{"rendered":"

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.\u00a0<\/span><\/p>\n

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.<\/span><\/p>\n

\"responsive<\/p>\n

PICTUREFILL<\/span><\/h2>\n

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 <\/span>picturefill<\/span><\/a> script that proposed <picture><\/code> element. It is a JavaScript code that imitates the picture API.\u00a0<\/span><\/p>\n

Picturefill doesn’t need jQuery, but it requires the picturefill.js<\/code> 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.\u00a0<\/span><\/p>\n

Since Picturefill requires a lot of custom markup, it isn’t the best choice if you cannot alter your website’s source code.\u00a0<\/span><\/p>\n

NETFLIX WAY<\/span><\/h2>\n

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.\u00a0<\/span><\/p>\n

The code looks like this:<\/span><\/p>\n

\"Netflix<\/p>\n

ADAPTIVE IMAGE<\/span><\/h2>\n

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.\u00a0<\/span><\/p>\n

To add it to your Web server, you should use the .htaccess<\/code> 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.\u00a0<\/span><\/p>\n

An advantage of using <\/span>Adaptive Image<\/span><\/a> 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.\u00a0<\/span><\/p>\n

\"responsive<\/p>\n

CAPTURING\/MOBIFY.JS 2.0<\/span><\/h2>\n

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<\/code> 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.<\/span><\/p>\n

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

\"responsive<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":1,"featured_media":6583,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[38],"tags":[155,156,124,29],"class_list":["post-6580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-web-design","tag-css","tag-responsive-image","tag-web-development","tag-web-development-peru"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=6580"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6580\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/6583"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=6580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=6580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=6580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}