>How to Solve the Issue of Image Dimension Specifying in Magento

How to Solve the Issue of Image Dimension Specifying in Magento

Optimizing images is an important step in website optimization. We need to set height and width attribute for image tag to make it better for SEO and loading speed. For instance:  <img src=”abc.jpg” width=”100″ height=”50″ />

However, after optimizing, there is one problem when displaying images in different devices. Because each device has a different screen resolution, the width-height ratio must change and lead to distorted images

Take a comparison between computer and mobile as an example: As you know

image before optimizing

, nowadays, a person can visit a site through different devices, so website need to be designed to keep up with. Don’t let your image be a very attractive website but cannot display on a mobile screen. If not figuring out this problem, you may face with the risk of losing potential customers.

To handle this issue, we recommend a solution: using hack code padding-bottom

With this technique, height is defined as a measure relative to width. We can use padding and margin, which have intrinsic properties, to create aspect ratios for elements which do not have content inside. When we set padding- bottom to be relative to the width of an element and set height = 0, the image will display as we wish.

image after optimizing

To determine the display space for images, you should follow steps:

+ Determine the height and width of images

+ Add width and height attribute for img tag with determined dimension

+ Use css (+html)

You need to create another tag to wrap the img tag. The purpose of the wrapping tag is to reserve the space needed for the image to display.  This tag has a block-level element to specify exact ratio between height and width of the img tag.

  • Css for wrapping tag (supposing that clas = img-container)

 

.img-container {

position: relative;

padding-bottom: 63.32%; / 16:9 ratio / ( 16:9 is the height- width ratio of the image) 

height: 0;

overflow: hidden;

}          

 

  • Css for img tag:

 

.img-container img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

 

With this technique, width and height attribute of img tag will be better for SEO ( a img tag with width and height attribute will be SEO- friendlier), although it does not have using value.

Moreover, the container takes a role of replacing for the height and width of images. With padding- bottom: 63.32% (this percentage may be different in other images) and height =0, image ratio will be safe for a responsive website.

If you find our tutorial helpful, please Like, Share and Subcribe to spread it to more users.

We are always willing to support you with problems related to Web Development and Magento Extension, feel free to contact us if you need further advice.