File Size
Something as seemingly simple as file size may feel intuitive when dealing with accessibility and Responsive Web Design, but it can be easily overlooked as sites are developed. A single, large image can decrease how quickly the page loads, decreasing the user's experience of the site and potentially discouraging them from accessing it again. This is particularly true for mobile devices, which are more likely to be a lower-bandwidth than a desktop computer.
Responsive Web Design (RWD) can be used to scale an image depending on the size of the screen on which the site is being used, but this should not be used as a replacement for simply decreasing the size of the image. Resizing an image is as easy as opening it up and scaling it in MS Paint.
By utilizing breakpoints, images can be adjusted based on the size of the device used to view the website. Using percentage to express image sizing rather than specifying height and width makes it responsive.
img {
max-width: 100%;
padding: 1% 2% 2% 2%;
float: right;
}
/* 1st BREAKPOINT */
@media screen and (max-width: 65em) {
img { float: none; }
}
/* 2nd BREAKPOINT */
@media screen and (max-width: 40em) {
img { width: 100%; }
}
But Not Just Photos!
Enormous file sizes aren't just images - this can include audio and video files as well! One option for avoiding large video files is to host the video on YouTube or similar video hosting site. YouTube has a “copy and paste” option for embedding videos: