Reaching perfection in a responsive digital world feels like climbing a hill that never ends. As new technology and devices are developed, the rules, guidelines and best practices of existing software must change too.
When MemberGate changed the display of the pages in the software so they were responsive it was suggested not to include fixed width and height attributes to parts of the page like images. If an image had a fixed width, that meant the browser would always display that image at that specific width. If the user's screen size was smaller than that width, then the image would just push the full screenview outside of the viewing area.
Because of that if an explicit size was required, it was suggested to use a variable width like a percentage. Setting a width percentage at something like 75% allowed the browser to reduce the size of the image according to the size of the screen. The image would be displayed at 75% of whatever the size of the screen was. An even better suggestion was to totally leave off width and height attributes altogether. This allowed the browser to reduce the size of the image accordingly to fit the size of the user's device.
New Challenges
This developed into a different type of problem for browsers. Because the browser doesn't know the size of the image to display (so it fits in the screen), as users scroll down a page the layout of the page can constantly shift as the browser 'figures out' how to best display the image and the text around it. This shifting can cause users to lose their place on the page or where they are reading throughout the time they are on that webpage.
While the browser is trying to figure out the image size and how best to display it, the processing and loading speed of the page suffers. It takes longer to load the page as the browser readjusts the widths and heights of the images so they fit on the screen properly and at the correct aspect ratio so the image is not distorted.
The Solution
Web performance experts have concluded that adding a fixed width and height attribute will fix the shifting and slower loading problems. Yes, round and round we go. However, with some other image size styling, an explicit width and height will now help a page to load faster and increase browser performance.
When the width and height are specified, the browser will know the size or aspect ratio of the image before the image begins loading thus making it faster and easier to display the image at the right time.
How MemberGate Has Improved
The fixed widths of images uploaded through placeholders (like image1, image2 etc) have been optimized with best practices for awhile. However, MemberGate has been updated to include the fixed size settings in images that have been uploaded through 'File Upload' or when using other storage areas. This includes when images are explicitly coded through html or when using the image upload icon in the WYSIWYG editor.
In addition to automatically adding the fixed size attributes, if an image 'alt' tag is missing, the system will also add one for you. An alt tag provides text details for what the image is or what it is showing. This helps a search engine to index the image appropriately. Not having alt tags can actually have a negative effect on SEO rankings.
How Does this Help with SEO
Because page loading is faster, users will stay on the page longer and will not surf off the page while waiting for pieces to load. This will increase user retention to your site. Google also uses page load speed as a big indicator for sites that should appear at the top of the search. Finally, it also helps with reverse image searches as well.
Just by adding the fixed size attributes on images ends up in a win, win, win situation.