What are src and srcset?
Responsive images help provide better website performance by providing a variety of sizes and types of images to the browser so that the most optimized one can be used. It helps with website performance and user experience by reducing the load time and bandwidth needed for images by balancing quality with file size depending on the device the user is using to view the website. For example, an entire picture could be used on large screens, however on smaller screens, only a portion of the picture could be used. Some users may be using older browsers and need a different type of file in order to render the image, whereas some users may have a higher resolution device with the latest browsers that can render newer image types that lead to crisper and higher quality images. The developer provides multiple image files, and the browser determines which is the best to use. The src is the original image src, and the src set is the multiple versions of the image that the browser can pick from based on width descriptor and size attribute.
What are sizes?
The sizes attribute is a comma separated list that provides the various widths of the images within the src set provided to the browser by the developer to have more responsive images based on the screen size of the device the user is using to view it. The size attribute can be an absolute length, such as in pixels, or it can be a viewport-relative length. However, percentages are not allowed when giving the widths of images within the src set.
What is Art Direction in Web Development?
Art direction in the context of web development is about having a vision and a message that is communicated in harmony and unity with the design of the website. It means taking the time to brainstorm what the overall message or story and “feel” of the website is meant to embody and making design choices based on that. Since multiple people might be working on a website, having a solid art direction that is understood by all of the developers is important so that users experience the website as intended by the art direction, no matter who worked on what portion of the website. It is about being intentional on what, where, and how items are coded. For example, if a website is showcasing a travel experience to a tropical place, colors that help set the mood such as calming colors found on the beach could be chosen, and perhaps a video of the gentle lapping of waves on a beach. A simple design may also be chosen to help the user feel like this could be a place where they could relax and spend some time enjoying themselves. Art direction is about having both design thinking and development thinking working hand in hand.
Summary
Responsive images and art direction are both pieces of web design and development that I want to continue to practice. I am still trying to figure out how to effectively choose image sizes based on screens, but it is important for me to learn as the ultimate website I am in charge of is our business website which uses a lot of pictures. There are also a variety of generations that want to browse and purchase our work and are often viewed during festivals which can have questionable reception at time so having responsive images is important. I am also a counselor first and foremost and care deeply about how people experience the world around them, including the virtual world. The psychology of color, shape, and other design principles interest me a lot! I’ve gone to workshops on the psychology of colors and find it absolutely fascinating. What can be difficult is the intersection between individuality and the psychology of design, as well as potential medical conditions. A website might appear “fun” with a variety of bright colors, but some of us struggle to have fun with too much stimulation. This is why it is very important to do research and seek feedback so that I, as a developer, can know the experience of our website from those that are most actively using it.