Images are an effective way of breaking up text, showcasing products or emphasizing brand style; however, resizing images to fit different screen sizes can sometimes prove tricky.
Clear, concise image descriptions help improve SEO and make your site more accessible. Sometimes the image’s filename serves as the alt text; other times you must manually add it yourself.
1. Inline
A great way to combine images and text on Squarespace is through inline elements. These allow them to sit alongside text seamlessly, often used for titles or introductory paragraphs on pages. They can also be formatted using different text styles and contain hyperlinks – this approach being among the easiest ways.
At first, it may be challenging to differentiate between block and inline elements. One key distinction between them is that block elements begin on a new line while inline ones do not. If you need help keeping track of which types of elements belong in each category, a classic example of an inline element would be text that begins a new line.
Another key difference between inline elements and block elements is that inline ones cannot have their width or height specified; block elements allow this functionality. This could prove crucial when designing specific projects.
When using inline elements with images, cropping is often necessary in order to ensure they fit their intended use properly. Unfortunately, getting it just right may prove challenging due to various factors including image size, your design choices and browser window widths.
While it is crucial that images are formatted correctly for web display, it’s also essential that they accommodate for mobile devices and different screen sizes. To do this effectively may require making adjustments in image height, width or resolution that better match different devices – for instance a landscape image uploaded onto a website can become pixelated when viewed on smaller devices; therefore, high-quality images that are small yet clear are recommended so they can be seen clearly on multiple screens without becoming blurry over time.
2. Card
Squarespace provides several image layout blocks that work well with text, including Inline, Card and Overlap. We will explore some strategies for using these layouts together with text to create eye-catching layouts.
For optimal results, choose images that are at least 1500 pixels wide for best results. This will ensure they appear crisp and clear across all screens whereas narrow images may become blurry or pixelated on larger displays. Squarespace websites are responsive, so images will automatically scale according to screen sizes.
As part of your goal to optimize images for responsive design, you also want to make sure they load quickly to avoid slowing down your site. Squarespace suggests using an sRGB color profile when uploading images so they look consistent across devices and load quickly. For more tips on optimizing images for responsive and speedy sites visit our Guide on Adding Images to Your Squarespace Website.
Image Block gives you the power to add clickthrough links, email addresses, file download links or phone numbers directly into images on your site or beyond based on context of image content. Visitors may navigate anywhere on your site from these links based on image context.
Add alt text to images in order to increase accessibility, both for SEO purposes and users of assistive screen readers and browsers that cannot display them. It is best practice to use short, descriptive terms that describe your images rather than trying to incorporate keywords.
When creating image blocks on Squarespace sites, they can be set to open in a lightbox when clicked upon – this feature is particularly helpful when showing off large images or products and letting visitors zoom into details. To use it effectively, ensure your block is set to inline mode with toggled toggled to show lightbox when clicked feature toggled ON; or activate this setting within gallery sections when editing simple, strip, or masonry grid grids – for more details refer to our guide: Adding Image Blocks to Your Squarespace Site and Enabling Lightbox Gallery Blocks on Grid Grid Edits! For more details read our guide: Adding Image Blocks to Your Squarespace Site and Enabling Lightbox Gallery Blocks!
3. Overlap
Images combined with text can draw the eye of your target audience and highlight products or brand styles in ways text alone cannot. While adding photos to Squarespace seems simple enough in theory, things may go awry when images don’t fit the block exactly right or load slowly (a potential SEO drawback). Luckily there are ways around these issues and create an efficient image layout on your site.
Add captions to image blocks on your site in order to provide readers with context about what they’re viewing and to increase accessibility for those using assistive technologies. Squarespace features an image caption feature which allows you to set an image title which will display when users hover over an image block.
To add captions to an image, navigate to the gallery page where it needs to be added and click the gear icon. Enter your caption into the Image Title box.
Add Clickthrough URLs
With version 7.0, image blocks, galleries sections and certain templates allow you to easily create clickable links between pages on your website or external websites and blog posts, product pages or events pages or even download files such as PDFs. These clickable links can then serve as clickable navigation tools that make navigation simple for visitors.
When creating clickable links with images, it is crucial that their file names and titles include keywords for search engine optimization (SEO). This will allow search engines to more quickly index your page when someone searches the term contained within your image. By default Squarespace pulls in the filename as alt text but you can modify this in Content Tab of image block.
4. Collage
Collage is an artistic technique in which artists use various materials to form new works of art. Collage can be used to tell stories or express emotions through its creative mix-and-match nature; its mix-and-match nature allows artists to combine various media such as ribbons, paint, bits of colored or handmade papers from artists or texts as well as buttons and keys into one cohesive artistic work. Examples include picture books by Eric Carle that feature cutout images as well as collages made out of old magazines and photographs.
As an art form, collage stands apart by not requiring technical expertise like painting or sculpture do. Instead, its expertise lies in selecting, arranging and adhering materials to surfaces with great freedom and spontaneity compared to more formal approaches like realism or abstract painting.
Collage art has existed for centuries; however, in the 20th century it became an increasingly popular artistic technique. Collage has long been employed to explore a wide variety of subjects and ideas from political to social issues to everyday beauty; and is used widely by Dada, Surrealist, Pop Art movements as well as contemporary artists looking for ways to express their individual styles and viewpoints through collage art.
Squarespace 7.1 now gives you access to preloaded image layouts that work great for combining text and images, accessible through adding “add a section”, then choosing Images for more layout ideas.
These image layout options each offer unique design settings that you can update from the Image Block options menu by clicking on the pen icon and selecting Design tab. Furthermore, you can apply color themes or even set animations on individual image blocks within a section – for more information please see Guide to Image Blocks.
